Галерея пользовательских изображений в Apostrophe CMS

Question

Каковы все возможные размеры изображений?

По существу, как мне получить список изображений, которые были «прикреплены» к странице? Я пытаюсь создать свою собственную галерею изображений, так как галерея по умолчанию ограничена. Означает ли это, что я должен создать свой собственный виджет, который расширяет «apostrophe-images-widgets»?

Итак, как только я это сделаю, добавьте виджет на страницу и добавьте изображения, как мне получить список изображений? Я хочу получить размер эскиза и увеличить размер изображения, который будет помещен в модальный? Каковы все возможные размеры?

Вот код, чтобы показать галерею изображений по умолчанию, который поставляется с Апострофом: ` {% - для входа в data.widget._pieces -%} {% - набор изображений = entry.item или записи -% } { % - установить зависимость = entry.relationship -%} { % - заголовок блока -%} {{image.title}} {% - концевым блоком -%}

 {%- endfor -%} 

` Здесь документация для апротрофных активов: http://apostrophecms.org/docs/modules/apostrophe-assets/index.html

В документации указаны несколько возможных размеров, но это кажется неполным. Я не следую тому, как запрашивать несколько URL-адресов для нескольких размеров одного актива.

Answer 1

Я ведущий разработчик Apostrophe на P'unk Avenue.

Я думаю, что ваша цель - изменить способ визуализации apostrophe-images-widgets.

Вы можете сделать это путем создания lib/modules/apostrophe-images-widgets/views/widget.html в собственном проекте (не изменять его в node_modules, просто сделать параллельную папку в вашем проекте).

Скопируйте файл widget.html из соответствующей папки Apostrophe.

Тогда вы можете изменить его, как видите.

Доступных размеры описаны здесь:

http://apostrophecms.org/docs/tutorials/getting-started/adding-editable-content-to-pages.html#code-size-code

Определенно воспользоваться предоставляемыми коммунальными услугами, чтобы правильно построить URL-адрес для них, так же, как фондовый widget.html делает.

Конечно, вы также хотите изменить плеер JavaScript. Чтобы сделать это, вы будете создавать:

lib/modules/apostrophe-images-widgets/public/js/always.js

В вашем проекте. Скопируйте и вставьте оригинал в качестве отправной точки. Это очень короткий, поэтому я процитирую его здесь:..

// example of a widget manager with a play method. 
// You don't need this file at all if you 
// don't need a player. 

apos.define('apostrophe-images-widgets', { 
    extend: 'apostrophe-pieces-widgets', 
    construct: function(self, options) { 
    self.play = function($widget, data, options) { 
     $widget.projector(options); 
    }; 
    } 
}); 

(кстати вам нужно сделать отступ в четыре пробела процитировать кода на переполнение стека я рекомендую делать это в текстовом редакторе, а затем копирования и вставки работает надежно для me.)

Эта версия по умолчанию вызывает подключаемый модуль «jquery projector» для анимации слайд-шоу.Вы можете удалить эту строку в своей копии (но сохраните хотя бы пустой метод self.play, чтобы вы переопределили нашу реализацию по умолчанию). Тогда анимации вообще не будет. Или вы можете написать свою собственную логику.

Аргумент $el для play является объектом jQuery, относящимся к соответствующему виджету. Всегда используйте его для охвата вещей с помощью find(), сопротивляйтесь соблазну делать все с $(...) на уровне страницы.

Если вы на самом деле нравится наш виджет, но хотите другое поведение некоторых случаях, вы можете расширить его с новым именем (в app.js):

modules: { 
    'my-slideshow-widgets': { 
    extend: 'apostrophe-images-widgets' 
    } 
} 

Тогда вы можете создать lib/modules/my-slideshow-widgets, и включают в себя my-slideshow в виджеты разрешены в некоторых областях и одиночных сайтах вокруг сайта, но в противном случае следуют тем же шаблонам, что и выше.

Смотрите также:

http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html

Для действительно хорошее введение в создание полностью настраиваемых виджетов.