x

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."

Tips

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.

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

More Articles