Dynamic image resizing via shortcodes (roadmap)

feature
1

Hello,

I’m looking for the simplest way to get responsive images in Hugo-powered sites…By taking look at the thread I see that it works with e.g. Hyde theme, but I wonder if there was some work submmited to make it work via shortcodes as announced in the Hugo’s roadmap list?

1 Like
2
  1. The responsiveness you see in Hyde, I think is best solved in CSS - and not a shortcode
  2. There are, however, many good reasons to do “server side” scaling of these images, and send the small version to the mobile and the big to the desktop etc. This could be a good match for a special shortcode. Do not think anyone is working on that one, but I read in this thread about a “thumbnail pipeline”: https://github.com/spf13/hugo/issues/147
3

Let’s think about a scenario with a content editor and a web developer.

Assume we have content files in the following style. There is a content editor that creates such files for all his trips (possibly in a nice web-based editor in the future):

+++
title = "My Trip to Paris"
date = "2015-03-18"
gallery = ["image1.jpg", "image2.jpg", "image3.jpg"]
+++

Have fun looking at my images of Paris.

![Map](map.jpg)

The question is: Where is the right place to put information about the size of those images?

I would argue that the size of the gallery images should not be in the content files. They should be in the template. This way the web developer/designer decides about the resizing and cropping of the image. An example how this can be done are the imageSize and imageCrop functions in Webhook.

The size of map.jpg could be defined via a shortcode in the content itself. This is a size the content editor must decide.

I think that in the end we might need the functionality to define image sizes both in the content via shortcodes and also in the templates via functions (for me templates would be even more important). Ideally it would cover both image resizing and image cropping.

1 Like
4

I think there are instances where both would want to be able to control the size.

In your example I’d agree that the gallery should be controlled by the designer, but the map (inline content) should be controlled by the content creator.

I do think shortcodes could work well here, but it could also work in a different (simplier) way.

What if instead of ![Map](map.jpg) or gallery = ["image1.jpg", "image2.jpg", "image3.jpg"]

The editor refered to these same files as ![Map](map.200x400.jpg) or gallery = ["image1.50%.jpg", "image2.600x600.jpg", "image3.480.jpg"]

It’s a bit of a hack and it’s just an idea (we don’t have any interface for this yet), but I like it.

I think it would be pretty powerful and it could work well in content and meta-data.

The idea is that three formats would be supported (though there’s probably more).

  • Percent (int + “%”)
  • Resize and crop if needed (H int “x” W int)
  • Resize (int)

For the resize one the int would likely represent the longest size.

Thoughts?

5

Yes, I like your version which is much simpler than shortcodes.

There are quite a lot of transformations that could be done with images. A long list can be found in the Cloudinary Image Transformation docs.

However, I think the basics like you describe would suffice for most use cases. There are only two things for me to add:

  • There should be a crop switch. Otherwise, if you say map.200x400.jpg it’s not clear if it needs to be resized to 200x400 or cropped to that size.
  • There should be a way to say: height=200 and I don’t care about the width.

I don’t know about the syntax, just some ideas:

Syntax 1

  • Size: image.s200.jpg (200 is longest dimension)
  • Width: image.w200.jpg
  • Height: image.h300.jpg
  • Width and Height: image.w200-h300.jpg
  • Size with Cropping: image.s200-c.jpg
  • Width and Height with Cropping: image.w200-h300-c.jpg

(this is somewhat similar to what Google App Engine implemented but did not document. I stumbled upon it by accident and added it in this issue comment. You can play around with the example link to bananas…)

Syntax 2

Similar as above but with query parameters:

  • image.jpg?w=200&h=300&c=true

Syntax 3

Yet another option:

  • image.jpg?w200-h300-c
6

I tested a couple (read 2) image resize libs for Go some time ago, landed on this one:

7

Issue for this Feature

I’ve created issue 1014 to track this feature.

1 Like
8

hi there I have a custom shortcode for responsive images here

9

You mean this code from your repository?

<img src="{{ .Get "src" }}" style='width:100%;' border="0" alt="Null">

That’s not really the kind of responsive images that this topic and its feature request is about. That’s not to say it doesn’t work, but it doesn’t ‘fix’ this thread’s topic.