Николай Ланец
11 нояб. 2014 г., 7:35

Абсолютные ссылки без примесей ресайзнутых картинок

Наверняка много кто пользуется компонентами типа phpThumbof. Компонент действительно очень удобный, но имеет несколько минусов: 1. Формируемые пути к картинкам имеют всякие примеси (типа md5-хеша пути к файлу, параметров всяких и т.п.). 2. При изменении каких-либо параметров модификации изображения, меняются и формируемые ссылки на картинки, что как бы убивает генерируемые картинки. А это почти неизбежно при смене дизайна сайта (как один из вариантов).
Самое плохое в этом — плохое отношение поисковиков к таким картинкам. Вот буквально вчера выяснилось, что на одном сайте целый раздел с большим количеством картинок не проиндексирован вообще, и это при том, что разделу несколько месяцев. Причем другие картинки, которые имеют абсолютные пути (о чем и пойдет речь в этом топике), проиндексированы, то есть речи о том, что сайт не индексируется в принципе нет.
Итак, задача: формировать пути на картинки таким образом, чтобы они были как бы абсолютные, и при изменении любых параметров ресайзинга (или даже компонента, выполняющего эту функцию), пути никогда не менялись бы.
В этом нам поможет .htaccess с функцией подмены УРЛов. Если у вас не используется Apache, то вам нужно будет прописать правила подмены для своей версии веб-сервера.
У меня вот такие правила прописаны:
RewriteEngine On RewriteBase / # Картинки RewriteRule ^images/resized/big/(.*)$ assets/components/gallery/connector.php?action=web/phpthumb&w=1200&h=800&zc=0&far=0&q=100&src=$1 RewriteRule ^images/resized/thumb/(.*)$ assets/components/gallery/connector.php?action=web/phpthumb&w=150&h=150&zc=1&far=0&q=100&src=$1
То есть когда на сервер выполняется запрос в разделы images/resized/big/ или images/resized/thumb/, то УРЛы обрабатываются, подменяются, и запрос фактически отправляется на коннектор компонента Gallery (да, в нашем случае необходимо установить компонент Gallery, но если вы используете для таких целей какой-то другой ресайзер, можете его использовать). На самом деле мне не очень понравилась идея использовать Gallery для этого, так как в MODX-е ведь есть родной коннектор для этого, и можно его использовать, передав в него параметром ctx имя контекста, к которому пользователи имеют доступ (по умолчанию web). Имейте ввиду, что если у пользователя не будет доступа к этому контексту, то ему будет возвращено 401 (ориентируйтесь особенно на анонимов). Вот такая строчка получилась:
RewriteRule ^images/resized/thumb/(.*)$ connectors/system/phpthumb.php?&ctx=web&w=150&h=150&zc=1&far=0&q=100&src=$1
Ну а далее уже дело техники: в шаблоне набиваете картинки, подставляя префиксом свой фейк-путь. У меня это вот так выглядит:
<ul class="gallery"> {foreach $object.gallery as $gal_item} {$image = $gal_item.image} <a class="highslide thumb" href="images/resized/big{$image}" rel="prettyPhoto[_company{$object.id}_]"> <img src="images/resized/thumb{$image}" title="{$gal_item.title}" alt="{$gal_item.title}"> </a> {/foreach} </ul>
Как делать выборки из Gallery, я писал совсем недавно. А если вы используете MIGX или типа того для хранения своих галерей в TV-шке, вот так у меня выглядит расширенный getdata-процессор, который сразу набивает эти данные в массив документа.
И еще момент: я использую prettyPhoto, и чтобы каждый раз его с собой не тянуть и вообще особо не заморачиваться с его подключением, я использую компонент DirectResize (у него сразу три галерейки в комплекте идет). Правда его тут есть такой момент, что он подключает JS-ы только если находит в документе картинки, которые будет ресайзить, поэтому чтобы JS-ы подключались всегда, я создаю копию оригинального плагина, в нем делаю мелкую правку, а оригинальный деактивирую.
Пример работы всего этого можно увидеть здесь: http://gorodskie-bani.ru/. И вот такие пути к картинкам формируются: gorodskie-bani.ru/images/resized/thumb/assets/images/companies/1275-sokolinaya-gora/1%20%281%29.jpg gorodskie-bani.ru/images/resized/big/assets/images/companies/1275-sokolinaya-gora/1%20%281%29.jpg
Как долго я искал это решение! Очень благодарен! Пошел испытывать
Отпишитесь по результатам :)
Доброе время суток) Долго я мучался, но нашел выход и в своей ситуации. Но в моем случае все оказалось гораздо проще. Мне не нравились примеси в имени файлов в Галерее изображений. Она у меня на основе компонента Gallery 1.6.2. Для отображения читаемого адреса достаточно сменить [[+image]] на [[+image_absolute]] в чанке оформления миниатюры. У меня это выглядит так
<li><a href="[[+image_absolute]]" class="fancybox" rel="external"> <img src="[[+thumbnail]]" alt="[[+description]]" title="[[+description]]" /></a> <div class="description"> [[+description]]</div> </li>
достаточно сменить [[+image]] на [[+image_absolute]]
Это исходная картинка, не ресайзнутая. Если вы зальете 100мегапиксельную картинку, то вам и будет она выведена. В этом огромная разница.
В моем случае они ресайзаются самой Галереей по заранее созданным настройкам
&thumbWidth=`250` &thumbHeight=`194` &thumbProperties=`{"f":"jpg","q":"50%"}` &thumbTpl=`GalItemThumb`
Я не спорю — может я пишу совсем о другом. Просто больше трех месяцев я периодически натыкался на эту проблему, и самое главное никто не мог рассказать как исправить. Я задавал этот вопрос на нескольких форумах, и все без толку. Потому и пишу — может кому нибудь поможет)
Дайте ссылку на сайт, где выводятся эти самбы.
Так и где у вас там ресайзинг? Вот смотрим галерею: stavmaster.com/galereya
<ul class="galleries"> <li> <a class="fancybox" rel="external" href="/assets/gallery/30/624.jpg"> <img title="" alt="" src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=250&h=194&zc=1&far=C&q=50%25&f=jpg&src=%2Fassets%2Fgallery%2F30%2F624.jpg"> </a> <div class="description"> </div> </li>
В ней ссылка идет на исходную картинку, как она есть: /assets/gallery/30/624.jpg А самбы с примесями: /assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=250&h=194&zc=1&far=C&q=50%25&f=jpg&src=%2Fassets%2Fgallery%2F30%2F624.jpg И где же решение озвученной проблемы?
О как) вот что значит обрадовался! Увидел короткий адрес при наведении мыши на картинку — и думал что проблема решена((
Именно. И в этом топике как раз и описывается как это решается.
Подскажите, пожалуйста, как использовать?
connectors/system/phpthumb.php
Точнее как открыть доступ чтоб ананомы могли генерировать изображения?
Вообще процессоры никто не открывает. Для вызова процессоров создаются коннекторы. Для connectors/system/phpthumb.php тоже есть коннектор connectors/system/phpthumb.php но он закрыт для доступа неавторизованных пользователей. Чтобы доступ открыть, создайте свой коннектор и из него уже вызывайте этот коннектор, но перед вызовом пропишите
define('MODX_REQP', false);
Это отключит проверку конкретно при вызове данного коннектора.

Пример вызова: /connectors/system/phpthumb.php?src=assets/images/lazy/2ca4cdfbc2724655d6ca1edfad86b70a.jpg&w=300
спасибо за совет

Добавить комментарий