How to Display Images Correctly Using Cargo Theme?

April 10, 2012 10:46 AM

How can I get the Cargo theme (Tumblr) to display full-size images on the main page?

I am missing something, in settings or preferences, that would enable me to do this. I am only interested in posting images, and when they are displaying on the main page they are a magnified portion of what they should be. They only look normal when clicked. It is similar to what is going on in this blog (sample: not self-linking) - the actual images are larger than what is shown in the tiles.

I run this theme on another blog which shows the images correctly. I have since forgotten how I did that. What am I missing?

posted by amicamentis to Computers & Internet (5 answers total)

I am not a Tumblr user (though I know the guys who built it!). I can attempt to help you via some custom CSS, because I'm not sure there's a setting in Tumblr that's going to fix your theme and make it do exactly what you want (If I were a betting man, I'd say there almost definitely isn't).

That said, I have a couple of questions.

1. Are you trying to display each image, scaled down but UNCROPPED?

2. Or are you interested in displaying the images at their "full" resolution -- which seems to be 500 px wide instead of the scaled down 250px wide boxes on that page.

If you want item 1, the page will not flow properly and you won't have nice orderly rows of boxes.

If you want item 2, the page will show each image full size but they'll stack vertically, and you'll have to do some clean-up.

Option 1 looks like this, adjusted to make the height of each row as tall as the tallest item on the page.

Option 2 looks sort of like this.

Option 3?

Is either of those what you're aiming for? Anything where things stack perfectly is going to require some fancier CSS work than I'm willing to do.
posted by plasticbugs at 4:38 PM on April 10, 2012

If you MeMail me a link to the site where you have it working/looking properly, I can take a look at your code and see if it can be applied to your Tumblr site.
posted by plasticbugs at 4:39 PM on April 10, 2012

Do you mean your goal is the posted images are larger in real size than they display in the tiles? I use the cargo theme, and this is exactly how my tumblr operates. I have the "Use high-resolution photos" option selected.
posted by a halcyon day at 4:01 AM on April 11, 2012

Response by poster: Hello, thanks for the comments! I would like the uncropped version, scaled down. I memailed each of you the site where I got it to work properly so there'd be a reference point. I'm going crazy trying to figure out how I set it up in the first place...
posted by amicamentis at 6:26 AM on April 11, 2012

Response by poster: Update via memail from a halcyon day:

OK—

I'm not a web designer by any stretch, but you want the tiling/space fitting of that theme? That one is constrained by absolute column width, and the height of each is a proportional scale.

From what I know of the Cargo theme from my own minor CSS tinkering, it won't do that— that is, it crops all posted content to a fixed proportion based on the original image.

Pittsburgh is Beautiful uses a script called Masonry to build the tiling, which may or may not play nice with Cargo. It's available below (I found it called within the source code).

http://masonry.desandro.com/

You'd have to figure out how to ensure the Cargo theme keeps displaying the full image above in that roll-down pane, and probably turn off infinite scrolling within Masonry and within Tumblr preferences. But it's probably possible to use the core Cargo theme and replace Cargo's tiling method with Masonry… I'm just not skilled enough to do it.

Best luck!
posted by amicamentis at 8:12 AM on April 11, 2012