Skip to content

Instantly share code, notes, and snippets.

@wvuwebgist

wvuwebgist/_random-image-loop--different-sizes-liquid.html

Created February 23, 2021 22:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wvuwebgist/f118396cdac8cff76c624a53e9282172 to your computer and use it in GitHub Desktop.
Save wvuwebgist/f118396cdac8cff76c624a53e9282172 to your computer and use it in GitHub Desktop.
Download ZIP
CleanSlate: Randomize the hero image and generate variables for different sizes based on a label in Liquid.
Raw
_random-image-loop--different-sizes-liquid.html
{% liquid
assign background_image_small = site | first_random_image_tagged_with: label: "backpage-1-thumbnail" | image_url: size: "1780x580" | css_background_image
assign background_image_large = site | first_random_image_tagged_with: label: "backpage-1-thumbnail" | image_url: size: "1780x1780" | css_background_image
%}
<style>
.wvu-hero {
{{ background_image_small }}
} /* /.wvu-hero */
@media (min-width: 501px) {
.wvu-hero {
{{ background_image_large }}
} /* /.wvu-hero */
} /* /mq */
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment