Weekend Project: Featuring Images with a One-Column Layout
This Weekend Project is perfect for anyone who wants to display images in a gallery-like format, where the images are wide and don't have to contend with other design elements.
In the example below we've made use of the One-Column Layout, combining it with the Theme Builder and Custom CSS. You can setup something similar with only the Theme Builder.
Remember that images, by default, will be restricted to 30px less than the width of the column. Keep in mind that the current max-width of the Theme Builder post column is 500px. The widest an image can be, without using CSS to increase the column width, is 470px.
Knowing that, and knowing we wanted to display much larger images, we setup a custom column width for our One-Column Layout by using the following CSS:
#container { width: 900px !important; }
#alpha { width: 900px !important; }
This means our images can be shown at a max-width of 870px!
We also chose the following Content settings at Design & Content to limit the design elements:
- no date-header
- no navigation bar
- no module content
- minimal post footer content (we kept it to just the permalink, comments link, and a few buttons)
- no blog footer
You can choose your own preferred settings for what appears in the blog, but we really love the simple design that doesn't distract from the image.
