Инструкция - Как делать картинки необходимого размера в DLE

Итак, по просьбам многочисленных желающих выкладываю инфу, статья о том "Как делать картинки необходимого размера в DLE". Метод не новый, и уже давно используется в вордпресс.

Написал для своего блога - пруфлинк - Как делать картинки необходимого размера в DLE

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

Как делать картинки необходимого размера в DLE

Итак, сегодня по просьбам желающих поделюсь своим «фирменным секретом» – как делать картинки необходимого размера в DLE.

Объясню сразу суть, кто не в теме. В DLE имеется возможность обрезания картинки по заданным размерам, например, 320х240 пикселей, или по ширине 200 пикселей.

Но что будет если загружать вертикальные и горизонтальные картинки? Тогда получится каша, те большие, те чуть меньше и т.д. Я же предлагаю вам способ, который устранит все эти проблемы – и обрежет картинку автоматически по заданным размерам.

Я использую этот метод на всех своих DLE сайтах – а именно вывожу первую картинку в статье таким способом. Что же я получаю от использования такого способа?

Преимущества использования

Во-первых, в любом месте сайта можно вывести картинку разных размеров. Я уже давно использую теги {custom} для вывода главной страницы. Поэтому, например там можно вывести картинки размером 160х120px. В сайдбарах можно вывести картинку 70х53px (например блоки последних новостей, блок популярное и т.д.). В рубрике вывести 200х150px, а в полной новости – 400х300px. Все эти размеры придуманы мной для примера, вы можете задать любые.

Во-вторых, картинка будет храниться в дополнительном поле, поэтому можно будет легко извлечь ее в любом модуле. Я прописал буквально пару строк и в блоке «Популярное» уже виды картинки. То же самое можно сделать и вблоке похожих новостей в полной новости.

В-третьих, в нужных местах можно вообще вывести без картинки, например блок «Автоновости» через {custom}, ведь если пользоваться стандартным способом, то в новости будет картинка и чтобы вытащить кусочек текста без картинки придется дописать немного php-кода.

В-четвертых, потом может допишу если вспомню что-то.

Примеры вывода

Скрипт TimThumb – PHP Image Resizer

Официальная страница разработчика, скачать сам скрипт можете тут – страница GoogleCode. Сохраните его как timthumb.php, а дальше я расскажу как прикрутить его к DLE.

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

В общем допишем немного кода в темплеты shortstory.tpl и fullstory.tpl, ну и куда там вам еще надо, если в блок популярного – engine/modules/topnews.php, если в блок похожих новостей – engine/modules/show.full.php. Но там надо писать php, а статья не об этом. Можно также втулить код в searchresult.tpl.

Рассмотрим shortstory.tpl:

<div>
 [xfgiven_image][full-link]
 <img width="170" height="120" src="{THEME}/timthumb/timthumb.php?src=[xfvalue_image]&amp;w=170&amp;h=120&amp;q=100&amp;zc=1" alt="{title}" />
 [/full-link][/xfgiven_image]
 <div>
 <h2>[full-link]{title}[/full-link]</h2>
 </div>
 {short-story}..<br />
 <span>Просмотров: {views}</span>
</div>

Рассмотрим fullstory.tpl:

<div>
 [xfgiven_image]
 <img width="170" height="120" src="{THEME}/timthumb/timthumb.php?src=[xfvalue_image]&amp;w=170&amp;h=120&amp;q=100&amp;zc=1" alt="{title}" />
 [/xfgiven_image]
 <div>
 <h1>{title}</h1>
 </div>
 {full-story}..<br />
 <span>Просмотров: {views}</span>
</div>

Не буду подробно останавливаться на том, почему там H1, а там H2, и почему там есть [full-link][/full-link], а во втором нет. Стили, html-код вы можете использовать любой, ****, главное обратить внимание на эти строчки:

[xfgiven_image]
 <img width="170" height="120" src="{THEME}/timthumb/timthumb.php?src=[xfvalue_image]&amp;w=170&amp;h=120&amp;q=100&amp;zc=1" alt="{title}" />
[/xfgiven_image]

Рассказываю теперь подробно:

- [xfgiven_image]..[/xfgiven_image] – стандартные функции DLE, требуется создать дополнительное поле с машинным именем image, xfgiven – это проверка на то, что в поле есть какие-то данные;

- src=»{THEME}/timthumb/timthumb.php – путь к скрипту, требуется закачать файл в папку с шаблоном сайта, создать папку timthumb и кинуть туда скрипт, также тут же создать папку cache и дать ей права 777, в этой же папке положить .htaccess файл, а в нем прописать код:

Order Deny,Allow
Allow from all
 
Options -Indexes

Уясним более подробно, папка шаблона – в ней создать папку timthumb, а внутри 3 объекта – .htaccess файл, папка с будущим кешем и сам файл-скрипт.

- размеры указываем любые w=170&h=120 (w – ширина, h – высота в пикселях);

- q=100 – качество изображения, в процентах, я ставлю от 70 до 95;

- zc=1 – image crop – единичка отвечает за обрезание картинки пропорциональными размерами, там на странице разработчика обширная справка.

- куча других параметров, которые мне не особо нужны, там есть обработка картинки, как в фотошопе, в черно-белый цвет можно перенести, куча фильтров и тд.

Это пока все, что вспомнил. Если будут вопросы, задавайте. Да, там на некоторых говнохостингах есть запрет кое-каких параметров php и данный скрипт работать не будет, кстати в новых версиях DLE идет запрет на выполнение php-скрипта из папки шаблона, поэтому придется либо снести файл templates/.htaccess либо кинуть скрипт в другую папку – например site.ru/resizer/timthumb/timthumb.php – в корень сайта это.

Удачи! Истинный заводской раб!

Задавайте вопросы, что смогу отвечу, желательно в блоге.