Multiple Template Images

Update 2011: I really advice to use use the Advanced Custom fields plugin to add images and all kinds of extra meta boxes to your posts, pages or custom post types. Multiple Template Images is out of date and we are not updating the plugin anymore. Thanks for all the great comments and hopefully some of you still use it with pleasure!

Multiple Template Images allows you to add multiple image selection boxes to the post and page editor. These images can be displayed in your theme.

Download the Multiple Template Images plugin (wordpress.org)

Description

Multiple Template Images allows you to add multiple image selection boxes to the post and page editor. These images can be requested in your theme. You can cut, crop, blur, mask (etc.) these images using comprehensive functions (based on PHP’s GD library).

Multiple Template Images is a good alternative for WordPress template designers/developers who used to use YAPB to add a single image to a post. In contrast to the photoblog, this plugin allows you to add multiple images to a post in addition to providing the advanced image transformations.

This plugin is useful for those who develop templates for others (clients, users, editors) who have little technical knowledge of WordPress. You can easily let your client choose his own images, for example: headers, footers, images with effects (mask, blur, crop, etc.) and more. The user chooses the image, but you can control the page layout!

  1. Define as many image uploads selectors as you like in your theme’s functions.php.
  2. Let your client select the images he would like to use on a specific post or page. No more ugly page layouts because of users who wreck the layout in the visual editor. Completely control the position, width, heigth and effects of the images.

Installation

Note: this plugin is for template developers only. Without any knowledge of WordPress themes, this is not easy to install.

  1. Install and activate the plugin. Nothing will happen until you finish step 2.
  2. Open your functions.php, define your image slots in here:
    if(class_exists('TemplateImages')) {
        mti_add_image_slot('first-image', 'Name for the first image');
        mti_add_image_slot('second-image', 'Name for the second image');
    }
  3. Now your post/page will have two image upload fields named “Name for the first Image” and “Name for the second image”. Of course you’re able to rename the image title, but choose the identifier carefully; renaming it once it has images attached will make it difficult to track those later on. Please do not use any fancy characters or spaces in the identifier (first-image).
  4. Now set a position in your template where these images will appear. The following & code will echo the URL of the image, so you have to provide an tag (or something else) yourself. For example: the URL for the first image slot shown in step 2 (if it exists):
    if(class_exists('TemplateImages') && mti_image_exists('first-image')) {
        echo mti_get_image_url('first-image');
    }

    So this is how you show your image:

    <?php if(class_exists('TemplateImages') &amp;&amp; mti_image_exists('first-image')) { ?>
       <img src="&lt;?php echo mti_get_image_url('first-image'); ?&gt;" alt="My image" />
    <?php } ?>
  5. Repeat step 4 for every image you defined in functions.php of your theme. Of course there are many ways to tweak your image.

Examples

  1. Show the image width a max width of 300px:
    <?php if(class_exists('TemplateImages') &amp;&amp; mti_image_exists('first-image')) { ?>
       <img src="&lt;?php echo mti_get_image_url('first-image', 'w=300'); ?&gt;" alt="My image" />
    <?php } ?>
  2. Show a thumbnail (100px x 100px) cropped from the center of the image:
    <?php if(class_exists('TemplateImages') &amp;&amp; mti_image_exists('first-image')) { ?>
       <img src="&lt;?php echo mti_get_image_url('first-image', 'w=100&h=100&zc=1'); ?&gt;" alt="My image" />
    <?php } ?>

56 thoughts on “Multiple Template Images

  1. Step 4 the code: Replace && with &&. Complete second (‘first-image) with (‘first-image’). Also for Step 4: Can you give us a proper example with this -tag? Thank you.

  2. Hey there
    Yes question on the placement in the code for the url?
    Would I use an image that is hosted on the same site? I am assuming that It does not matter where the image resides but where in the code do I place the url

    if(class_exists(‘TemplateImages’) && mti_image_exists(‘first-image’)) {
    echo mti_get_image_url(‘first-image’);
    }

    thanks

  3. Like a crazy person I have been looking for a plugin similar to this but there are two things I need which I am hoping you can help me with.

    First — I believe this plugin is not using the built in wordpress media library correct? If not… is there anything that can be done so that it does use it?

    Second — I really want to allow the admin/editor the ability of settings the default size/crop elements through the admin area. In other words, what I would like to do is allow each each to be clicked and for the user to be able to change exactly where the image should be cropped.

    Currently your plugin sems to only allow cropping to take place from the center or from x/y pixels from the 4 corners of an image. Is there a way to essentially do exactly this but to ALSO pass potentially two additional variables which essentially can set a “margin” to the cropping of an image. In other words, if I wanted to crop a 50×50 pixel image from the top left hand side of a 100×100 pixel image… BUT I wanted the crop to start 10 pixels in on the left and 5 pixels down from the top… can those two variables somehow be set?

    Finally, does your plugin automatically create a cached version of what we created to ensure things load just as quick as if it were calling a static image?

    • Dear Chris,

      I really developed this plugin for template designers only, so no admin functionalities or anything like that. I’m sorry, maybe in the future.

      About the crop, it’s a based on comprehensive functions (based on PHP’s GD library). So take a look at the GD library functions, it’s able to do a lot so i think you’re example is possible.

      And yes it does cache your images! So it’s quick!

      Regards,
      Rein

      • Thanks for the update… now does this still work with the standard wordpress media library? (hopefully it does).

        The other question I had for you which I am hoping you can answer is as follows:

        I am looking for a way to include your code for some specific metaboxes for a specific custom post type.

        My goal is to allow a user to either:
        a) upload a new image from his computer
        b) enter a url of an image on the web which would be downloaded and saved locally
        c) allow the user to click browse and select from a file from the media library.

        First of all… could you hopefully show how each of these situations can take place (more specifically b and c?)

        The other element I am looking to hack is C in that I would like the “browser” functionality to only allow the user access to media files within a specific folder or for a specific tag or category or for that matter post type so he does not have to go through all the media files for things which might not be relevant.

        Thanks in advance!

        • Dear Chris,

          With this version images which are uploaded by the Multi Template Images plugin are NOT shown in the media library.

          I’m sorry but this is just the first version of this plugin, all the goals you described are not the way i think of this plugin.

          The Multi Template Images plugin is just a simple way to select images in admin which are shown on frontend in every format, style or size your want.

          Maybe you should hire a WordPress developer to make this custom for you.

          Good luck!

  4. This is a very clever idea. Can you please tell me though…

    I am retrieving posts using the wordpress function get_posts() and your above examples don’t let me retrieve the image from within get_posts. Can I specify the post ID somewhere in your function? How can I pull the images from inside get_posts()?

    Thanks :)

    • Dear Milorad,

      Please notice that you have to change the image ID in the examples! In the examples i used: < ?php if(class_exists('TemplateImages') && mti_image_exists('first-image')) { ?>

      So i used first-image there, you have to replace that with your own ID.

      Does the image uploader in the admin works? Can you select and upload an image, and do you see a preview after saving?

      Regards,
      Rein

      • Thank you for your quick reply, unfortunately that’s not what I mean… I understand changing the image-id to match functions.php, and I am doing this.

        What I need to be able to do, is retrieve ‘first-image’ from $post->ID. YAPB had this method (which could be used outside of the loop (or indeed, within a get_posts() loop.

        YapbImage::getInstanceFromDb($post->ID);

        Is it not possible for me to specify the post ID from which to retrieve the image? Using get_posts() is often much easier and faster than creating many instances of “the loop”.

        If you imagine a homepage like a magazine, which pulls posts from many different categories, you would have to create several instances of the loop – but this is simplified using get_posts().

        It would be extremely helpful to be able to call mti_get_image_url(‘first-image’, $post->ID) or if necessary another function mti_get_image_from($post->ID, ‘first-image’)

        I hope you can help with this, because without this function I still need YAPB, and I can only use one image with that.

        • He Milorad,

          Currently it is not in the plugin. But it is very easy to put it in. I will release an update today or tomorrow. I will create a new function which can get the image url from a given post id.

          Working on it :) I will give you a sign!

          Rein

          • Wow, Rein, thanks for such a wonderful pro-active approach, but not necessary as stated, it does actually work, the mistake was mine.

            I’m going to go rate your plugin highly for your extremely fast responses and very active approach.

            Thank you so much and I apologise once again.

      • I’m very sorry for bothering you Rein – it turns out this DOES actually work from within get_posts() already. The coding mistake was mine, I was re-using variables and I lost track of them, I apologise for wasting your time.

        Please delete my comments so they don’t confuse future readers, and thank you for a really great plugin. It will mean much less wordpress trickery to make some fantastic new sites.

        • No problem at all, I’m here to help!

          Just curious, did you used:

          <?php echo $templateimages->get_image_url('2','first-image', 'w=400&h=400&zc=1'); ?>

          Where the first parameter is the postID.

          Or did you solved it another way?

          • Hi Rein, Sorry it took me so long to get back to you. I assumed you would remove this because your plugin already did it.

            I didn’t use the ID parameter (as I was unaware that I could do that). As it turns out, I didn’t need to use it at all. The reason it wasn’t working at first was a coding error on my part.

            It works perfectly with get_posts() right out of the box. Perhaps get_posts populates the required variables for your plugin automatically, the same way that it happens inside TheLoop, I suppose.

            It’s nice to know that specifying an ID is possible though, just in case.

  5. Pingback: 5 most used WordPress plugins (2) « Rein Aris – Blog

    • If you look at the examples above you will see at example 2 that you can set the width of an image. So if you only set the width, images would be 646 (or something else) wide and heigth is variable.
      I don’t think it will scape up images that are to small, but you can give it a try (and let me know :) ).

      Good luck!

  6. Just a quick heads up – on the wordpress plugin page under installation. The sample code to display the url of the image is missing an apostrophe at the end…

    echo mti_get_image_url(‘first-image);

    …should be …

    echo mti_get_image_url(‘first-image’);

  7. hi, i am trying to use this plugin on my first wp site. it works when i display on a blog post or page. however when i try to display the image inside a widget (post by tags, or the event calendar) it only shows me the first image i uploaded in all the entries. i am guessing that this is because i am not somehow looping through the images although i am looping through the loop since i get a series of results for these widgets. what am i doing wrong?
    thanks, Liz

  8. Hi,

    I have in functions.php:
    if(class_exists(‘TemplateImages’)) {
    mti_add_image_slot(‘prva-image’, ‘slika1′);
    mti_add_image_slot(‘druga-image’, ‘slika2′);
    mti_add_image_slot(‘treca-image’, ‘slika3′);
    mti_add_image_slot(‘cetvrta-image’, ‘slika4′);
    mti_add_image_slot(‘peta-image’, ‘slika5′);
    mti_add_image_slot(‘sesta-image’, ‘slika6′);
    mti_add_image_slot(‘sedma-image’, ‘slika7′);
    mti_add_image_slot(‘osma-image’, ‘slika8′);
    mti_add_image_slot(‘deveta-image’, ‘slika9′);
    mti_add_image_slot(‘deseta-image’, ‘slika10′);
    mti_add_image_slot(‘jedanaesta-image’, ‘slika11′);
    mti_add_image_slot(‘dvanaesta-image’, ‘slika12′);
    }

    but I don’t use all of that images.

    Is it possible to know how many images are uploaded?

    Thanks!
    Srdjan

    • You can just check it in your template, by example:
      if(mti_get_image_url(‘prva-image’)){
      // do something
      }

      It checks if the images is submitted. Does that solve your problem?

      • I solve problem:

        I have in functions.php:
        if(class_exists(‘TemplateImages’)) {
        mti_add_image_slot(‘image-1′, ‘slika1′);
        mti_add_image_slot(‘image-2′, ‘slika2′);
        .
        .
        .
        mti_add_image_slot(‘image-12′, ‘slika12′);
        }

        And:

        <?php
        $i = 1;
        $count = 0;
        while ($i

        I have number of uploaded images in variable $count.

        Thank you!

    • Great work! We are currently not developing the plugin like it should so i’m happy to see this solution for additional post types. I will take a good look and maybe i will update the next version with your code if that’s allright?

    • Thanks John! I’ve used your code on my site. Works great!

      And thanks Rein for the plugin in the first place. Hopefully, it will be updated to accommodate custom post types in the future.

  9. Hi Rein,

    Is it possible to upload more than 20 photos with MTI? I have created 25 slots for uploading my photos, but i couldn’t upload any photos from the 21st slot.

  10. When I upload my image and publish the page it works perfect. But when I try and go back to the page I get this error in the template image section…*** ERROR: No PHP-GD support available *** What can I do to fix this?

    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>