UPD: updated version is here
Demo is here. Source code is here.
Resize depending on the viewport
We don't need much to build a basic r...
For further actions, you may consider blocking this person and/or reporting abuse
Updated version stereobooster.com/posts/hugo-ideal...
When running your shortcode, I get the following errors. It seems 'Resize' is not recognized?
dev.to has magical SEO
it is third and fourth rows
Good Day.
So, this is working fine with the update of
{{ .Get $medium }}to{{ .Get (print $medium) }}since Hugo 0.59+.I'm having an issue where the svg shows a bit, because it has a larger Height value, even though the source is the same. Notice at the bottom of the full res image, you'll see the fuzzy svg placeholder.
Any suggestions?
Here's the generated code from "view page source"
@stereobooster why does only the no-js fallback include the
sizesattribute? I know compared to Laura's solution you're including the JS fallback but I wasn't sure why the attribute is only present there. I also saw yourelseis blank so it's not falling back to your default noted in the comments.I was looking for something like this. Thanks for sharing.
I can't use shortcodes inside theme files, as the result I copy-pasted code from shortcode to theme files ๐.
Can you share an example of how you implement this in a theme file?
Great post!
The good part is that Markdown Render Hooks were added in v0.62 ๐
I got an error using the code above:
Upon searching for this error I found a recommendation (which is what @dmayo2 below has mentioned, but without listing the error) in the Hugo support form to change:
{{ if .Get $medium }}to:
{{ if .Get (print $medium) }}I don't understand why this is happening but it works and reflects Laura Kalbag's solution.
I created the image sizes as follows,
add_image_size( 'size-260', 260, 0, false ); //260px Original
add_image_size( 'size-260-landscape', 260, (int) round( 260 * 0.7 ), true ); //260px Landscape
add_image_size( 'size-260-portrait', 260, (int) round( 260 / 0.75 ), true ); //260px Portrait
add_image_size( 'size-260-square', 260, 260, true ); //260px Square
How do I replace 'src' with lqip, depending on where these dimensions are used?
add_image_size( 'size-lqip-20', 20, 0, false ); //LQIP Original
add_image_size( 'size-lqip-20-landscape', 20, (int) round( 20 * 0.7 ), true ); //LQIP Landscape
add_image_size( 'size-lqip-20-portrait', 20, (int) round( 20 / 0.75 ), true ); //LQIP Portrait
add_image_size( 'size-lqip-20-square', 20, 20, true ); //LQIP Square
I didn't understand your question
I wrote a small script to lazy-load my images gist.github.com/bgadrian/68ec61ed9...
Responsiveness will be a nice addition.
I'm not sure that it is lazy-loading. It is more like delayed loading - you load all images on the page, but postpone download till DOM load event. Where is lazy-loading will postpone download of images until they get in viewport. Maybe different terminology
ยฏ\_(ใ)_/ยฏWhat is hugo?
Static website generator, like Jekyll but built with Go. gohugo.io/
Excellent write up. I wrote a srcset shortcode but have been relying on externally generating the different image sizes till now. Maybe it's time to let Hugo handle the image work instead.