Can you have a conditional link image?

  • Resolved Jonas Grumby

    (@ss_minnow)


    12 years, 12 months 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:

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

    TIA for any insights…

Viewing 8 replies - 16 through 23 (of 23 total)
  • Thread Starter Jonas Grumby

    (@ss_minnow)

    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!

    Moderator keesiemeijer

    (@keesiemeijer)

    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.

    Thread Starter Jonas Grumby

    (@ss_minnow)

    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">?

    Moderator keesiemeijer

    (@keesiemeijer)

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

    Thread Starter Jonas Grumby

    (@ss_minnow)

    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;}

    Thread Starter Jonas Grumby

    (@ss_minnow)

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

    Moderator keesiemeijer

    (@keesiemeijer)

    No problem, glad you got it working.

    Thread Starter Jonas Grumby

    (@ss_minnow)

    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.

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