Hi,
perhaps a newbie question
How to define width and crop of an image within a partial ?
I am using currently the way to display the image with
<img class="fl" alt="{{ .Title }}" src="{{ .URL }}{{ .Params.image }}" />
but no idea so far to apply crop.
Thanks
It’s more of a web design question than a Hugo question, but if you embed it in a container element you can use CSS.
That said, unless you’re going to use the same image in other places with a different crop, you should probably crop the image ahead of time and save the smaller version, then display that full-size. Sending a large image to the browser only to show part of it wastes bandwidth and makes your page slower with no real benefit.
Thanks for the answer.
Let’s assume that I have a cover image (image.jpg) by article and I would like to use this image elsewhere in the site, for example with image-thumb.jpg in a list, image-crop.jpg in the header and the full image somewhere else.
What could be the best way to manage such options with hugo where the name remain the same and only the last part of the name changes (-thumb, or -crop, or anything esle) (having in mind that I create 3 different sizes of the same image) ?
in addition is there any easy way to create automatically the different sizes of the same image ? (I intend to migrate my site and have a lot of articles to manage).
AFAIK Hugo doesn’t contain any provisions for image editing, but there is no reason you can’t provide a few images. How exactly to set it up depends on your site, but maybe just put a base name in the front matter, then do something like <img src="{{ .Site.BaseURL }}/images/{{ .Params.imageBaseName }}-thumb.jpg"/> to use the thumbnail, and similar snippets for the others.
You can automate pretty much any image processing with ImageMagick’s CLI and a quick shell script.
Thank for the first part of the answer. For the time being, I am not able to deal with your advise on processing with ImageMagick’s CLI since my skills are very limited.But I will continue to learn.
If I may for the first advise, how to deal with any file extension (ie. jpg or png) and also having a fallback process in order to use the primary image if the -thumb or -crop doesn’t exist.
4 Likes
Great !!
looking forward to using it (if I can !)
1 Like