Skip to content

Instantly share code, notes, and snippets.

@damien1

damien1/cld-response.html

Last active August 10, 2021 17:30
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save damien1/573a4621f5e1e0436e5157a17731b5ed to your computer and use it in GitHub Desktop.
Save damien1/573a4621f5e1e0436e5157a17731b5ed to your computer and use it in GitHub Desktop.
Download ZIP
Hugo shortcode responsive image using Cloudinary - how to use see https://bit.ly/2YYrjRd
Raw
cld-response.html
<!-- for how to use visit https://bit.ly/2YYrjRd -->
{{ $image := .Get 0 }}
{{ $alt := .Get 1 }}
{{ $width := .Get 2 | default "w_auto" }}
{{ $style := .Get 3 | default "width:90%" }}
<img alt="{{ $alt }}" title="{{ $alt }}" data-src="{{ $.Site.Params.cloudinary_base_url }}/{{ $width }},c_scale,f_auto,q_auto,dpr_auto{{ $image}}" class="cld-responsive border" style="{{ $style }}">
@damien1
Copy link
Author

damien1 commented Jun 21, 2020 •
edited

Before using this ...

You need to have:

  1. setup a Cloudinary account with Hugo
  2. already modified your theme to serve dynamic images
  3. finally ... use the shortcode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment