I’ve been recently using Tumblr more to post sketches from all kinds of devices, and naturally I wanted to embed them in some of my websites’ sidebars.
I found the extremely helpful Tumblr Widget plugin by Gabriel Roth for this: install, drag in the widget add Tumblr URL. Done!
I wanted my images to be in a size that the widget didn’t offer, so I did some tweaking – perhaps it’ll help if you’re in a similar situation.
Tweak the Image Size
My sidebar is 250px wide, but the plugin only offers either 100px or 250px. The latter would be too wide for my sidebar, the former would be too small. So I chose to go with 250px for a decent image size and then override the CSS with the following code (this goes at the bottom of your style.css file):
.tumblr_post img {width: 225px; height: auto;}
This will retain the aspect ratio of the image and make it slightly narrower. Play with the value and see what works best for you.
Removing Text
I’m posting pictures to Tumblr and didn’t want to see any descriptions that I may put from time to time. To remove all other text from the widget add this bit of CSS:
.tumblr_post p {display: none;}
This will suppress all text output that’s wrapped in p tags (may not be what you want but works well for me).
And there you have it! See my changes live in the sidebar at http://www.versluis.com, or see what I’m up to on Tumblr these days.
Thanks for this. It inspired me to do my own tweaking.
i created a box for 9 images.
here are some of the changes that I made:
echo ‘{‘photo-caption’};
added:
<option value="9" >9
and changed the <a href rel=”nofollow”> so it goes to my tumblr page instead of just the image files.
i’ve got to figure out how to lessen the bottom margins, but i’ll tackle that after dinner, or next week or something.
oy, i must have screwed up my post with a bunch of html i threw in the comment. sorry, bout that. maybe throw a tag around it.
No problem – thanks for sharing, Hamsa!