WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Can you have a conditional link image? (24 posts)

  1. Jonas Grumby
    Member
    Posted 2 years ago #

    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:

    http://linesofexcellence.com/?theme=LOEv2

    TIA for any insights...

  2. Jonas Grumby
    Member
    Posted 2 years ago #

    BTW my current code is:

    <?php
    $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.

    Thanks

  3. keesiemeijer
    moderator
    Posted 2 years ago #

    Why not use Post Thumbnails?

  4. Jonas Grumby
    Member
    Posted 2 years ago #

    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...

  5. keesiemeijer
    moderator
    Posted 2 years ago #

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

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    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?

  7. Jonas Grumby
    Member
    Posted 2 years ago #

    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...

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    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/';
    $i=1;
    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;
    		$i++;
    	}
    }

    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.

  9. keesiemeijer
    moderator
    Posted 2 years ago #

    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')

  10. Jonas Grumby
    Member
    Posted 2 years ago #

    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...

  11. Jonas Grumby
    Member
    Posted 2 years ago #

    @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.

  12. Jonas Grumby
    Member
    Posted 2 years ago #

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

    <?php
    /**
     * @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' );
    }
  13. keesiemeijer
    moderator
    Posted 2 years ago #

    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?

  14. Jonas Grumby
    Member
    Posted 2 years ago #

    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.

  15. Jonas Grumby
    Member
    Posted 2 years ago #

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

  16. keesiemeijer
    moderator
    Posted 2 years ago #

    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');
    }
  17. Jonas Grumby
    Member
    Posted 2 years ago #

    That seems easy enough. Thanks!

    I guess I can also use

    background-position:right;
    background-repeat:no-repeat;

    Good to have the Featured Image working anyway!

  18. keesiemeijer
    moderator
    Posted 2 years ago #

    I guess I can also use...

    Yes, of course you can use that. It was just a simple example.

    The id's are #post-395, #post-397 and #post-399.

  19. Jonas Grumby
    Member
    Posted 2 years ago #

    Thanks. It works fine except that the anchor tag is not as wide as the parent div, so I can't get the image to align to the right. Any ideas?

    Would it help to move id="post-<?php the_ID(); ?>" to <div class="hometitle">?

  20. keesiemeijer
    moderator
    Posted 2 years ago #

    Try it with this: http://pastebin.com/cUyrZKnf

  21. Jonas Grumby
    Member
    Posted 2 years ago #

    Got it...

    .home #post-395 .hometitle a {
    display: block;
    background: url('images/home-puzzle.jpg');
    background-position:right;
    background-repeat:no-repeat;}
    .home #post-395 .hometitle a:hover {
    background: url('images/home-puzzle-color.jpg');
    background-position:right;
    background-repeat:no-repeat;}
  22. Jonas Grumby
    Member
    Posted 2 years ago #

    @keesiemeijer Thanks for posting that! I figured it out at about the same time.

  23. keesiemeijer
    moderator
    Posted 2 years ago #

    No problem, glad you got it working.

  24. Jonas Grumby
    Member
    Posted 2 years ago #

    Thanks. The only limitation seems to be that if I don't pick a large enough font the top & bottom of the background image get cut off. Maybe putting some padding around the anchor would compensate for that. I'll play around with it.

Topic Closed

This topic has been closed to new replies.

About this Topic