Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image helper plugin for responsive images and auto-resizing #498

Open
preaction opened this issue Jun 12, 2016 · 2 comments
Open

Image helper plugin for responsive images and auto-resizing #498

preaction opened this issue Jun 12, 2016 · 2 comments

Comments

@preaction
Copy link
Owner

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.

@AdUser
Copy link

AdUser commented Mar 26, 2017

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>

@preaction
Copy link
Owner Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants