Шаблоны DLE тематики:
Все Шаблоны
Уникальные Шаблоны Авто и мото Бизнес Недвижимость Строительство Туризм Спорт Фильмы СМИ / Новости Игры / Софт Минимализм Музыка Общие Блоговые Женские сайты Для взрослых
DataLife Engine
Скачать DLE 9.7 Скачать DLE 9.6 Скачать DLE 9.5 Скачать DLE 9.4 Модули для DLE Оптимизируем DLE Платное бесплатно! SEO Блог SEO Видео Разное
Шаблоны для DLE бесплатно

Делаем красивый вывод картинок в DLE

 (голосов: 5)

Делаем красивый вывод картинок в DLE


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

Решил выложить его статейку тут:

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

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

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

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

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

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

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

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

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

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

Делаем красивый вывод картинок в DLE


Пример вывода на главной:

Делаем красивый вывод картинок в DLE


Рабочие примеры использования скрипта

Это примеры использования, если глянуть адрес картинки то вы увидите такое – http://zavrab.com/wp-content/themes/zavrabTheme/timthumb.php?src=http://zavrab.com/images/2011/04/girl.jpg&w=240&h=160&q=100&zc=1 – где меняются размеры (параметры) w и h. В третей картинке как вы увидели я поставил ширину меньшей, чем высоту, но пропорции картинки совместились, а не сжались как в DLE.

Размер 170х120 пикселей
http://zavrab.com/wp-content/themes/zavrabTheme/timthumb.php?src=http://zavrab.com/images/2011/04/girl.jpg&w=170&h=120&q=100&zc=1

Размер 240х160 пикселей
http://zavrab.com/wp-content/themes/zavrabTheme/timthumb.php?src=http://zavrab.com/images/2011/04/girl.jpg&w=240&h=160&q=100&zc=1

Размер 300х400 пикселей
http://zavrab.com/wp-content/themes/zavrabTheme/timthumb.php?src=http://zavrab.com/images/2011/04/girl.jpg&w=300&h=400&q=100&zc=1

Размер 400х300 пикселей
http://zavrab.com/wp-content/themes/zavrabTheme/timthumb.php?src=http://zavrab.com/images/2011/04/girl.jpg&w=400&h=300&q=100&zc=1

Скрипт TimThumb – PHP Image Resizer

Официальная , скачать сам скрипт можете тут – . Сохраните его как 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 – это проверка на то, что в поле есть какие-то данные;

- [xfvalue_image] – наша картинка, закачиваем картинку к статье и копируем ее URL-адрес, вставляем это в созданное дополнительное поле image;

- 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 – в корень сайта это.

Скажем спасибо за статейку
   




alert Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
 
юзерпик
19 декабря 2012 13:52
Комментарий #1

Группа: Гости
Регистрация: --
Коментов: 0
Новостей: 0


Огромное спасибо! Все получилось на отлично! Действительно - в DLE 9.7 идет запрет на выполнение php-скрипта из папки шаблона - но все сделала так, как вы сказали - и о чудо - заработало!!! Искала такое очень давно - спасибо вам огромное за подробное разъяснение!
   
 
alert Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Заработок вебмастера
Популярное
» Строительный шаблон smolotkom для DLE 9.4
» KomStroy - Шаблон строительного портала для DLE 9.6
» Шаблон Biznes-Woman для DLE
» Лёгкий новостной шаблон для DLE 9.6
» DLE v.9.4 Оригинал (no nulled) + nulled
» Бизнес шаблон для DLE 9.6
» Игровые шаблоны сайта Zombie-mod (Оригинал) для DLE 9.6
» Строительный шаблон stroy-master для DLE 9.7
» Функциональный Авто шаблон для DLE 9.4
» Шаблон сайта по ремонту коттеджей для DLE 9.6
» Шаблон сайта фильмов для DLE 9.6
» Шаблон интернет-магазина для DLE 9.6