[Resolved] Read More Link

Home Forums Support [Resolved] Read More Link

Home Forums Support Read More Link

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #238187
    Bobby

    Hi Tom,

    I trying to figure out how I can use an image instead of the “Read More” link. In other words, instead of the read mor link showing…a custom image would show.

    In my last theme, I used this code below to do this..

    <?php the_content('<img src="http://playerwags.com/wp-content/uploads/2014/07/read-more-logo23.png" alt="read more" />'); ?>

    Thanks

    #238197
    Tom
    Lead Developer
    Lead Developer

    You could do something like this:

    add_filter( 'excerpt_more','tu_image_read_more', 100 );
    add_filter( 'the_content_more_link','tu_image_read_more', 100 );
    function tu_image_read_more()
    {
        return '<img src="http://playerwags.com/wp-content/uploads/2014/07/read-more-logo23.png" alt="read more" />';
    }

    Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

    #238365
    Bobby

    Tom.

    That worked…you are the man. two more question, the read more image is not linked to the post and now its showing at a bigger size…not the original size because I have all “entry-content images” set to 100%. The reason I’m doing this is because all of the prior uploaded images in my existing blog are too small to fill the container’s width.

    How can I make the “red more image” link to the post and show its original size..but keep the content images at 100% width Hope this makes sense…

    Screenshot below

    http://playerwags.com/wp-content/uploads/2016/10/sample.png

    My CSS is currently set like this…

    .entry-content img {
    width: 100%;
    height: auto;

    Thanks,

    #238408
    Tom
    Lead Developer
    Lead Developer

    Try this:

    add_filter( 'excerpt_more','tu_image_read_more', 100 );
    add_filter( 'the_content_more_link','tu_image_read_more', 100 );
    function tu_image_read_more()
    {
        $link = get_permalink();
        $title = get_the_title();
        return '<a href="' . $link . '" title="' . $title . '"><img class="read-more-image" src="http://playerwags.com/wp-content/uploads/2014/07/read-more-logo23.png" alt="read more" /></a>';
    }

    Then add this CSS:

    .entry-content .read-more-image,
    .entry-summary .read-more-image {
        width: auto;
    }

    Hope this helps ๐Ÿ™‚

    #238474
    Bobby

    Hey Tom,

    That did the trick. Everything works great now. Thank you so much for your awesome customer service and support.

    Thanks.

    #238487
    Tom
    Lead Developer
    Lead Developer

    You’re very welcome ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.