• REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to 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.

Showcase Slider Image Size and Border Padding

Mattie Num Nums

New Member
Showcase
How do you control the image size and padding on the image slider? I'd like a smaller thumbnail and less border padding.
 
How do you control the image size and padding on the image slider? I'd like a smaller thumbnail and less border padding.

It is a combo of Javascript variables and CSS and there isn't just ONE place you can edit that controls them all (for very specific reasons).

So for example, if you are wanting to change it on the Showcase Index page, you will have to edit the template: nflj_showcase_index

Look for this block of code...
HTML:
<xen:if is="{$featuredItems}">
    <xen:require css="nflj_showcase_item_layout_modular.css" />
    <xen:require css="nflj_showcase_bxslider.css" />
    <xen:require js="js/nflj/showcase/jquery.resizecrop-1.0.3.min.js" />
    <xen:require js="js/nflj/showcase/jquery.bxslider.min.js" />   
    <script type="text/javascript">
        $(document).ready(function(){
            $('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
                width:200,
                height:150,
                vertical:"middle"
            });
           
            $('.sliderScFI').bxSlider({
                slideWidth: 234,
                minSlides: 1,
                maxSlides: 8,
                slideMargin: 10,
                pager: false
            });
        });
    </script>

    <xen:include template="nflj_showcase_module_items">
        <xen:map from="$featuredItems" to="$items" />
        <xen:set var="$sliderClass">sliderScFI</xen:set>
        <xen:set var="$moduleTitle">{xen:if $xenOptions.scFIIndexShowModuleTitle, '{xen:phrase nflj_showcase_featured}', ''}</xen:set>
        <xen:set var="$showTitle" value="{xen:if $xenOptions.scFIIndexShowTitle, 'true', ''}" />
        <xen:set var="$showDescription" value="{xen:if $xenOptions.scFIIndexShowDescription, 'true', ''}" />
        <xen:set var="$showRating" value="{xen:if $xenOptions.scFIIndexShowRating, 'true', ''}" />
    </xen:include>
</xen:if>

You will see that there are a width and a height setting that are sent to the resizecrop js. (width: 200 height:150). That is only one of the things you need to change. You'll also notice that just below that, there is a slideWidth:234 setting. This also comes into play.

There are also CSS elements within both of these CSS files that also come into play.
nflj_showcase_item_layout_modular.css
nflj_showcase_bxslider.css

Its not a SIMPLE process at the moment. Its definitely something that is on the chopping block to be replaced with a much more flexible system.
 
Its not a SIMPLE process at the moment. Its definitely something that is on the chopping block to be replaced with a much more flexible system.

Checking in to see if this is still the only / best way to change the size of images on the showcase slider on our homepage? Right now they are coming in at 254x254 and ideally we'd like them to be 160x160 and also have more of them show up in the same amount of space. (hopefully that makes sense)?

(ETA: Sorry, I'm using CTA for our homepage)
 
Nothing has changed and making modifications will effect ALL of the sliders, not just Showcase Home Slider. Changing the size of the image requires A LOT of modification.
 
Back
Top