Image helper plugin for responsive images and auto-resizing
We need an Image helper plugin (Statocles::Plugin::Image) that will allow us to embed responsive images, converting them to the correct sizes and compressions. I should be able to simply take a photo from my camera, place it in my site, and then use the image helper to create a set of responsive resolutions for the image and a link to the full-resolution image.
We should be able to configure the plugin for the default settings, and override those defaults using helper parameters. We could allow multiple image configurations, so we could recall them. Certain images could get thumbnails, others could be full-size. Some could be clickable, others not. There are a lot of options here, and we'll need to make this simple.
This is a replacement for #191. This requires #437.
Also needed something like "::Plugin::Gallery". This task is almost unspeakable in markdown without writing html by hand. How it may works:
---
title: sample
images:
- file: photo1.jpg
desc: foo
- file: photo2.jpg
desc: bar
---
<...>
%= gallery {thumbsize => "300x300", tilte => "Photos", align => "center"}
The following code should produce something like this:
<div class="gallery" style="text-align: center">
<h3>Photos</h3>
<a class="item" href="photo1.jpg"><img class="thumb" title="foo" src="photo1_tn.jpg"></a>
<a class="item" href="photo2.jpg"><img class="thumb" title="bar" src="photo2_tn.jpg"></a>
</div>
This ticket is for a more generic thing to help with adding one or two images to a blog post or page content which is aware of the new srcset attribute and can efficiently build good image sizes for different devices.
You could use it to make a gallery with a loop, like:
---
title: sample
images:
photos:
- file: photo1.jpg
title: foo
sizes:
0px: 400
400px: 800
1200px: default
- file: photo2.jpg
title: bar
---
<h3>Photos</h3>
<div class="text-align: center">
% for my $img ( $self->images( 'photos' ) ) {
%# Build an image that shows the 300px version with min-width 399px, 900px with min-width 400px, max-width 1199px and the 900px version above 1200px
%# This overrides sizes set in the image metadata, above
%# And overrides default sizes set in the Image plugin configuration
%= image $img, sizes => { 0px => 300, 400px => 600, 1200px => 900 };
%# Build an image with a thumbnail of 150px that clicks to see the given version
%# "thumb" can never be a default
%= image $img, thumb => 150, sizes => { 0px => 300, 400px => 600, 1200px => 900 };
% }
</div>
I think a gallery of images would be better-developed as an application. Like a Statocles::App::Gallery which could scan directories for images, read an index.markdown or <photo>.markdown for image metadata, and build index pages from a template (and I'd be more than happy to accept such a contribution). The main reason for making it as an application instead of a plugin is that applications and the full frontmatter allow more flexibility in displaying the content (plugins, templates) and as to which template is being used (something a plugin handles very poorly).
I expect the Gallery app and the Image plugin would share a lot of code between them, which would be good to put in Statocles::Image.