search

rbuchberger / jekyll_picture_tag

Easy responsive images for Jekyll.
https://rbuchberger.github.io/jekyll_picture_tag/
BSD 3-Clause "New" or "Revised" License
622 stars 106 forks source link

css output format with media queries #272

Open grauschnabel opened 2 years ago

grauschnabel commented 2 years ago

Hi there, as we talked on https://github.com/rbuchberger/jekyll_picture_tag/issues/198 I did just another output format.

I'm not the best ruby programmer, but for me this works just fine.

Inside my <head></head> u do like

<style type='text/css'>
{% picture css {{ overlay_img_path }} css page__hero_css %}

.page__hero_css {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>

And later in the body just using the page__hero_css class for the div I want it to have.
The _data/picture.yml contains like:

presets:
  css:
    markup: css
    widths: [400, 600, 800, 1200, 1600]

Feel free to discuss or use that with adjustments...