5/26/2023 0 Comments Image responsive resize![]() ![]() You’ll get to see several variations of the responsive image technique discussed in this tutorial, but the foundational concept is the same: Using CSS, give images a percentage-length unit (or any relative-length unit, e.g. It will, however, require that the web design’s layout is a fluid/responsive layout. In contrast, the method covered in this tutorial is simple and relies only on the CSS width and height properties, which means the method will work on virtually all browsers and devices. There are many responsive image techniques, and they vary in complexity and level of browser support.Īn example of a complicated way of implementing responsive images is using the srcset attribute, which requires multiple images, more markup, and the reliance on a new HTML attribute that’s not well-supported outside of modern browsers. In this tutorial, you will learn the simplest technique to learn how to make images responsive. With the infinite types of screen displays and sizes, it’s essential that you have responsive images. You can always view the full source code for my site over on Github.What are responsive images? These types of images change in size to adapt to different screen sizes, like on a desktop, tablet or different cell phones. While this seems like a lot of work, this is another case of taking some time up front to save you the time down the road. I’ve included the library as a script in my build process then it’s just a single line to implement: const myLazyLoad = new lazyLoad() įor more on using the library, head over and check out the documentation. ![]() I needed something that also worked with responsive images - and Andrea Verlicchi’s Vanilla Lazyload library does this well. Lazyloading has been around for awhile, and there’s a large number of libraries that have matured over the years. ![]() And if the user isn’t actually going to scroll through all of your images, having them load them all can be a bit of a waste. On pages with a large number of images, having users load every image at once can really slow down the user’s experience. 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 Comments
Leave a Reply. |