I wanted to use Mansion for my Miami Beach Huts website. It was ideally suited, however all my images are portrait instead of landscape. Some tweaks were necessary which I thought I’d share with you for endless hours of fun.
I wrote this for Version 0.2 of this theme. A few things have changed since then, especially the documentation. Keep that in mind while I’ll talk you through some tips and tricks of MANSION.
Since we’re playing around with the thumbnail sizes and orientations, the first thing you want to do is install an invaluable plugin called AJAX Thumbnail Resize by Junkcoder. It does exactly what it says on the tin: resize your existing thumbnails. This way you don’t have to worry about posts from the past – they’ll still look great when you upgrade to a new theme like this.
Picture Sizes
For each picture you upload, WordPress automatically creates three different sizes on the fly: Thumbnail, Medium and Large. These are saved with your original image file.
Mansion uses the Thumbnails to generate all pictures on the home page and then links each picture to the post it’s embedded in. To make them look good, the default thumbnail size needs to be set to 200×150 pixels (under Settings – Media). Make sure the box “crop tuhmbnails to exact dimensions” is ticked.
So far so good. If you’re writing a new post and you’ll upload a few pictures with it, all thumbnails will resize correctly. If you’ve previously used a different thumbnail dimension you can use the aforementioned AJAX Thumbnail plugin to rebuild them all to fit Mansion.
The readme file also suggests sizes for medium and large images (495px and 960px) – we’ll see how that affects single posts and pages a bit later.
Orientation: using Portrait instead of Landscape
For my project, all my pictures are portrait instead of landscape – so instead of 200×150 thumbnails I’d like to use 150×200 ones. Changing the size alone and rebulding all thumbnails creates rather big black gaps in between them, so we need to tweak the style.css file a bit.
Find the following code and tweak the WIDTH value to your own needs. Say you have 150 pixel wide thumbnails, set it accordingly.
/* Logo description styles */
#header {background: #333; width: 200px; float: left; }
The Height of the Nav-Box
You may have noticed that when you use a different width for your thumbnails, this will have an effect on the Nav Box. Let’s make sure it’s exactly twice the height of your thumbnails and the front page should have a good grid layout again.
Let’s look at style.css one more time – find this near the previous piece of code:
#header .menu {min-height: 150px;}
#header .logo {height: 150px; position: relative}
These lines together effectively make up the size of the nav box. The bottom one sets a size for your “Logo” (in this case just the text), and the top line will dynamically expand depending on how many pages and categories you’re showing.
Play with these values depending on your thumbnail size. In my case, if you’re showing 8 items in the list, 99px for the “Logo” works fine.
You can also make this size static by replacing “min-height” with “height”, but you may find that if you add more items (categories or pages) some of them won’t be showing. You could then just make the box bigger in multiples of your thumbnail height.
The Width of the Search Box
The integrated search box is made for a 200 pixel wide nav box. Since we just made that a bit slimmer, part of it now gets cut off. Fear not, for help is at hand – take a look at this piece of code in style.css (under Navigation Styles):
#nav #s {background: #2c2c2c url(images/search.png) 1px 3px no-repeat; border: 1px solid #222; width: 157px; color: #666;font-size: 11px; padding: 4px 4px 4px 16px; font-family: "Lucida Grande",Arial;}
The width value is the culprit – set that to something like 110px for 150px wide thumbnails. Feel free to play around with it to find a size that suits you.
Hi Ivan,
sorry about the delay, I’ve been working tirelessly on a great new backup plugin for WP – stay tuned on that one. But I digress – I’ve looked into your question and had the same problem at first with everything being scrambled up – but believe me there’s a fix for this:
First, copy the entire contents of category-blog.php into the index.php file. I bet you’ve done that already and that caused some scrambling, right? Not to worry.
Next have a look at the style.css file and find the block that begins with /* Blog */. Notice that every style tag begins with .category-blog? That’s what makes this load only when we’re using the category-blog.php file. We want this to be executed by default so we need to get rid of it like so:
/* Blog */.box, .page-template-page-blog-php .box {background: #222;padding-bottom: 4px;}
.blog a, .page-template-page-blog-php .blog a {text-decoration: none; font-weight: normal;}
.box h2.posttitle, .page-template-page-blog-php .box h2.posttitle {padding:10px;font-size: 15px; font-weight: bold; padding-bottom: 0; margin-bottom: 0;}
.box p, .page-template-page-blog-php .box p {padding:5px 10px 10px;font-size: 12px; line-height: 16px;}
.col2 h2.posttitle, .page-template-page-blog-php .col2 h2.posttitle {font-family: Georgia, Times; font-size: 20px; font-style: italic; font-weight: normal;padding-top: 15px;}
.col2 p, .page-template-page-blog-php .col2 p {font-family: Georgia, Times; font-size: 16px; font-style: italic; line-height: 20px;padding-top: 10px;}
.datediv, .page-template-page-blog-php .datediv {font-family: arial;margin: 10px 10px 0; float: right; color: #666; border-bottom: 2px solid #333;}
span.day, .page-template-page-blog-php span.day {font-size: 30px; text-decoration: none;font-weight: bold;display: block; padding: 3px 0;}
span.monthyear, .page-template-page-blog-php span.monthyear {font-size: 10px; text-transform: uppercase;}
Styling sorted. Now we have our frontpage looking exactly like the “blog” page with all posts being formatted “the way of the blog”.
May I say that this is a wonderful idea and puts yet another very cool spin on Mansion.
Enjoy 😉
Hi Jay –
This is a great post, thanks so much for all the suggestions! I just started using Mansion (and wordpress) and I’m having trouble with my thumbnails…they’re all sized differently and are pixelated, even though the single page views look crisp.
http://www.marisarobertson.com
Do you have any suggestions as to how I can fix this?! If you need I can paste in my stylesheet.
Thanks so much.
Marisa
Thanks Marisa!
The first thing that springs to my mind is how big the size of your thumbnails may be. You can check this under Settings – Media. You’re currently displaying images on the Mansion front page with a width of 160 – so if your thumbnail size is set to less than that Mansion will up-res to make them fit. You also need to tick the box that says “crop thumbnails to exact dimensions” – that way they will all be the same size on the front page (albeit cropped).
Please note that this will only affect uploads you make from now on; to change your current thumbnails restrospectively, check out the Ajax Thumbnail Rebuild
pluigin – it will do this for you.
Good luck 😉
Hi,
I’m trying to have all the posts/thumbnails show on the blog page (the grid) and get rid of the pagination. Any help with that would be cool.
Thanks!
Thanks for getting back to me so quickly! I checked my thumbnail settings and they were set to 200 width x 150 height… I changed the 150 to 160, downloaded & activated the Ajax plugin and made sure the “cropped thumbnails to exact dimensions” box was checked but they’re still looking blurry!
One thing I noticed was that for some of my images, Mansion would create thumbnails that cropped my pictures in a way I didn’t like. So I manually selected the areas I wanted to appear in the thumbnail and although that solved the cropping issue, it seems that some of but not all of the images I played with are either much smaller than the ones I didn’t play with, and/or they’re much blurrier.
Do you have any additional thoughts or tips?!
Thanks again. So much.