Modifying Mimbo 2.2 Step Three – Changing image handling

This is the third in a series of articles that will cover making several modifications to the Mimbo 2.2 Theme by Darren Hoyt.  I am modifying the theme to fit the requirements for my own site.  To see the first step requirements and get an overview of what I have planned, please read The first article in the series; Modifying Mimbo 2.2: Step One – Identifying Requirements. For the methods used to modify the way the theme handles output in various places, check the second article in the series; Modifying Mimbo 2.2: Step Two – Modifying index.php. This article focuses on modifying the way Mimbo pulls images for the lead and secondary articles on the main page.

Darren Hoyt's Excellent Mimbo Theme

As I mentioned in the first part of this series, I wanted to change the way Mimbo handles it’s images to better suit my work flow.  By default, mimbo stores it’s main page images under the theme folder in a folder named (appropriately enough) images.  Using this method requires that the user has to find an alternate method of uploading his or her image files, which to me is counter-intuitive.  My solution is to store the images in the standard WordPress manner and upload them using the “Add media” dialog.

This might sound inefficient, but for me, the ability to simply paste the image url into the proper custom field makes things much more pleasant, especially when I’m trying to get several posts knocked out in one session.

The default Mimbo code for the “Featured” image is as follows:

<?php
// this is where the Lead Story module begins
   query_posts('showposts=1&cat=3'); ?>
 
    <a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php
// this is where the Lead Story image gets printed	
	$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" id="leadpic" /></a>
 
<a class="title" title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink() ?>">
    </a>

The important piece of code in this instance is in the image call where Mimbo’s creator hard coded the image location:

< img src="<?php bloginfo('template_url'); ?>/images/<?php
// this is where the Lead Story image gets printed

by simply removing the hard coded file location, we can now add our images in the normal way and simply paste the url into the custom fields we’ve created to handle them. In my case these fields were lead_image and secondary_image respectively.

That’s as simple as it gets, script kiddies! with just a few tweaks, you can easily take Mimbo from this:

Darren Hoyt's Excellent Mimbo Theme

To this:

Pretty nifty, huh?

If you’re thinking to yourself… “Hey, there are a LOT of modifications here!” You would be absolutely correct.  Unfortunately these are out of the scope of what I set out to do here, and I’m not going to get into them. Truth be told, I didn’t do anything that difficult, even for a WordPress theme novice.  All of the information you need to get the job done is in the WordPress Codex or on various sites areound the Internet.  There really is no reason for me to go over them again.  I’ll leave it up to you as an excercise in coding.

I do hope that some of the information provided here proves useful to someone.  If so, drop me a comment and let me know!

Happy Coding!

Popularity: 25% [?]