Автор Тема: Clipper 1.2.7. Как автоматически генерировать иконки для фото галерей  (Прочитано 2839 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Оригинальный пост на английском (на форуме ClipperCMS):
http://www.clippercms.com/forum/viewtopic.php?pid=1442#p1442

Ниже - мой вольный перевод.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Вопрос (автор nicko, участник форума ClipperCMS)

Я использую Clipper 1.2.7.  Как автоматически генерировать иконки для фото галерей?

В Ево я использовал MultiImages, который работает на MooTools, и поэтому не работает в Клиппере. В нем имеется шаблон оболочки и шаблон строки, которые могут быть соответственно настроены.

Сейчас в Ево 1.0.10+ я использую MultiTV для галереи, и phpThumb сниппет, который идет со стандартной инсталляцией, для создания иконок. MultiTV имеет шаблон оболочки и шаблон строки, которые могут быть соответственно настроены.

Использование MultiTV (или MultiImages) для фотогалерей привлекательно, поскольку можно прикрепить этот TV к шаблону  и легко делать галереи с многими фото по всему сайту.

Это пример кода phpThumb в MultiTV шаблоне строки:

<img src="[[phpthumb? &input=`[+image+]` &options=`w=400,h=300,q=90,zc=1,far=C`]]" />

Как сделать нечто подобное в Клиппере? Я пытался использовать сниппет phpThumb от Ево в Clipper 1.2.7, но возникает ошибка парсера.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Ответ (автор cipa, разработчик)

Я не использовал MultiTV в последнее время, но думаю, он должен быть совместим с ClipperCMS. Что касается phpThumb, думаю, он должен работать с Клиппером. Просто проинталлируйте его таким же образом, как Вы делаете это в Ево.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Ответ (автор cipa, разработчик)

По инструкции ниже, я установил phpThumb в Клиппере, и кажется он работает, как и ожидалось.

1. Скопируйте папку сниппета phpThumb из Ево в Клиппер.
2. Установите сниппет в менеджере.
3. Создайте папку images внутри папки cache и сделайте обе их доступными на запись.

Я протестировал это таким образом:

<img src="[[phpthumb? &amp;input=`assets/images/recipes/300px-Baked_aubergines_with_tomatoes_and_Parmesan_recipe.jpg` &amp;options=`w=40,h=30,q=90,zc=1,far=C`]]" alt="" />
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Сообщение (автор nicko, участник форума ClipperCMS)

Спасибо за ясные инструкции как установить phpThumb от Ево в Клиппере (я забыл папку сниппета phpThumb, а также я не создавал папку images внутри папки cache).

Благодаря Вашим инструкциям, иконки генерируются автоматически в MultiTV галерее.

ps. This upgraded forum is really nice - обновление форума Клиппера с SMF на FluxBB реально нравится.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
Дополнение. Перевод будет позже. А пока - оперативно, если кому понадобится. Источник:
http://www.clippercms.com/forum/viewtopic.php?pid=1452#p1452

There is also a responsive solution which I didn't have time to write about. You can download it from here:
http://www.jertix.org/assets/files/mix/advthumbs.zip

microcipcip. The first time you run the page the snippet will generate a cache file inside assets/snippets/advthumbs. If you update the image it will generate the img again. Simple usage would be like this:
<img
    src="
        [!advthumbs?
            &filename=`[*img1*]`
            &newxsize=`200`
            &newysize=`200`
            &method=`resizecrop`
        !]"
        alt="[*pagetitle*]"
/>

Responsive usage like this:
<img
    [!advthumbs?
        &filename=`[*img1*]`
        &newxsize=`40`
        &newysize=`12`
        &method=`resizeblack`
        &responsive=`100x30,220x66,320x96,480x144,800x240,1100x330,1400x420`
    !]
    alt="[*pagetitle*]"
/>

Note this second solution, the snippet is OUTSIDE the src. The reason is that in this way advthumbs can generate the following output:
<img
    src="assets/snippets/advthumbs/cache/slideshow/img1.rc40x12.jpg?t=1392973125"
    data-image-100="assets/snippets/advthumbs/cache/slideshow/img1.rc100x30.jpg?t=1392973125"
    data-image-220="assets/snippets/advthumbs/cache/slideshow/img1.rc220x66.jpg?t=1392973125"
    data-image-320="assets/snippets/advthumbs/cache/slideshow/img1.rc320x96.jpg?t=1392973125"
    data-image-480="assets/snippets/advthumbs/cache/slideshow/img1.rc480x144.jpg?t=1392973125"
    data-image-800="assets/snippets/advthumbs/cache/slideshow/img1.rc800x240.jpg?t=1392973125"
    data-image-1100="assets/snippets/advthumbs/cache/slideshow/img1.rc1100x330.jpg?t=1392973125"
    data-image-1400="assets/snippets/advthumbs/cache/slideshow/img1.rc1400x420.jpg?t=1392973125"
    alt="Img al text here"
/>

Now you can implement a responsive technique, for example, with response.js:
http://responsejs.com/
Response.create({
    prop: "width",  // "width" "device-width" "height" "device-height" or "device-pixel-ratio"
    prefix: "image-",  // the prefix(es) for your data attributes (aliases are optional)
    breakpoints: [1400,1100,800,480,320,220,100,0], // min breakpoints (defaults for width/device-width)
    lazy: true, // optional param - data attr contents lazyload rather than whole page at once
    verge: 600
});

Note: the img and snippet call is usually in one line, I have moved it to several lines to readibility. I didn't test this, it is better to put all in one line.
« Последнее редактирование: 08 Апрель 2014, 16:09:15 от sadex13 »
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
nicko. Thanks microcipcip, that looks really interesting.

I use css to make the thumbnails responsive in the frontend, but that serves up the same image regardless of the screen size. I can see the benefit with large images with your approach to save on some bandwidth on mobile devices.

Is there any documentation on advthumbs? Just wondering if you can enter a ratio instead of pixel dimensions in the simple call.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.

Оффлайн sadex13

  • Модератор
  • Разработчик
  • *****
  • Сообщений: 1097
    • Просмотр профиля
  • Версия modx: Evo 1.0.6, ClipperCMS 1.2.6
microcipcip. You can't specify a ratio. All the examples are documented inside the snippet. See here the tutorial of advthumbs (note: this tut doesn't include the responsive version, because it was added later).

Also, be careful, call the snippet always uncached. In the old version this wasn't necessary, but now it is mandatory to do so, otherwise the snippet wouldn't know if the image has been changed and the cache for the new image wouldn't be generated.
FluxBB (PHP/MySQL) - легкий и быстрый форум для MODX с открытым кодом, минимальные требования к ресурсам.