5

Hugo responsive image srcsets

 2 years ago
source link: https://www.mailslurp.com/blog/hugo-responsive-images-srcset/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Hugo responsive image srcsets

How to render picture tag images in Hugo with custom render-image.html layout.

slurpie

What is hugo?

Hugo is a static site generator written in Go. One can write content in markdown and render HTML using simple HTML templates.

What are responsive images?

Responsive images are images on a website that differ based on screen size or device properties. One popular method in HTML5 to serve responsive images is the <picture> tag.

<picture>
    <!-- image source for different format types -->
    <source srcset="/assets/1.png" type="image/png">
    <source srcset="/assets/1.webp" type="image/webp">
    <!-- img tag with fallback src -->
    <img loading="lazy" src="/assets/1.png" alt="My image">
</picture>

In Hugo we can use a custom layout partial to handle rendering of images to include source sets.

How to implement picture tag

Create a custom layout inside your Hugo theme or layouts folder.

/themes/<your-theme>/layouts/_default/_markup/render-image.html

Inside the partial you can access images as they get processed by Hugo when reading your markdown content.

<p class="markdown-image">
    <picture>
        {{ $url := safeURL .Destination }}
        {{ $image_ext := path.Ext $url }}
        <source srcset="{{ $url }}" type='image/{{replace $image_ext "." ""}}'>
        {{ if or (eq $image_ext ".png") (eq $image_ext ".jpg") }}
        {{ $webpDestination := strings.Replace .Destination $image_ext ".webp" }}
        {{ if (fileExists ( printf "/static%s" $webpDestination )) }}
        <source srcset="{{$webpDestination | safeURL }}" type="image/webp">
        {{ end }}
        {{ end }}
        <img loading="lazy" src="{{ $url }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
    </picture>
</p>

The above partial will include webp sources if they exist for png images. You can extend this to include more content types or sizes.

Converting images to webp

Use the webp tool to convert png and jpeg images into webp format.

cwebp assets/1.png -q 70 -o assets/1.webp

Related

Email APIs for developer and QA teams

MailSlurp is the leading email-as-a-service API system. Create unlimited disposable email accounts then send and receive emails from code and tests.

Create free account
App screenshot

What is MailSlurp?

MailSlurp is a free email API service for developers, QA testers and marketing campaigns. You can create disposable test mail accounts using the random email address generator via HTTP, GraphQL, dashboard or official code clients in Javascript, Csharp, Golang, Python, Java, Ruby, PHP and more!

What can MailSlurp do?

MailSlurp offers permanent email addresses using custom domains or random fake emails ending in @mailslurp.com. You can generate as many inboxes as you need for end-to-end email testing, email marketing campaigns and application development.

Getting started

Create a free MailSlurp account to get started using alternatives to MailTrap, Mailinator, Mailosaur and more. MailSlurp is the most advanced email platform with many features including: HTTP webhook push, graphql email APIs, sdks with long-polling (wait for emails), inbox forwarding, complex routing rulesets, and spam filters. See the pricing page for a full overview.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK