Resolved How to call cover image in 3.1?

[Ludachris]

I see "{{ sc_item_thumbnail($item) }}" referenced in some templates to display the small cover photo thumbnail, for the featured widget for example. What would be used to call a larger size cover photo?

 

[Bob]

{{ link('showcase/cover-image', $item) }}

Before using either, you should be checking via a conditional to see whether the item has a cover image set or not as well as put the image inside some kind of container to manage its size eg,

This is what is on the sc_item_view template that display the full size cover image above the item IF there is a cover image AND if the option to display the cover image is set.

    <xf:if is="$item.cover_image_id && $xf.options.xaScCoverImageOnOverview">
        <div class="scCoverImage">
            <div class="scCoverImage-container">
                <div class="scCoverImage-container-image js-coverImageContainerImage">
                    <img src="{{ link('showcase/cover-image', $item) }}" class="js-itemCoverImage" />
                </div>
            </div>
        </div>
    </xf:if>

Here is another example of using the full size cover image. This one is used for the Featured Grid.

 <a class="image-link" style="background: url({{ link('showcase/cover-image', $item) }}) no-repeat center center transparent; background-size: cover;" href="{{ link('showcase', $item) }}"></a>

 

[Ludachris]

That helps. Thanks again Bob.

 

[Ludachris]

One issue I'm having now - the container for the widget (in the sidebar) is not stretching to the full height, it's still displaying the same height as if the thumbnail is being displayed, so it cuts off the content. If I go to Inspect it in the browser tools, it immediately changes to show the full height. I can PM you a link to check it out.

 

[Bob]

You can't cut and paste the above example into the sidebar. Its designed (the CSS) for displaying above the item and has some very specific HEIGHT handling CSS for that area.

This is an example of how to do a proper sidebar block and how to display the cover image in that block. This will display the cover image in its exact dimensions (scaled down to fit the width of the sidebar).

<xf:if is="$item.cover_image_id">
    <xf:sidebar key="scCoverImageSidebar">
        <div class="block">
            <div class="block-container">
                <div class="block-body block-row">
                    <div class="item-container-image js-itemContainerImage">
                        <img src="{{ link('showcase/cover-image', $item, {'d': $item.last_edit_date ?: null}) }}" class="js-itemImage" />
                    </div>
                </div>
            </div>
        </div>
    </xf:sidebar>
</xf:if>

 

[Ludachris]

You can't cut and paste the above example into the sidebar. Its designed (the CSS) for displaying above the item and has some very specific HEIGHT handling CSS for that area.

This is an example of how to do a proper sidebar block and how to display the cover image in that block. This will display the cover image in its exact dimensions (scaled down to fit the width of the sidebar).

<xf:if is="$item.cover_image_id">
    <xf:sidebar key="scCoverImageSidebar">
        <div class="block">
            <div class="block-container">
                <div class="block-body block-row">
                    <div class="item-container-image js-itemContainerImage">
                        <img src="{{ link('showcase/cover-image', $item, {'d': $item.last_edit_date ?: null}) }}" class="js-itemImage" />
                    </div>
                </div>
            </div>
        </div>
    </xf:sidebar>
</xf:if>

Gotcha. And is that in the "xa_sc_index_macros" template? That's where I had made the changes. Wondering if I did it in the wrong place.

 

[Bob]

Gotcha. And is that in the "xa_sc_index_macros" template? That's where I had made the changes. Wondering if I did it in the wrong place.

No, the xa_sc_index_macro's contains various macros for use on Showcase INDEX PAGE and Showcase Category Pages (and in certain Widget Definitions for displaying featured content in main content areas).

You are asking about displaying the cover image of the showcase item in the showcase item sidebar, so you need to be adding that sidebar block to the xa_sc_item_view template (all the sidebar blocks are towards the end of the template).

 

[Ludachris]

Well, actually, I'm trying to do this in the featured item carousel widget in the sidebar, in SC and in the forums. I think I failed to mention that. That's likely why I'm having the issue. I'll change it up.

 

[Bob]

The Featured Items Carousel is designed for displaying content in Full Width Content Areas (like above the Forum List on Forum Home or above the Items list on Showcase Home/Category pages. Its not designed to be used in the sidebar as that would require different output specific for use in the sidebar).

Also, the layout for the featured carousel is designed to use a small thumbnail, so you can't just edit the macro and replace the template helper that displays the thumbnail, with the full size cover image. You'd have to do a bunch of design tweaks (basically redesign it).