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.

Implemented Cover Art overlay thumbnails.

Discussion in 'Showcase Closed Suggestions' started by Shelley, Oct 10, 2013.

  1. Shelley

    Shelley Member Showcase

    Hi Bob, :)

    I was just tinkering away doing a little more styling to the showcase and needed to change the cover art of various Items. I've probably overlooked something but on the chance I haven't would it be possible to define classes for the thumbnails when "setting cover art" from the overlay so we're able to make them bigger?

    As you can see they are quite small (below) and difficult to distinguish from one another so specifically being able to re-size that whether that be an option or having the ability to do it via EXTRA.css would be appreciated.

    I've probably missed something and it's very possible to do.

    As always thanks for the hard work your you've put into this product. :)

    Screenshot_19.png
     
  2. Shelley

    Shelley Member Showcase

    Actually, ignore that suggestion. I think I managed to accomplish this without this affecting other areas. Still looking around to check if other areas have been affected.
     
  3. Bob

    Bob Developer Staff Member

    I have the height and width static at 48x48, but I will certainly add a class so that can be easily changed via EXTRA.css For now, you can edit the template: nflj_showcase_item_set_cover_image and change the height and width attributes on the img tag..

    HTML:
    <img width="48" height="48" border="0" src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" />
    I'll modify the template as well to add in scrolling in case of wanting to use largish thumbs which would require vertical scrolling.
     
    Shelley likes this.
  4. Bob

    Bob Developer Staff Member

    I added two classes to the nflj_showcase_item_set_cover_image template as well as now include the nflj_showcase_item.css template. I also added the overlayScroll class to the forum as well (as you can see in the screen shot)

    The two new classes are named:
    • scCoverImageContainer
    • scCoverImageItem
    These classes are located in the nflj_showcase_item.css template and have the following default element params assigned to them.

    HTML:
    .scCoverImageContainer {}
    
        .scCoverImageContainer .scCoverImageItem
        {
            float:left;
            text-align:center;
            padding: 5px;  
        }
    
        .scCoverImageContainer .scCoverImageItem img
        {
            height:70px;
            width:100px  
        }
    This allows you to quickly change the thumbnail size you want for the Cover Image Overlay (either by directly editing the nflj_showcase_item.css template or adding the classes to EXTRA.css and making the changes there)

    Here is a screen shot of what you can do by simply editing the height and width of the .scCoverImageContainer .scCoverImageItem img class
    Selection_007.png
     
    Veer and Shelley like this.
  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.