How to replace a post title with an image

  • Resolved sisterdawn477901822

    (@sisterdawn477901822)


    12 years, 8 months ago

    Hi all,

    I would like to replace a post title for an image (note: not the blog title).

    I’m having problems achieving this and can’t find anything on the forums for this specific scenario.

    I have managed to suppress the post title, however I cannot figure out how to insert the image into the ‘title’ area of the post. So for the meantime I have inserted the image into the main body of the post, however this isn’t ideal, as the image actually has the post title in it.

    The url for the post in question is:
    https://sketchofshanghai.net/harbin/

    I’m using the ‘Imbalance 2’ theme by WPSHOWER.

    Any thoughts? Many thanks.

Viewing 8 replies - 1 through 8 (of 8 total)

  • in your page.php and single.php find a line that display’s the title of a post ‘the_title()’, and change it to <img src=”PathToYourImage.png” alt=””>

    Thread Starter sisterdawn477901822

    (@sisterdawn477901822)

    Hi Zex, thanks for your response. I think this would change every post title to be the image however, wouldn’t it?

    It’s just one isolated post that I want to change the title to an image for. Sorry I didn’t specify that.

    popper

    (@julialasarte)

    You could set the “title image” as the featured image of the post and then replace the_title() for:

    <?php
    if ( has_post_thumbnail() ) {
    // check if the post has a Post Thumbnail (featured image) assigned to it.
        the_post_thumbnail();
    } else {
        the_title();
    }
?>
    Thread Starter sisterdawn477901822

    (@sisterdawn477901822)

    Hi Popper, thanks for your response! However I prefer not to use this ‘title image’ as the featured image, as it won’t look good in the thumbnail on the home page.

    Any other ideas?

    Is it possible to specify in the style.css to insert an image there? This is where I put the code to suppress the post title. My attempt to incorporate the image was:
    .postid-5 .entry-title { display: none; background: url(https://sketchofshanghai.net/wp-content/themes/imbalance2/images/harbin_title_edit2.gif) no-repeat; }

    but it didn’t work (of course! I have no idea what I’m doing)

    .postid-5 .entry-title {
    background: url(“https://sketchofshanghai.net/wp-content/themes/imbalance2/images/harbin_title_edit2.gif&#8221;) no-repeat scroll 0 0 transparent !important;
    height: 221px;
    }

    small adjustment to your idea:

    .postid-5 .entry-title { display:block; text-indent:-9999px; background: url(https://sketchofshanghai.net/wp-content/themes/imbalance2/images/harbin_title_edit2.gif) no-repeat; height:260px; width:100%; }

    i.e. set a fixed height; set it to display: block; and use text-indent to push the text off the screen

    Thread Starter sisterdawn477901822

    (@sisterdawn477901822)

    that worked! thank you both!!

    Hi sisterdawn477901822

    I notice on your website you managed to put a logo instead of blog title.

    Actually I want to keep my title but i want to put some small social network icons beneath it.

    do you have any idea?
    I looked all everywhere including wpshower forum which is actually full of spam.

    PS: i’m a noob

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to replace a post title with an image’ is closed to new replies.