How to modify MANSION by GraphPaper Press

Fixing Archives

There’s one last tweak we need to make in archives.php in order for your new portrait thumbnails to show up correctly in your Archives. Have a look at the file and find this bit of code:

<div>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/images/default-thumb.jpg" alt="<?php the_title(); ?>" width="200" height="150" /></a>
</div>

Change the two values to your width/height combo and your Archives will look just as good as your front page.

Remove or Re-order Items in the Nav Box

If you don’t like certain item in the Nav Box, let’s do something about that! The magic is all down to a small file called nav.php – here’s the default code:

<ul id="nav">
<li><a href="<?php bloginfo('home'); ?>">Home</a></li>
<?php wp_list_categories('title_li='); ?>
<?php wp_list_pages('title_li='); ?>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a></li>
<li><?php if(function_exists('get_search_form')) : ?>
<?php get_search_form(); ?>
<?php else : ?>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
</li>
</ul>

I’ll go through these one by one and explain what these lines of code do. If you’d like to get rid of one, just delete it or comment it out by putting <!-- in the front and --> at the back. You can also swap them around, say if you wanted your pages displayed before your categories.

• Line 2 displays the HOME link.
• Line 3 displays all your CATEGORIES
• Line 4 displays all your PAGES and SUB-PAGES
• Line 5 displays the RSS FEED link
• Lines 6 to 11 generate the SEARCH box

Add a Logo to your Nav Box

If you’d like to add a logo or image above items in your nav box, have a look at the nav.php file and place these lines

above everything else in that file like this:

<a href=”<?php bloginfo(‘home’); ?>”>
 <img src=”http://yoursite.com/yourlogo.jpg”>
 </a>

The first and third line make this image clickable and link to your home page. Make sure your image is only as wide as your nav bar – otherwise it’ll throw the image grid out of alignment.

Single Posts and Pages with BIGGER pictures

Ah yes… this is a tad tricky but absolutely doable. We need to change two values which will have an influence on each other. First we need to decide how wide each of our pictures can be (the height will be determined automatically). Then we need to amend the “container” width, which will determine the width of our entire site.

First things first: maximum picture width. Mansion’s default width is 495px – say you wanted to make this slightly wider with 550px. Find the following code in style.css:

/* Single Post Page */
#content {padding: 40px 30px 30px 30px; width: 495px; float:left;}

Tweak the width value to 550px and see what you get. Notice that the right hand side of your picture is now cut off. To make it appear in all its glory we need to widen the “container” to make it fit again. Find this piece of code towards the end of the file:

/* Sidebar */
.single #container, .page #container, .single #footer, .page #footer {width: 960px;overflow: hidden}


Logic dictates that if we added 55 pixels to our picture width, maybe we’ll do the same to the container and see what happens (it’s 1015px if you haven’t got a calculator).

If you’ve previously uploaded a number of pictures and your image size was set to something higher than 550px, you can easily re-size images on the fly by adding this piece of code (somewhere under Single Post Page to keep’em together):

#content p img {width: 550px; height: auto}

One downside to putting in a general tag like this is that EVERY picture in your post will now be resized to 550px width – which includes your smileys. To fix that, pop in this piece of code afterwards:

#content p img.wp-smiley {width: 15px; height: 15px}

Happiness!

Make sure your large picture size (under Settings – Media) is set to this value or above – otherwise you end up with smaller pictures that are up-rezzed by your browser. Larger sizes will be down-rezzed, which is fine – but keep in mind loading times here. You don’t want pictures of 4000x3000px to be loaded when all you’re doing is display them at 600x400px…

Keep your viewers in mind when you tweak this though. On your 42″ monitor a 4000px wide picture may look incredible, but if your target audience only has a net book they may think differently. I’d recommend to leave the maximum container width below 1100px – this will look fine on any resolution above 1200×800.

Featured Posts

You can use Featured Posts, which will display a tuhmbnail 4 times the size of your other sizes. All you need to do is tag your post with “featured” and Mansion will do the rest.

If you’ve changed your thumbnail sizes as described earlier, you also need to make a slight amendment to the functions.php file in order for this to work properly. The first piece of code is towards the top:

// Add Post Thumbnail Theme Support
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
add_image_size( 'featured', 401, 301, true );
}

Notice the bottom line which has the values 401 and 301. By default, that’s your thumbnail width x height plus one pixel each to create a tiny space between them. You need to amend this with your chosen thumbnail values. In my case that would be 301 and 401.

We need to do the same thing further down the same file where you should find the following code. Again replace the values 401 and 301 with the your own ones:

//get thumbnails
function postimages($size=medium) {
if ( $images = get_children(array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'post_mime_type' => 'image')))
{
foreach( $images as $image ) {
$attachmenturl=wp_get_attachment_url($image->ID);
if($size=='featured') {
$attachmentimage=wp_get_attachment_image( $image->ID, array(401, 301) );
} else {
$attachmentimage=wp_get_attachment_image( $image->ID, $size );
}

Share this:

• Twitter
• Facebook
• LinkedIn
• Pinterest

Related

Pages: 1 2 3