Having to retype or copy/paste all of the code for a responsive image can be quite tedious and error-prone, so automation is key. So, in short, using Hugo shortcodes turns our simple, one-line image code into a complex, responsive image. The 3rd element - the img element - is just for IE, as IE doesn’t support the picture element properly - so the normal image should just show. We’ll get to that in the next section about lazy loading. You’ll notice that our shortcode doesn’t actually supply a src or srcset parameter though - which is what actually outputs the image.
Within each source, we’re also supplying both a retina version and standard resolution to ensure that our images look crisp when needed. We are supplying 2 sources - one for smaller devices and one for other devices. Now, we’re using the picture element to actually display the image itself.
Get "parameter-name" gets the value of a parameter supplied by the shortcode call. If we supply a caption parameter in our shortcode, we’re going to use the figure element to group the image along with the related caption (using the figcaption element). Let’s walk through what’s happening in the shortcode itself. In this example, I’m using a blank alt text as I’m supplying a caption instead - there’s no reason to duplicate content. I’m using a shortcode that I’ve named img along with a number of parameters - the path of the image, the type of image, alt text, and a caption. This is a custom shortcode, so all of the naming and parameters are arbitrary - this isn’t a default Hugo feature. We’ll start off with the call to the shortcode - this is what I throw in my markdown posts. The documentation on using shortcodes in Hugo is quite thorough, but we’ll go through the shortcode that I’m using in some detail.įirst, let’s take a look at the whole thing: Using shortcodes to display dynamic images I talk about my build process using gulp here. Use shortcodes to display images in a responsive manner.So, in my new site, there were a few things that I could do to help automate things. Of course, making them easy to add to my site is always important. In line with my priorities, I wanted to make sure that when I am displaying images, I’m doing them as in a way that combines quality with performance. However, it’s hard to have a photography section without images. My current priority here is content and performance. I don’t have a lot of imagery on my site.
0 kommentar(er)
