Possibility to get list of images from content?

Themes
1

Hello, and thank you for the Ghost!

I want to create custom template, which will be some kind of Image Gallery, with simple Image Slider like Galleria

Is there possibility to iterate through content for images to create list of those? Or the only way is to make it on client side out of rendered html?

Thanks!

2

Hey @ars :wave:

Right now you have two options:

  1. Upload the images as normal then convert them to <img> tags in the editor and create a HTML section in the markdown that has the structure that Galleria expects
  2. Do everything client-side. You might be able to wrap the group of markdown images in a <div class="galleria"> wrapper (be sure to leave a blank line before/after any HTML) so that they are more easily targetable

In the future it will be possible to use a “gallery card” in the new Koenig editor to do this sort of thing much more easily.

1 Like
3

I’m trying to do this as well… however, I just can’t seem to make it work properly. In the default theme, I’ve added that div on different places (in post.hbs, page.hbs and even in default.hbs and index.hbs, just to test if I can get anything), but it’s never rendered… - Actually whatever I add, it’s not rendered.

I should check the gallery card of koenig as well, although I expect that flickr integration isn’t there…

4

I was talking about adding the <div> around the images in your post content, not your theme. If you’re making theme changes, ensure you’re using the theme uploader in the admin area or restarting your ghost instance after modifying any theme files so that changes are picked up.

There is no gallery card in Koenig yet, I was talking about future potential where you could create/add your own gallery cards that match your requirements by having Flickr integration for example.

5

oh, right… got it. Well, I’d like to avoid to add the div and script every time again. The only thing that changes is the flickr set id. That’s why I want to add it to the theme.

About updating the theme: things seem to work. There’s one thing I still wonder: in my theme, I have:

	(function() { 
		if (Galleria) {
			console.log("starting Galleria");
		    Galleria.loadTheme('{{asset "galleria/themes/classic/galleria.classic.min.js"}}');
			Galleria.run('.galleria', {
				flickr: 'set:72157632258325145',
				flickrOptions: {
					sort: 'date-posted-asc'
				}
			});	
			console.log("Galleria started");
		};
	}());

This is fine, except that I’d like to set the set dynamically, i.e. somewhere in the story itself… I know there’s some thing to add code (post footer and header), but I’m not sure how exactly to make it work properly…

6

oh… got it, can just define a variable in the post header. Nice.