I’ve received a couple of questions about the carousel plugin I use to display my Instagram photos on my blog footer at Eat Darling Eat. I use SnapWidget. It’s easy to use, it’s compatible with any blog platform, and it’s free. There’s a premium version that offers more display options, but I imagine that for most purposes, the free version is sufficient. You can display your IG photos by simply specifying your Instagram username. Or, you can display photos according to a hashtag filter. When I use hashtags, I want to ensure that only my photos are embedded. I do this by creating a unique hashtag. I realize that this method involves a good guess at best, but if you precede a tag with your blog name, the chances of others using the same hashtag is unlikely! (For this demo, these photos were sourced from my virtually inactive secondary Instagram account, @poweredbypastries.)
Text & Labels on Photos with CSS
To add a caption on top of the slider, as I’ve done above (or like the one on my blog footer at EDE or my Oldie But Goodie widget below), all you need is a little CSS. I’ve written some tutorials that show you how to add text on your photos. Adding text on top of an iframe (which is the name of the HTML element that contains the slider) isn’t any different! If you wanna give it a go, check out these tutorials:
- css: box outlines/borders
- css: captions and labels
- css: layering text on photos (with screencast)
More examples after the jump — I hope they’re useful! ![]()
SnapWidget: Sliders
Two 295×295 sliders are displayed above. The slider on the left displays my pup photos while the slider on the right shows photos taken at several coffee houses around the City — two hash tags for two different sliders.
SnapWidget: Static Grid
You’re not restricted to carousels! You can display your photos in a grid of any photo size and dimension (limited to 60 photos!). For example, this is a 3×6 grid and each photo is 185×185 px, no borders or padding. New photos are displayed at the top of the grid.
Stay Tuned, Style Members!
I’m going to have an additional bonus screencast at STYLE that will walk through the process of using CSS to style a Snapwidget slider (or any slider or image for that matter). I’ve sketched out half a dozen caption variations and I hope to have the screencasts ready by next week.
