Как все-таки правильно вставлять изображение в пост?

Рискую быть осмеяным, но все же задам этот вопрос ибо ответа не нашел не на форуме, не в коде блогов некоторых участников форума.

Мне необходимо в записи вставить небольшие изображения с выравниванием влево и обтеканием текста справа. Вокруг изображений должна быть однопиксельная рамка с отступом в 3 пикселя.
Новый стиль оформления рисунков WP 2.6 и визуальный редактор не используем.
Задача – сократить до минимума объем вставляемого в запись кода за счет CSS.

Чтобы получить желаемую рамку, в style.css дописал:

#content p img{
padding: 3px;
border: 1px solid #ccc;
background: #fff;
}

Для выравнивания и обтекания изображений вставил в style.css кусок из дефолтной темы:

p img {
    padding: 0;
    max-width: 100%;
    }

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

img.right {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

img.left {
    padding: 4px;
    margin: 5 5 0 0;
    display: inline;
    }

.right {
    float: right;
    }

.left {
    float: left
    }

В режиме HTML вставляю изображение между тегами <p>:

<p><img class="left" style="margin: 4px 7px 0px 0px" src="http://.../image.jpg" />Текст абзаца.</p>

Это правильно? Внешне все выглядит как задумано. Можно ли еще больше сократить вставляемый код, например, загнать в CSS и значения margin? :rolleyes:

Коментарии: 3

sonika

26.07.2008 14:10

Ответить

#content p img{
padding: 3px;
border: 1px solid #ccc;
background: #fff;
margin: 4px 7px 0px 0px;
}

<p><img class="left" src="http://…/image.jpg" />Текст абзаца.</p>

между прочим для img у которого класс left отступы уже заданы:
img.left {
padding: 4px;
margin: 5 5 0 0;
display: inline;
}

26.07.2008 14:40

Ответить

sonika, спасибо! Вы, как всегда, приходите на помощь первой 🙂

между прочим для img у которого класс left отступы уже заданы:

Действительно, видимо мне между глаз попало 🙂
И наверное, чтобы в дальнейшем можно было безболезненно использовать и выравнивание вправо, поля стоит прописать именно в класах left и right?

27.07.2008 16:13

Ответить

Вылез небольшой и предсказуемый побочный эффект – рамки вокруг смайлов. Хоть использование смайлов и не предполагается, решил сделать рамку классом.
Кроме того, чтобы не конфликтовали параметры padding и при вставке изображений без рамки, сохранялось их выравнивание по краю текста подправил соответствующие классы.
Вот что получилось, может кому пригодится 🙂

p img {
    padding: 0;
    max-width: 100%;
    }

img.brd {
    padding: 3px;
    border: 1px solid #ccc;
    background: #fff;
    }
    
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

img.right {
    margin: 4px 0px 0px 7px;
    display: inline;
    }

img.left {
    margin: 4px 7px 0px 0px;
    display: inline;
    }

.right {
    float: right;
    }

.left {
    float: left
    }

Как все-таки правильно вставлять изображение в пост?

Свежее