Opimal image workflow

support
1

Hi guys, I searched a lot, but I’m not smarter than before and so I decided to ask you directly. Hope that’s okay.

I’m new to hugo and I’m wondering what is your current image workflow regarding how to produce the responsive versions? Do you let hugo do it or do you do it before introducing them to hugo?

I can handle shortcodes and that stuff in order to integrate the responsive version but I do not really understand where to put my images and how to get (automatically) the different responsive versions of ONE image.

Thanks.

2

If i’m using Hugo image processing then i’d go with Page Bundles or create specific folder inside content directory for the image,

the alternative is you can use CDN for the image like Cloudinary who offer instant image manipulation. this method can make the repo neater without being filled with images

3

@Yudy_Ananda: That’s what I intend to do to. But I do not understand exactly how. Would you mind elaborating your solution a bit more detailed?

4

@paperclip you can try my workaround

1. Create Content Directory For The Images

  • Go to your content directory and create uploads folder
  • Treat the uploads folder as headless bundle by creating _index.md with headless: true as the front matter
  • put your image inside the uploads

2. Hugo Image Processing and srcset

From now on you can use $.Site.GetPage to get the image from the uploads directory (both from front matter and shortcode) the use image processing to have responsive image with the sizes you need and combine it with srcset.

for example let say you have front matter in your content called featured_image

featured_image: "foo.jpg" # your image from uploads directory

code somewhere inside your template for the content above

{{ with .Params.featured_image }}
	{{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
	{{ $desktop := $imageResource.Fill "900x499 Center" }} 
	{{ $tablet := $imageResource.Fill "726x402 Center" }}
	{{ $mobile := $imageResource.Fill "458x254 Center" }}
        # here you can use the $desktop $tablet and $mobile inside your image element using srcset
       <img
            srcset="
		    {{ $mobile.RelPermalink }} 458w,
	            {{ $tablet.RelPermalink }} 726w,
		    {{ $desktop.RelPermalink }} 900w
	            "
           sizes="
		   (max-width: 600px) 458px,
		   (max-width: 769px) 726px,
		   (max-width: 1408px) 900px,
		  100vw
                  "
       >
{{ end }}

from the sample above there is 3 different size, in your case you can add or use less as needed

if you want to search there’s some good thread in this forum that you can use for another option and reference

sorry for my english

2 Likes
5

@Yudy_Ananda I worked a lot but I couldn’t really solve it. What I’m still not able to do is

  • actually GET the Picture from /upload/ to my post-directory and
  • process the pictures into three different sizes while copying the picture to my post-directory.

I’m only successful when I place my post-directory in the first place.

Let’s say I want to do it via shortcode and image is called sample.jpg. What would be the code of my shortcode?

6

Hi there,

What the “optimal” workflow is will really depend on your specific use case. Everyone may have different considerations to take into account.

If you are asking for specific code help, I would suggest that you read Requesting Help and perhaps create a sample project to show what is working, what is not working, what you have tried to do.