Adding Post Images

WordPress 2.9+ has support for post and page images, looking at the latest release from Artisteer 2.4 there still is no option to have post images, but it is not such a big problem, let us walk you through it and in less than 30 minutes you will have a post with a nice picture.

Our latest theme is the Portfolio Theme, we have used Artisteer 2.4, cu3er slideshow and have created a function to add a number of categories, posts and tags when the theme is first loaded, check back early February for linking, columns and mouseover fading.

Visit The Wedding Theme to see how the post images look, while you are there sign the guestbook, we would say view our photos but if we have not emailed you the password you will not be able to.

This post has been created based on a post by Mark Jaquith here and we would like to thank mark for making the code easy to follow.

But in this short tutorial we are only looking at the Post Images, support for post images is now a part of WordPress and is easy to implement so lets get started, if you have been following our tutorials then you will already have these lines in the demo-functions.php file, if not you can add them to the Artisteer functions.php file.

The width (200)  and height (133)  dimensions we used here in line three are for a standard landscape image, you may want to change the dimensions to a square or portrait based on the type of posts you will be making.

Add to either your demo-functions.php or the Artisteer theme functions.php

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 133, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */

Now we need to add a style to the stylesheet for our image, you may want to pad the image or add additional margins to suit your theme, Artisteer adds a margin around the img tag, in our theme it was 7px so we added that to the image width, 200 to 214px, and a right margin just to push the text more to the right.

Add to either your demo-custom.css or the Artisteer theme style.css

/* Add a div to the post list for our thumbnail images */
#demo-image
{
 margin-right: 7px;
 float: left;
 overflow: hidden;
 width: 214px;
 height: 100%px;
}

Last step is to add our image into two Artisteer files, index.php and archive.php, as you scroll down you will see this line.

<?php while (have_posts()) : the_post(); ?>

Below that is another line that look like this, paste the code lines after this lines

<!– article-content –>

Add this code to the index.php and archive.php

<!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

So your code block should look like this:

<div class="art-postcontent">
 <!-- article-content -->

 <!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

 <?php if (is_search()) the_excerpt(); else the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
 <?php if (is_page() or is_single()) wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

 <!-- /article-content -->
</div>

Now that is it with the code how easy was that, just edit a post and in the right column you will see an option for the Post Thumbnail, select an image from the post media and you will see an option to make thumbnail, save the post and view your website.

Settings-5

screenshot

Notice

Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of any themes or files is restricted to site supporters.

You can register for a 10 year ‘Free Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

this website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.

15 thoughts on “Adding Post Images

  1. Pingback: uberVU - social comments

    • Sure it is, look at the Portfolio theme post, and download the theme look in the archive.php file.

      &amp;lt;a href=&amp;quot;&amp;lt;?php the_permalink() ?&amp;gt;&amp;quot; &amp;gt; &amp;lt;?php the_post_thumbnail(); ?&amp;gt;&amp;lt;/a&amp;gt;
      

      David

    • Sure it is, look at the Portfolio theme post, and download the theme look in the archive.php file.

      &lt;a href=&quot;&lt;?php the_permalink() ?&gt;&quot; &gt; &lt;?php the_post_thumbnail(); ?&gt;&lt;/a&gt;
      

      David

  2. Need massive help! Your code is awesome but can you please tell us exactly where to place (like which line to insert the code) the code in function.php, style.css, index.php and archive.php. I am using artisteer latest version and have an exsisting site and don’t want to use the demo-page.

    Thank you so much for all the help!

  3. Need massive help! Your code is awesome but can you please tell us exactly where to place (like which line to insert the code) the code in function.php, style.css, index.php and archive.php. I am using artisteer latest version and have an exsisting site and don’t want to use the demo-page.

    Thank you so much for all the help!

  4. @Tom
    functions.php at the start of the file after the <?php
    style.php at the end of the file.

    index.php and archive.php inside the loop add the code after these lines:

    David

  5. @Tom
    functions.php at the start of the file after the <?php
    style.php at the end of the file.

    index.php and archive.php inside the loop add the code after these lines:

    David

  6. came across your site via the artisteer forum…. very impressive and you have helped me a lot. Just one question ….. can this be implimented so as to not pull in the rest of the posting…. IE: i insert just a photo t a post and then just want to have the thumbnail show up.. the only ay i can do this is to add a linebreak <—more–> before the image but then i get the read more text in my posings o nthe home page.

    Hope this makes sense…

    Cheers JohnB

  7. came across your site via the artisteer forum…. very impressive and you have helped me a lot. Just one question ….. can this be implimented so as to not pull in the rest of the posting…. IE: i insert just a photo t a post and then just want to have the thumbnail show up.. the only ay i can do this is to add a linebreak <—more–> before the image but then i get the read more text in my posings o nthe home page.

    Hope this makes sense…

    Cheers JohnB

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>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More