How to Modify the CSS in Tumblr to Make Your Images Larger

by Ruri Ranbe

Tumblr provides unique tags and attributes that users can add to their themes to define how elements such as photos, videos and quotes appear on the page. Most themes use the "{PhotoURL-500}" or "{PhotoURL-400}" tags, which limit the image width to 500 or 400 pixels, depending on which tag is used. If you want your images to appear larger than 500 pixels, however, you can insert the "{PhotoURL-HighRes}" tag into your page code and edit the cascading style sheets, or CSS, to control the width of the photo.

Select the appropriate blog from the dashboard. Click "Customize Theme" and choose "Edit HTML."

Press "Ctrl-F" and use Find to search for the "{block:Photo}" tag. This tag describes how photos should appear in the theme. Look for the "<img>" tag, located between the "{block:Photo}" and "{/block:Photo}" tags.

Change the value of "src" to "{PhotoURL-HighRes}." "{PhotoURL-HighRes}" maintains the original dimensions of the image, rather than producing a smaller, resized copy of the original.

Scroll to the top of the document and find the "<style>" or "<style type="text/css">" tag.

Add the following to the CSS code to define the width of images:

.photo img { max-width: [value]; }

Insert the above declaration between the "<style>" and "</style>" tags.

Change "[value]" to the preferred width. For example, to have the image span the full width of the container -- usually "<div class="post photo">" -- change "[value]" to "100%."

Click "Appearance" and select "Save." Click "Close" to return to the dashboard.

Click the gear icon to view your preferences. Check "Show Full Size Photos" and click "Save."


Even if you use "100%" as the value, the image will nonetheless be only as large as the container it's in; it can't be larger than the container. So, if an image is inside an element that is only 500 pixels, the picture also will be resized to 500 pixels.

You can change the width of the container holding the image, but this will also change the width of all posts -- not just photo posts. Look for the ".post" class in the CSS code and then modify the corresponding "width" attribute to define the desired size in pixels.


About the Author

Ruri Ranbe has been working as a writer since 2008. She received an A.A. in English literature from Valencia College and is completing a B.S. in computer science at the University of Central Florida. Ranbe also has more than six years of professional information-technology experience, specializing in computer architecture, operating systems, networking, server administration, virtualization and Web design.

More Articles