Implemented Cover Art overlay thumbnails.

[Shelley]

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.

 

[Shelley]

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.

 

[Bob]

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

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

 

[Bob]

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.

.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