Support » Themes and Templates » Can you have a conditional link image?

  • Resolved Jonas Grumby


    Hi everybody,

    I’m working on a prototype home page template that calls in three posts that have the same custom post type (so that they only appear on the home page and not in the regular posts loop). I’m trying to make two things happen…

    1) I would like each post to have a unique image to the right instead of all having the same image. I tried to find some conditional tag that would identify the link and specify the image but it doesn’t seem like there is one.

    2) Ultimately I also want my conditional code to include rollover code for each image. You can see that I have rollovers working on the social networking icons. I could easily eliminate the text and put the link title on the image if it makes life easier than having text + image.

    The page is here:

    TIA for any insights…

Viewing 15 replies - 1 through 15 (of 23 total)
  • BTW my current code is:

    $args = array( 'post_type' => 'homeposts', 'posts_per_page' => 3 );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    <div class="homeblock" id="post-<?php the_ID(); ?>">
    <div class="hometitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?><img name="puzzle" style="float: right;" src="<?php bloginfo('template_url'); ?>/images/home-puzzle.jpg"></a></div>

    (followed by a separate div for the excerpt, /div tags, etc.)

    I suppose I could hard-code the whole thing and use three queries just to pull in the excerpts, but that seems kind of janky.


    Moderator keesiemeijer



    Why not use Post Thumbnails?

    Thanks. I thought about making each image the “featured image” of the post, which would probably make it easier to show the correct image. Then I would still have to work out how to do the rollovers…

    Moderator keesiemeijer



    Oh, yeah, I forgot about the rollovers. If these Posts always stay the same you can use the post class.

    Could also use custom fields (Or custom fancy meta boxes), dunno if that’s any less janky…..

    Are the rollovers 2 images? Sprites? css effects?

    Yes they will always stay the same. I will check into that, thanks.

    Oddly enough, I added `if ( function_exists( ‘add_theme_support’ ) ) {
    add_theme_support( ‘post-thumbnails’ );
    }` to the functions.php of the theme and I still don’t have the Featured Image metabox 🙁

    This is based on the latest update of the Default theme and I have not made any other changes to the functions.php so far…



    Forum Moderator

    I did something vaguely similar on a client’s site a while back where I wanted to display an image with about 4 posts. I solved it by having 8 pre-prepared images in the theme’s images/random folder. These could be very simple CSS sprites. To grab the images and drop them into an array (without any duplicates) before a secondary get_posts loop, I used:

    // get random image filenames
    $theme_random_imgs = array();
    $theme_random_img_src = get_stylesheet_directory_uri() . '/images/random/';
    while( $i<=$num) {
    	$theme_img_num = rand(1, 8);
    	$theme_img_filename = $theme_random_img_src . $theme_img_num . '.jpg';
    	if( !in_array($theme_img_filename, $theme_random_imgs ) && file_exists(get_stylesheet_directory() . '/images/random/' . $theme_img_num . '.jpg')) {
    		$theme_random_imgs [] = $theme_img_filename;

    Then, just before the secondary loop, set up $i again:
    $i = 0;

    and used:

    echo '<img class="wp-post-image" src="' . $theme_random_imgs[$i] . '" width="150" height="150" alt="" />';

    Then just incremented $i just before the end of the loop. If the number of pre-prepared images is significantly greater than the number of post that you want to display, you should get a reasonably random display on each page refresh.

    Moderator keesiemeijer



    For the post thumbnails:

    Have you looked in the”Screen Options” on the top right when you are on the edit (custom post type) Post screen?

    Did you support featured images when registering your custom post type

    example (in $args array): 'supports' => array('thumbnail')

    Thanks Esmi but I am trying to have a specific image appear next to each of the three titles (not random images) and also to have a rollover image for each. There will never be more than these three posts on the home page. The content of the posts may change but the post IDs and names will always be the same.

    Sprites might be a good way to go, but I still don’t see a way to specify which image to display next to each link. Will keep digging…

    @keesiemeijer I did check the screen options and the custom post type is set to support thumbnails. I’m using Custom Post Type UI plugin if that matters. I also checked on a regular post as well as a page and the box is not there either. There is no mention of it in the screen options.

    At the very top of functions.php I currently have this:

     * @package WordPress
     * @subpackage LOE_Theme
    $content_width = 450;
    add_theme_support( 'automatic-feed-links' );
    if ( function_exists( 'add_theme_support' ) ) {
      add_theme_support( 'post-thumbnails' );
    Moderator keesiemeijer



    I also checked on a regular post as well as a page and the box is not there either.

    This is not normal behaviour. Try deactivating all plugins to see if this resolves the problem. Or maybe your theme?

    Sorry, I just realized that I added the code to the new theme, which is not the active theme. I have now added it to the active theme and the metabox is there.

    It seems like grabbing the featured image, maybe combined with some CSS sprite code would be a good avenue to explore.

    Calling in the post thumbnail is nice & easy. Now I have to see about using CSS positioning on hover (aka sprite code). Thanks.

    Moderator keesiemeijer



    I see now that your posts have an individual id: <div class="homeblock" id="post-395">.

    You can do It all in CSS with a background image (example):

    .home #post-395 .hometitle a {
    background: url('images/image.png');
    .home #post-395 .hometitle a:hover {
    background: url('images/hover_image.png');

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Can you have a conditional link image?’ is closed to new replies.