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

Discussion in 'Showcase Support' started by Mattie Num Nums, Feb 4, 2015.

  1. Mattie Num Nums

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

    Bob Developer Staff Member

    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...
    <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">
                $('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
                    slideWidth: 234,
                    minSlides: 1,
                    maxSlides: 8,
                    slideMargin: 10,
                    pager: false
        <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', ''}" />
    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.

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

    Market1234 Member Showcase

    how can we change the showcase sidebar main image size
  4. Bob

    Bob Developer Staff Member

  5. ProWeb

    ProWeb New Member AMS Premium CAS Premium RMS Premium SC Premium UBS Premium

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

    Bob Developer Staff Member

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

    ProWeb New Member AMS Premium CAS Premium RMS Premium SC Premium UBS Premium

    Ok, thanks for the quick reply.
  8. Bob

    Bob Developer Staff Member

    HINT: You are an EA license holder. You are paying for Advanced Support and are wasting it by posting here where you are only going to get BASIC support responses.
    ProWeb likes 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.