How to include photos
As with everything else on this site, you can always hand-code your own HTML, including <img> tags. But I have creatd a helper that you can use: the {% include widgets/post_image.html %} statement:
{% include widgets/post_image.html src="/images/posts/Galli-Curci.jpg" %}
By default, this will create a full-width image across the page:
Including a caption
To include a caption, use the caption attribute:
{% include widgets/post_image.html src="/images/posts/Galli-Curci.jpg" caption="This photo comes from the Library of Congress" %}
This photo comes from the Library of Congress
Including sourcing information
If you for some reason are referring to an external photo, or one that requires sourcing, you can use the source_credit and source_url optional attributes:
{% include widgets/post_image.html src="http://upload.wikimedia.org/wikipedia/commons/f/fb/Taser-x26.jpg" caption="A photo of the X26 taser model from Wikipedia." source_url="http://en.wikipedia.org/wiki/Taser#mediaviewer/File:Taser-x26.jpg" source_credit="Photo by jasonesbain - Taser. Licensed under CC BY 2.0 via Wikimedia Commons" %}
A photo of the X26 taser model from Wikipedia.
There is a way to make a gallery (I’ll save that for another example), but it’s possible to create a “gallery” of photos by making a series of those calls. It works for BuzzFeed.
The widgets/post_image.html snippet takes in a few more parameters, including pull (to pull the image left or right) and width, which by default is full, but can be third or half.
To display an image at 1/3-page width on the right side:
{% include widgets/post_image.html src="/images/posts/lou-tellegan.jpg" caption="Lou Tellegen & Farrar (LOC)" pull="right" width="third" %}
Lou Tellegen & Farrar (LOC)
Notice how the rest of this text will float on the other side.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum repellendus natus consequatur, esse est blanditiis. Nisi cum eius et nobis quod optio. Officia sapiente asperiores vero velit molestiae beatae quaerat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ut molestias necessitatibus quidem ab harum dolorem quasi dolore praesentium modi inventore voluptate culpa, veniam enim! Rem, in reprehenderit asperiores amet.
blalblah blah
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam distinctio odio excepturi quasi ipsum repellendus at numquam vitae, hic, exercitationem officiis, ipsam placeat recusandae mollitia impedit dolores obcaecati laboriosam non!
Try not to pull too many images
Pulling an image to the side is useful for small photos. I wouldn’t do this frequently though, as it’s best to maintain things in a single-column format as much as possible.