Research images and jekyll

[thisisdano]

What's a good way to add images to the system and, in particular, responsive images?

[thisisdano]

@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

https://github.com/robwierzbowski/jekyll-picture-tag

[thisisdano]

I'm going to look at the exported posts and give @jeremyzilar a final component for his exporting

[thisisdano]

@thisisdano Are there jekyll plugins available for getting image dimensions?

[thisisdano]

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. Required
• alt: 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" Optional
• width: The height on the image in px. ex: width: "300" Optional

So, 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"/>

[thisisdano]

Updated in the wiki: https://github.com/GSA/digital.gov/wiki/Components

[aalikaram]

🛑DEPRECATED🛑 - Repo no longer being maintained #18