1. REGISTRATION REQUIREMENTS:

    Register with your xenforo.com Username then start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Resolved How to call cover image in 3.1?

Discussion in 'Showcase Support' started by Ludachris, Aug 7, 2019.

  1. Ludachris

    Ludachris Active Member AMS Premium Showcase Premium

    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?
     
  2. Bob

    Bob Developer Staff Member

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

    Ludachris Active Member AMS Premium Showcase Premium

    That helps. Thanks again Bob.
     
  4. Ludachris

    Ludachris Active Member AMS Premium Showcase Premium

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

    Bob Developer Staff Member

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

    Ludachris Active Member AMS Premium Showcase Premium

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

    Bob Developer Staff Member

    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 likes this.
  8. Ludachris

    Ludachris Active Member AMS Premium Showcase Premium

    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.
     
    Last edited: Aug 8, 2019
  9. Bob

    Bob Developer Staff Member

    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).
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.