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 Jack,
I’ve had a good hard look – but I can’t see a way to make it work. Have a word with Justin at Theme Hybrid, he wrote the get_the_image() plugin that drives this theme.
Good luck! 😉
Hey Jay,
thank you so much for looking into it. I had tried myself as many things I could think about but it seems there's no way to make it work. So for the moment I'll just keep it linking to the posts, you can have a look at my website even if it's still missing content http://www.jackdavolio.co.uk .
I'll add a link to your blog once I'll have finished with filling it up with photos 🙂
I found the informations on this post very useful, I think its great that people like you are willing to help complete strangers for free through the internet, good karma to you =)
Thanks again!
Hello [AGAIN] Jay.
Actually this is not the first but the second time I write to you. I failed on login by using my WordPress.com account so once I came back my original yet huge comment wasn't here anymore so… Here I go. VERY short…
1) Thank you very much for this trully handy article.
2) Issue: The Mansion theme is not, let's say, pushing EVERY image on the front page. If some post has 5 pictures only one of the is featured on the main page. Any idea?
3) Issue: The category BLOG behaviour changed from one day to another. It just looks ugly, I don't know… Since I never tried to modify anything related to that, I tried reuploaging the original file in order to replace the category-blog.php style sheet. Results: Failed. Any clue?
Thank you very much in advance.
I really hope you can help me.
Greetings from Barcelona!
Pedro
Hi Pedro,
very sorry about the Intense Debate issue – I’m torn if I should keep it or not really. It works well for some things and not so well for others. Thanks for posting again though 😉
1.) You’re very welcome 🙂 Sounds to me there’s a lot of interest in this theme so maybe I should go and update the article to reflect the latest changes. There’s a LOT of new code in the current version than there was when I wrote this.
2.) One of those changes is that only one image gets displayed on the front page (the last one you’ve uploaded). This is due to the implementation of the get_the_image Plugin, which doesn’t support grabbing more than one image at a time. You can however choose to grab a different image rather than the last one uploaded. Check the plugin documentation and implement this in the images.php file of this theme.
3.) I’ve had a look at your site and I see what you mean about the “weirdness” in your blog category. The blog.php may not the the only culprit here, other amendments you may have made to the theme may cause this – hard to say without a look at the source files. Try installing the theme from scratch in a different folder and see what that looks like.
Good luck!
Hi!! THANK YOU SO MUCH!!
but I have a problem, I would like put the firts photograph bigger, like this http://demo.graphpaperpress.com/mansion/
But I don't know how
PLEASE HELP ME!!!