Closed thisisdano closed 2 years ago
@jeremyzilar I think I'm going to try and start with the jekyll-picture-tag
jekyll plugin then go from there — perhaps we can abstract it to work in any static environment as we go
I'm going to look at the exported posts and give @jeremyzilar a final component for his exporting
@thisisdano Are there jekyll plugins available for getting image dimensions?
OK, looks like I'm going to punt on responsive image for the moment. However, I've built a default image component for our legacy images.
The image.html
include has the following params:
img
: the path to the image. ex: img: "path/to/image.jpg"
This can be either a local path from the assets folder like /img/path/image.jpg
or a external link like http://url.com/path/to/image.jpg
. The component is smart enough to format these urls correctly. It will also correctly parse the local path if you use assets/img/path/to/image.jpg
or img/path/to/image.jpg
or just path/to/image.jpg
. It will also accept a /
at the start of the path. Requiredalt
: a string with the alt text. ex: alt: "an apple"
Optional But if this param is omitted, the image will display with image
as the alt text.height
: The height on the image in px. ex: height: "200"
Optionalwidth
: The height on the image in px. ex: width: "300"
OptionalSo, an example include with a local image might look like:
{% include image.html img="img/2016/05/19/clip-art.jpg" alt="Clip art of a clipboard" height="72" %}
And be rendered as:
<img src="/assets/img/2016/05/19/clip-art.jpg" alt="Clip art of a clipboard" height="72"/>
An example include with an external link might look like:
{% include image.html img="https://example.org/path/to/apple.png" alt="A red apple" %}
And be rendered as:
<img src="https://example.org/path/to/apple.png" alt="A red apple"/>
Updated in the wiki: https://github.com/GSA/digital.gov/wiki/Components
🛑DEPRECATED🛑 - Repo no longer being maintained #18
What's a good way to add images to the system and, in particular, responsive images?