search

andismith / grunt-responsive-images

Produce images at different sizes for responsive websites.
http://www.andismith.com/grunt-responsive-images/
MIT License
719 stars 96 forks source link

Auto-generating the <picture> syntax? #54

Open simevidas opened 10 years ago

simevidas commented 10 years ago

Once we have multiple image sources, we need a tool for generating the <picture> syntax. Ideally, these two tasks should both be automated and combined into one task. Maybe the optimal approach would be to have a task that parses content files (be it HTML or Markdown), detects “wild” <img> elements (not contained in <picture>) and then (1) generates the various image sources (based on a given configuration) and then (2) generates and injects the <picture> syntax, replacing the original <img>s.

Notes:

  1. Instead of replacing all <img>s, we could use a flag: <img data-picture src="…">
  2. The config could contain different named configurations, e.g. for images inside blog posts, for images in the side column, etc. and this config would be set on the images, e.g. <img data-picture="post">, <img data-picture="aside">. etc.
yoavweiss commented 10 years ago

One nit, since there's no art-direction involved here, the syntax should be based on sizes and srcset. See https://github.com/andismith/grunt-responsive-images/issues/55

stephanmax commented 9 years ago

@yoavweiss I was looking for a grunt plugin that could do that. Only found this one, though. Unfortunately, it deals with markdown files and uses the <picture> tag.

I ended up writing my own plugin for HTML files and srcset/sizes. Your article was my main inspiration. What do you think?

Probably also helpful for #55.

yoavweiss commented 9 years ago

@smaxtastic - looks great! :) I have some comments, but I'll just open a bug on your repo

andismith commented 9 years ago

Awesome, thanks @smaxtastic