Вставлю свои 5 копеек. Прокомментирую второй вопрос по поводу изображений.
Плясать от размеров изображений и как-то перестраивать генератор для этого - не самая лучшая идея. Объясню почему:
1. Изображение в данном случае - это контент, т.е. наполнитель блока. Блок (его геометрия) в структуре страницы имеет больший приоритет, чем то, что в него система кидает. Блок не должен менять свои
горизонтальные размеры в зависимости от содержимого. Иначе вся вёрстка "поедет". Или появится горизонтальная прокрутка.
Ни то ни другое не допустимо.
2. Браузер (по моим наблюдением) более бережно уменьшает изображения, чем растровые редакторы и тем более скрипты обработки изображений встроенные в CMS. Иногда разница почти незаметна, а иногда сильно отличается. Лучше вывести изображение размером 500px и ужать его через CSS до 250, чем жать сразу до 250 и выводить мелкое.
Я сталкивался с подобным, когда мне нужно было выводить логотипы производителей. Также иногда такой подход позволяет делать меньше типоразмеров изображений.
Теперь предметно. На странице, указанной автором темы, следующая разметка:
<div class="news_img">
<a href="http://">
<img src="pr.png" alt="" title="" class="block-row-img" width="340" height="310">
</a>
</div>
Я бы сделал следующее:
- Убрал из шаблона параметры изображения width="" height=""
Они мешают управлять свойствами изображения из CSS, пропадает гибкость в настройки визуальной части.
- Прописал блоку DIV.news_img необходимую ширину (150px) через CSS. Поскольку блок вложенный, правый внешний отступ (margin-right) нужно повесить на него.
- Прописал ширину изображения, вложенного в блок DIV.news_img - 100%, а высоту - auto, чтобы оно не искажалось при несоответствии соотношений сторон требуемым размерам. Отступ справа бы убрал.
Таким образом изображение всегда будет подстраиваться под геометрию родительского блока, а визуально вёрстка страницы всегда будет ожидаемой и адаптивной!
CSS для участка вёрстки (нужно добавить). Игорь (alexeev), точнее не скажу, т.к. вы не потрудились отключить кэш на сайте и понять - какие стили у вас в каком файле и в какой строке не представляется возможным:
.news_img {
width: 150px;
margin-right: 15px;
}
.block-row-img {
margin-right: 0;
width: 100%;
height: auto;
}
Если изображения нужны не выше определённой высоты, можно добавить родительскому блоку изображения:
.news_img {
height: 150px; /* требуемая высота блока */
overflow: hidden;
}
Авторам советов
с препарированием изображений рекомендую ознакомиться со старейшим ресурсом
The Zen Garden CSS, который пропагандирует философию CSS, а именно изменение внешности страниц путём гибкой настройки только лишь CSS-стилей и использование других средств только тогда, когда возможности CSS исчерпаны. Для того CSS и создавался.