Resolved How to call cover image in 3.1?

Code:

{{ 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.

Code:

    <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.

Code:

 <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>

 

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).

HTML:

<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>

 

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).

 

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).