[Resolved] Add image with month and day left of post title

Home Forums Support Add image with month and day left of post title

  • This topic has 3 replies, 2 voices, and was last updated 4 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1299792
    mikeb82

    I’m prototyping a new client website and have run into an issue with incorporating WP ShowPosts into the website while meeting one of the client’s requirements. As the WP ShowPosts forum doesn’t have much traffic, I thought I’d start here.

    The existing website is built with DNN (yes, there are still some DotNetNuke websites around) and has an image incorporating the client’s logo along with the month and date left of the title for each post. I have replicated this with the code below. Actually, I improved on it.

    This formatting is shown in NEWS/RESOURCES > NEWS & EVENTS, which is set as the “Posts” page.

    The page, NEWS/RESOURCES > ARTICLES is a WP ShowPosts feed. It loses the formatting adding the image (along with month and day) left of the post title. I welcome suggestions on how to do this with WP ShowPosts. Rather than spending many hours trying to figure out what to target in WP ShowPosts I came to the source.

    THANKS!

    The CSS added to style.css of the GeneratePress child theme:

    /* Calendar icon for posts     */
    
    .calendaricon {
        float: left;
        background: #fff;
        margin-right: .75em;
        margin-left: -1em;
        height: 90px;
        width: 143px;
    }
    
    .month {
        color: #b44401;
        font-family: Georgia,serif;
        font-size: 26px;
        font-weight: bold;
        text-shadow: 1px 1px #000;
        text-align: center;
        margin-top: -3.9em;
        text-transform: uppercase;
    }
    
    .day {
        padding-top: 14px;
        width: 35px;
        color: #fff !important;
        font-family: Arial, sans-serif;
        font-weight: 500;
        text-shadow: 1px 2px #000065;
        font-size: 24px;
        text-align: center;
        padding-left:17px;
    }
    
    .inside-article .entry-header .entry-title  {
        font-size: 26px !important;
        line-height: 1;
        color: #b44401;
        font-weight: 500;
        text-shadow: 1px 1px #000065;
    }

    Added to functions.php:

    /* CALENDAR DATE ICON */
    function calendar (){ ?>
    <div class="calendaricon">
    <? echo '<img src="https://myimage_url.com/wp-content/uploads/2020/05/cal_w_logo_starfleet.png" />'; ?>
    <div class="month"><? the_time('M') ?></div>
    <div class="day"><? the_time('j') ?></div>
    </div>
    <?
    }
    add_action('generate_before_entry_title', 'calendar');
    #1300814
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m quite active in our WP Show Posts forum during the week. This question is best asked there.

    The first thing I would do is add your hooked content into WPSP, as it’s only added in GP right now. Try the wpsp_before_title hook.

    #1300844
    mikeb82

    Thanks Tom!

    Adding the wpsp_before_title hook works perfectly. I knew it was probably something simple but I’m not familiar with the WP ShowPosts hooks. I’ll start posting related questions to the WP ShowPosts forum

    WP ShowPosts is a great plugin, especially when used in GeneratePress (a great theme).

    Thanks again,
    Mike

    #1301237
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad I could help 🙂

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