Custom Image Gallery in Apostrophe CMS

Question

What are all the possible sizes for images?

Essentially, how do I get a list of images that have been "attached" to the page? I am trying to create my own image gallery since the default gallery is limited. Does that mean I should create my own widget that extends 'apostrophe-images-widgets'?

So once I do that, and add the widget to a page, and add images, how do I get the list of images? I want to get a thumbnail size, and a larger size of the image to be placed in a modal? What are all the possible sizes available?

Here is the code to show the default image gallery that ships with Apostrophe:

{%- for entry in data.widget._pieces -%}
  {%- set image = entry.item or entry -%}
  {%- set relationship = entry.relationship -%}
  <div data-slideshow-item class="apos-slideshow-item{% if loop.first %} apos-current{% endif %}{% block itemClass %}{% endblock %}" style="background-image: url({{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }})">
    {%- block title -%}
      <h4>{{ image.title }}</h4>
    {%- endblock -%}
    <img data-image src="{% block imgSrc %}{{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }}{% endblock %}"/>

  {%- endfor -%}

Here is the documentation for apostrophe-assets: http://apostrophecms.org/docs/modules/apostrophe-assets/index.html

The documentation notes a few possible sizes, but it feels incomplete. I am not following how to request multiple URLs for multiple sizes of a single asset.

also, please don't flag this. there seems to be a bug with the wysiwyg editor on stack overflow because it refuses to indent my code — Jeff Wilkerson

Tom Boutell Tom Boutell · Accepted Answer · 2017-01-13T15:48:32

I'm the lead developer of Apostrophe at P'unk Avenue.

I think your goal is to change how apostrophe-images-widgets is rendered.

You can do that by creating lib/modules/apostrophe-images-widgets/views/widget.html in your own project (do not modify it inside node_modules, just make a parallel folder in your project).

Copy the widget.html file from Apostrophe's corresponding folder.

Then you can modify it as you see fit.

The available sizes are documented here:

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

Definitely take advantage of the provided utilities to correctly build URLs to them, the same way the stock widget.html does.

Of course, I'm sure you also want to change the player JavaScript. To do that, you'll create:

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

In your project. Copy and paste the original as a starting point. It's very short so I'll quote it here:

// 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);
    };
  }
});

(btw you need to indent four spaces to quote code on Stack Overflow. I recommend doing so in a text editor and then copying and pasting. Works reliably for me.)

This default version invokes our "jquery projector" plug-in to animate a slideshow. You could remove that line in your copy (but keep at least an empty self.play method, so that you override our default implementation). Then there would be no animation at all. Or you can write your own logic.

The $el argument to play is a jQuery object referring to the relevant widget. Always use it to scope things with find(), resist the temptation to do everything with $(...) at the page level.

If you actually like our widget but want different behavior for some cases, you can extend it with a new name (in app.js):

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

Then you would create lib/modules/my-slideshow-widgets, and include my-slideshow in the widgets allowed in some areas and singletons around the site, but otherwise follow the same pattern as above.

Custom Image Gallery in Apostrophe CMS

1 Answers