Pinned Post Module Featured Image Not Working

[brentswashburn]

Hey Hubspotters, 

I'm designing a post listening module for use on a pillar page, similar to the way HubSpot's pillar pages are built, but I'm not able to get the featured image to feed in. Also, any idea how to make it pull from a blog tag instead of having the entry be manual? 

Here's my snippet: (I've used this before with no issues)

<div class="script">
<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url: '{{ widget.enter_url_for_first_pinned_post }}',
        dataType: 'html',
        success: function(post) {
            $('.pinnedOneTitle').html($(post).find('#hs_cos_wrapper_name').html());
            $('.pinnedOneDate').html($(post).find('.publishedDate').html());
            $('.pinnedOneFeatImage').html($(post).find('.post-featured-image').html());            
        },
        complete: function(){
            console.log("Pinned Post One Loaded.");
        }
    });
    $.ajax({
        url: '{{ widget.enter_url_for_second_pinned_post }}',
        dataType: 'html',
        success: function(post) {
            $('.pinnedTwoTitle').html($(post).find('#hs_cos_wrapper_name').html());
            $('.pinnedTwoDate').html($(post).find('.publishedDate').html());
            $('.pinnedTwoFeatImage').html($(post).find('.post-featured-image').html());            
        },
        complete: function(){
            console.log("Pinned Post Two Loaded.");
        }
    });
    $.ajax({
        url: '{{ widget.enter_url_for_third_pinned_post }}',
        dataType: 'html',
        success: function(post) {
            $('.pinnedThreeTitle').html($(post).find('#hs_cos_wrapper_name').html());
            $('.pinnedThreeDate').html($(post).find('.publishedDate').html());
            $('.pinnedThreeFeatImage').html($(post).find('.post-featured-image').html());            
        },
        complete: function(){
            console.log("Pinned Post Three Loaded.");
        }
    });
});
</script>
</div>
<div class="featured-posts">
<h3 style="letter-spacing: 1px;text-align:center;">You Might Be Interested In . . .</h3>
<hr>
<div class="media-pinned">
    <div style="width: 90%; margin: 0 auto;">
    <div class="bd">
        <div class="img pinnedOneFeatImage"></div>
        <span class="date pinnedOneDate">&nbsp;</span>
        <div class="post-header"><h3><a class="pinnedOneTitle" href="{{ widget.enter_url_for_first_pinned_post }}">&nbsp;</a></h3></div>
    </div>
    <div class="bd">
        <div class="img pinnedTwoFeatImage">&nbsp;</div>
        <span class="date pinnedTwoDate">&nbsp;</span>
        <div class="post-header"><h3><a class="pinnedTwoTitle" href="{{ widget.enter_url_for_second_pinned_post }}">&nbsp;</a></h3></div>
    </div>
    <div class="bd">
        <div class="img pinnedThreeFeatImage">&nbsp;</div>
        <span class="date pinnedThreeDate">&nbsp;</span>
        <div class="post-header"><h3><a class="pinnedThreeTitle" href="{{ widget.enter_url_for_third_pinned_post }}">&nbsp;</a></h3></div>
    </div>
    </div>
</div>

[brentswashburn · Accepted solution]

Pretty easy fix actually, I forgot that my JS was pulling the image from the class on the Div, so on this client's blog I wasn't use .post-featured-image as a class. I actually ended up adding a snippet using the Hubl {{ content.post_list_summary_featured_image }} to automatically pull in the pictures like I wanted. This is better because it's not reliant on what class I'm using. For anyone wanting to use that snippet, I simply added:

<div class="post-featured-image"><img src="{{ content.post_list_summary_featured_image }}"></div>

To my post template. The same will need to be done for the date field, but I've decided not to use the date in this instance. 

[ndwilliams3]

without seeing the page, I'm assuming that you are using a text module for the image url based on seeing this:

{{ widget.enter_url_for_first_pinned_post }}

 if export_to_template_context is TRUE you need to use:

{{ widget_data.enter_url_for_first_pinned_post.value }}

[TRooInbound]

Hi @brentswashburn,

Can you please provide post page url which help us to dig out actual issue, as currently by seeing your code we can't figure out actual issue. And we want to know what type of tag used for post-featured-image class.

Team TRooInbound!