How To: Prevent Images from Being to Large

Have you ever had an image show up on your website which is to large, causing problems for your WordPress theme?   This is especially common for WordPress blogs that have multiple authors, where some authors or guest posters may not know how big they can make the images.

Fixing this is incredibly easy with this CSS hack!    All you need to do is take the following code and place it in your stylesheet, setting a maximum width for your images:

.postarea img {
max-width: 500px;
height: auto;
}

In the above code snippet, you’ll want to replace postarea with whatever div ID or CLASS your theme uses for the content.   You can also adjust the 500px to the maximum width you’d like for your images to be.

Note: This hack may not work on some versions of Internet Explorer.

  • Leave a Comment
  • Fixing CSS Drop-Down Menus That Hide Behind Flash Objects

    One of the more common issues with embedding a flash object on your home page (or any page for that matter) is that if it is near the navigation and you have CSS drop-down menus, then you may find your drop-down menu getting lost behind the flash object. If you haven’t dealt with this before it can feel like a nightmare, but fortunately it’s a pretty easy fix.

    The Problem: You have a CSS based drop-down menu in your navigation and a flash element near it the menus may get “hidden” behind the flash object.

    The Solution: Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.

    In the flash element:

    Look for the flash <object> tag and add the following code:

    <param name="wmode" value="transparent">

    You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag.

  • Leave a Comment
  • WordPress 2.6 Changes How WordPress Handles Images

    If you’ve already upgraded to WordPress 2.6, you might have noticed that WordPress handles images a little differently than the WordPress 2.5 branch and below.  The main change is that you can now use the alt field to add a caption, which will wrap a sort of caption below the image.

    The problem I’ve had with this new setup is that it can cause some problems when trying to float your images due to the new class=”alignleft”, class=”alignright” or class=”aligncentered” elements.  The image will still move, but I’ve found the text won’t wrap properly around the image.

    Thanks to a recent post from Sadish over at WP Lover, it looks like this problem can easily be fixed by by adding some code anywhere into your CSS stylesheet:

    img.alignleft, div.alignleft {
    float:left;
    margin:0 0.5em 0.5em 0;
    }
    img.alignright, div.alignright {
    float:right;
    margin:0 0 0.5em 0.5em;
    }
    img.aligncenter, div.aligncenter {
    text-align:center;
    margin:0 auto;
    }

    This way the images should float and the text should wrap properly.  Thanks for posting the easy fix Sadish!

  • Leave a Comment
  • CSS Techniques: Using Sliding Doors with WordPress Navigation

    This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar. Sadly, WordPress core functions wp_list_pages() and wp_list_categories() don’t allow you to add the required span tag to use this technique.

    We are going to see how to proceed in order to use sliding doors in our WordPress theme.

    Sliding doors, why?

    There’s many articles available on the web about the sliding doors technique, so I’m not going to talk a lot about it. For people who don’t already know this famous hack, here’s a quick example.

    Let’s build a typical navigation list:

    <ul id="nav">
    <li><a href="#">link n°1</a></li>
    <li><a href="#">link n°2</a></li>
    <li><a href="#">link n°3</a></li>
    </ul>

    If we apply, via CSS, background images to our links in order to make this menu prettier, we’ll quickly see a big problem: We must add a fixed width to the links, otherwise the image will be truncated if the link is too short, or the link will overflow the image if its width is too long.

    That’s why sliding doors are very useful: We just have to add a span element inside the link, and then, in our CSS, assign a different background image to both the span element and the link.

    <ul id="nav">
    <li><a href="#"><span>link n°1</span></a></li>
    <li><a href="#"><span>link n°2</span></a></li>
    <li><a href="#"><span>link n°3</span></a></li>
    </ul>

    Our CSS should look like this:

    #nav a, #nav a:visited {
    display:block;
    }
    #nav a:hover, #nav a:active {
    background:url(images/tab-right.jpg) no-repeat 100% 1px;
    float:left;
    }
    #nav a span {
    float:left;
    display:block;
    }
    #nav a:hover span {
    float:left;
    display:block;
    background: url(images/tab-left.jpg) no-repeat 0 1px;
    }

    Please note, as this is only an example, the CSS above isn’t complete and only shows how to apply the sliding doors hack.

    You can see a live demo of a navigation menu which uses this technique on my blog here.

    Using the sliding doors hack within WordPress

    I saw many blog posts where some users told you to modify WordPress core in order to apply this technique. Personally, I never really liked this idea: First, the WordPress core wasn’t made for being modified. And secondly, if you do, when you’ll upgrade your WP version, you’ll have to re-modify the core. Not user friendly at all!

    Instead of this, let’s use a regular expression, by using the php preg_replace() function. We are going to get our pages (or categories) without displaying it, and passing it as a parameter to preg_replace(). The two remaining parameters will be, of course, our regular expression: The pattern we’re looking for, and this pattern’s replacement.

    To create this menu, paste the following code instead of the wp_list_pages() (or wp_list_categories()) function in the header.php of your WordPress theme.

    To list your pages:

    <ul id="nav">
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php echo preg_replace('@<li([^>]*)><a([^>]*)>(.*?)</a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=181&title_li=&depth=1')); ?>
    </ul>

    To list your categories:

    <ul id="nav">
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php echo preg_replace('@<li([^>]*)><a([^>]*)>(.*?)</a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exclude=181&title_li=&depth=1')); ?>
    </ul>

    Right now, your new menu is ready. You just have to make it sexy with CSS. Have fun! :)

  • Leave a Comment
  • How To: Add Bio Info To Your WordPress Blog Posts

    Ever wanted that ability to show your bio information within your WordPress profile at the bottom of every post? For single user blogs, this might not be practical. But for multi-authored blogs, adding the bio info of each author at the bottom of their respective posts is a good way to give props to the author as well as providing information to the readers as to who that person is without having to refer to an about me page. The good news is that, you don’t need to install a plugin to have this functionality.

    BioInfo

    Inside of a user profile is this nifty little box where you can place information about yourself. As you can see, I have already placed some info into the box for reference later on in the tutorial. We are going to take the information in this box and display it at the bottom of every post that is under my name.

    The template tag we are going to focus on is <?php the_author_description(); ?> This tag doesn’t accept any parameters, so don’t bother trying to do anything funky with this tag. Now, head to your templates Style sheet and add this to it:

    .postauthor { }

    This will give us the opportunity to style the postauthor bit when it’s published in the post. Now that we have the template tag in order, we will need to place it within the loop.

    I’m not going to delve into the specifics of the loop, but in general, it deals with the information related to posts. Browse to your themes index.php file and look for something like this:

    < ?php the_content('Read the rest of this entry »'); ?>

    That is what it looks like in my theme, it may look different in yours, but this is the function that displays the content of the post. Underneath of this content function is where you would want to place the following code:

    < div class="postauthor ">< ?php the_author_description(); ? >< /div>

    Please keep in mind that if the code does not work, it is most likely due to the spaces which I had to add in order for the code to properly appear within this post. Simply remove the spaces, and the code should be just fine.

    Now that you have the author description function in place, this is what it might look like on your blog:

    WhatItMightLookLike

    If you ask me, this looks bland and boring. We need to fix that by editing the div class called Postauthor within the CSS file and give that Div class a nice look. You can style it to match your blog design, but for the sake of this tutorial, I’ll display the CSS code which makes it appear like the TAG div container shown below the Post Author.

    .postauthor {
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    background: #EAEAEA;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #000000;
    width: 640px;
    padding: 3px;
    margin-bottom:5px;
    }

    This CSS style code turns that small black text into something like this:

    AllDone

  • Leave a Comment