Skip to content

arranf/responsive-image-to-hugo-shortcode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Upload Responsive Images for Hugo

Summary

This is the third iteration of my efforts to make working with responsive images in Hugo easier.

This program:

  1. Takes an image (or directory of images) as input
  2. Converts each input image to .webp (whilst preserving its orientation).
  3. Creates resized versions of each input image suitable for different screen sizes.
  4. Uploads all image versions to S3.
  5. Generates a srcset and sizes attribute for each input image
  6. Creates a Hugo data file with JSON formatted data for each image.
  7. Outputs either a prefilled shortcode to copy and paste or a YAML formatted list of the data keys.

Usage

responsive-image-to-hugo-template -o ./test/images.json ./test/example_zip.zip ./test/example_input.txt --name Test

Directories

  • build/ - A compiled copy of SQIP FFI
  • test - Test inputs
  • build.rs - A custom build script

Appendix

I go into detail on the reasons behind this program in this blog post. This was originally a Rust port of this program, however my needs have since evolved. The v1 tag in this repository best represents the last "port" version of this program. Commits after the tag have significantly diverged from the original intent.

About

Convert https://www.responsivebreakpoints.com/ into Hugo shortcode for blog

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages