Last year a group of friends and I took a much-needed getaway trip to the mountains of Colorado. Naturally, I had to design a website for this event we call Brocation. You can view the website here.
One of the things I wanted on the site was a section to showcase members of our trip—a way to display photos with a link to our Twitter accounts.
Here’s a screenshot of what I came up with:
I thought it might be helpful to show you how I did that. Implementing in your custom theme will vary depending on what you have.
Here are the steps I used to add a grid of photos to my homepage:
1. Register the Photo Grid widget area in the functions file:
[gist id=3bdb303740eec2cfbddaaac1f6f1efcd file=functions.php]
2. Hook the Photo Grid widget area after the site header. This should be done by adding the code below into your theme’s functions file:
[gist id=17c246f889a94804c7ca62cb0d82d50d file=functions.php]
*Note: Feel free to place these snippets at the bottom of the functions file.
3. Add HTML for the member images into a text widget:
[gist id=bae371c5392e5ebe3518b222ca8a4ce1 file=sample.html]
Note: The images used on my site are 800×800, but you can upload something smaller such as 400×400.
4. Add CSS for member images in theme style sheet:
[gist id=1100d828380f8e868cc5d350c090b589 file=sample.css]
If you’re looking to add your photo grid section in another location, here’s a comprehensive list of Genesis Hooks for you to use as reference.
We have published additional Genesis Quick Tips for you, so feel free to use what you see to build something awesome.