Adding text overlay to BX slider

[graphicz]

This shouldn't be difficult, if you add a div to the promotional entry the text will overlay the image and can be styled to taste. Problem is if you use a new variable (ItemText1) it doesn't display in the Standard Promotional List Entry. If you use the Fragment title it does display:

<div class="Slider"><a href="<actinic:variable name="ItemLink" selectable="false" />"><img src="<actinic:variable name="ItemImage" selectable="false" />"/><div class="bannerDetail"><actinic:variable encoding="actinic" name="ItemText1" /></div></a></div>

I was going to blockif a sequence of itemtext variables with listcount -- but I cannot get the variable to display. Can anyone please offer some advice?

Thank you

[graphicz]

OK. Here is the solution. Firstly the overlay div is .bx-wrapper .bx-caption and .bx-wrapper .bx-caption span, the styles are at the bottom of the jquery.bxslider.css stylesheet. I suggest commenting them out and copying them into the bottom of the 'current stylesheet' so they are easier to edit and will overwrite as they are at the bottom.

Here are my styles:

/* IMAGE CAPTIONS  */
.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 10%;
    left: 7%;
    width:85%;
    background: #666\3;
    background: rgba(80, 80, 80, 0.25);
}

.bx-wrapper .bx-caption span {
    color: #000;
    font-family: Arial;
    display: block;
    font-size: 2em;
    padding: 10px;
    text-align:center;
    text-shadow: 2px 2px #ffffff;
}

Now it got a little challenging.

I made nine variables - ItemText01 to ItemText09. You can make more or less as you wish adjusting the following as required.


Strangely you have to close and reopen the software for them to appear in the Marketing Box of the Promotional Carousel dialogue.



In the Promotional Carousel Layout click the Orange Text to open the List Layout Settings then click 'edit' to open the dvanced editor.#Under the closing </script> tag paste the following:

<actinic:block php="true">
$text1 = '<actinic:variable encoding="perl" name="ItemText01" selectable="false" />';
$text2 = '<actinic:variable encoding="perl" name="ItemText02" selectable="false" />';
$text3 = '<actinic:variable encoding="perl" name="ItemText03" selectable="false" />';
$text4 = '<actinic:variable encoding="perl" name="ItemText04" selectable="false" />';
$text5 = '<actinic:variable encoding="perl" name="ItemText05" selectable="false" />';
$text6 = '<actinic:variable encoding="perl" name="ItemText06" selectable="false" />';
$text7 = '<actinic:variable encoding="perl" name="ItemText07" selectable="false" />';
$text8 = '<actinic:variable encoding="perl" name="ItemText08" selectable="false" />';
$text9 = '<actinic:variable encoding="perl" name="ItemText09" selectable="false" />';
</actinic:block>

OK and OK to close.

Open the Standard Promotional List Entry Layout, back it up first if you wish, it looks like this

<div class="Slider"><a href="<actinic:variable name="ItemLink" selectable="false" />"><img src="<actinic:variable name="ItemImage" selectable="false" />"/></a></div>

Delete that and paste this:

<a href="<actinic:variable name="ItemLink" selectable="false" />"><img src="<actinic:variable name="ItemImage" selectable="false" />"/>
<actinic:block php="true">
    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201" >
    if (!empty($text1)) {
    echo '<div class="bx-caption"><span>' . $text1 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%202" >
    if (!empty($text2)) {
    echo '<div class="bx-caption"><span>' . $text2 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%203" >
    if (!empty($text3)) {
    echo '<div class="bx-caption"><span>' . $text3 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%204%20OR%20%3cactinic%3avariable%20name%3d%22ItemText04%22%20%2f%3e%20%21%3d%20%22%22" >
    if (!empty($text4)) {
    echo '<div class="bx-caption"><span>' . $text4 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%205%20OR%20%3cactinic%3avariable%20name%3d%22ItemText05%22%20%2f%3e%20%21%3d%20%22%22" >
    if (!empty($text5)) {
    echo '<div class="bx-caption"><span>' . $text5 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%206%20OR%20%3cactinic%3avariable%20name%3d%22ItemText06%22%20%2f%3e%20%21%3d%20%22%22" >
    if (!empty($text6)) {
    echo '<div class="bx-caption"><span>' . $text6 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%207%20OR%20%3cactinic%3avariable%20name%3d%22ItemText07%22%20%2f%3e%20%21%3d%20%22%22" >
    if (!empty($text7)) {
    echo '<div class="bx-caption"><span>' . $text7 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%208%20OR%20%3cactinic%3avariable%20name%3d%22ItemText08%22%20%2f%3e%20%21%3d%20%22%22" >
    if (!empty($text8)) {
    echo '<div class="bx-caption"><span>' . $text8 . '</span></div>';
    }
    </actinic:block>

    <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%209%20OR%20%3cactinic%3avariable%20name%3d%22ItemText09%22%20%2f%3e%20%21%3d%20%22%22" >
    if (!empty($text9)) {
    echo '<div class="bx-caption"><span>' . $text9 . '</span></div>';
    }
    </actinic:block>
</actinic:block>
</a>

And it will work.

https://www.graphicz.solutions/bxslider/

[Hugh Gibson]

Hi Jonathan,

Just spent some time looking at the support ticket you raised. Using PHP is one solution, but it's easier if you note that the rendering within the Promotional List Entry is done in the context of the target item. So for example on https://www.hedgesdirect.co.uk/ the home page carousel links to 4 sections. The Title and Text shown in the overlay is defined using variables in the corresponding sections. The same should work for products.

Hugh

[graphicz]

Hi Hugh

It may well be easy when you know how but I am trying to make it easy for clients with basic knowledge.

Having Text 1-9 or whatever in the same dialogue as the images and links 1-9 or whatever seems to me to be more intuitive than setting item three's text on the product details dialogue of the item 3 link to a product and the item four's text in the section details of the item 4 link to a section or whatever.
And what when the items are Image with a hand made link, where would the text be set then?

Nice site by the way - really useful reference to have it linked from here, thank you.

Thanks

Jonathan

[rookers]

HI, reading this thread with interest. I read Jonathan's answer and all looks good, but I am confused however - is Hugh saying the functionality to do this is already built in? It was not clear from the answer what the actual PHP solution was.

[graphicz]

The functionality is built in within the bx-slider js and css but it is not built in to Sellerdeck. What Hugh is saying is that if you add a caption using a new variable:

Standard Promotional List Entry

<div class="Slider"><a href="<actinic:variable name="ItemLink" selectable="false" />"><img src="<actinic:variable name="ItemImage" selectable="false" />"/><div class="bx-caption"><span><actinic:variable encoding="actinic" name="MyNewVariable" /></span></div></a></div>

The 'MyNewVariable' variable has to have a place of setting at product and section level as well as fragment.

If Item 1 of the slider goes to the Three Diamond Ring product, then the 'MyNewVariable' variable has to be given its value in the Three Diamond Ring product dialogue NOT in the marketing dialogue of the Carousel.

You can get styling and coding ideas right clicking and inspecting element in Firefox on the link Hugh kindly supplied.

[rookers]

I get it - nice one.

[graphicz]

While we are at it, you can automatically select if product name / description or section name / description shows depending on which item type is selected in the drop down choice in the marketing promotional carousel fragment dialogue.
<actinic:variable name="ItemType" /> is a numeric value = '1' for section, = '2' for image and = '0' for product, so you can make the following your promotional list entry. If you want to add choices for using an image as well it would be easy enough to adapt.

<div class="Slider"><a href="<actinic:variable name="ItemLink" selectable="false" />"><img src="<actinic:variable name="ItemImage" selectable="false" />"/></a>
<div class="bx-caption"><h2><actinic:block if="%3cactinic%3avariable%20name%3d%22ItemType%22%20%2f%3e%20%3d%3d%20%271%27" ><actinic:variable name="SectionName" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ItemType%22%20%2f%3e%20%3d%3d%20%270%27"><actinic:variable name="ProductName" /></actinic:block></h2>
<p class="desktop"><actinic:block if="%3cactinic%3avariable%20name%3d%22ItemType%22%20%2f%3e%20%3d%3d%20%271%27" ><actinic:variable name="SectionDescription" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ItemType%22%20%2f%3e%20%3d%3d%20%270%27"><actinic:variable name="ProductDescription" /></actinic:block></p>
<a href="<actinic:variable name="ItemLink" selectable="false" />"><span>Shop Now</span></a></div>
<br class="clearfloat" />
</div>

[graphicz]

And finally...

Out of the box BX Slider is responsive for one image, however I have trouble making it properly responsive when using multiple images (2-4 say when showing products or best sellers for example).

They respond but are scrunched up.

Ideally if using three images you want two to show between 460 and 768 and one below 460 with no pager.

The solution is to swap the jquery.bxslider.js (and/or .min) with the version produced by Rahisify - (https://github.com/Rahisify/bxslider-4 and http://www.arnique.net/demos/plugins...hisified/demo/)

It is a straight swap and the slider in SD will work exactly as expected, but you add a couple of lines to the javascript call to tell the slider to reload if the viewport changes and to tell it how many slides per viewport:

<script language="javascript" type="text/javascript">
    var scripts = document.getElementsByTagName('script');
    (function()
        {
        var oThisScript = scripts[scripts.length - 1];

        $(document).ready(function(){
            var oDivBXSlider = $(oThisScript).next().children().first();

            oDivBXSlider.data('sd_BXSlider', oDivBXSlider.bxSlider({
                minSlides     : <actinic:variable name="CarouselSlides" />,
                moveSlides   : <actinic:variable name="CarouselMovingSlides" />,
                maxSlides    : <actinic:variable name="CarouselMaxSlides" />,      
                slideWidth    : <actinic:variable name="CarouselSlideWidth" />,
                auto             : <actinic:variable name="SliderAuto" />,
                autoHover     : <actinic:variable name="SliderPauseOnHover" />,
                pause          : <actinic:variable name="SliderDwellms" />,
                mode           : '<actinic:variable name="SliderTransition" />',
                slideMargin  : 5,
                autoReload  : true,
                breaks: [{screen:0, slides:1, pager:false},{screen:460, slides:2, pager:false},{screen:768, slides:3, pager:true}]

              }));
        });}
    ());
</script>

[graphicz]

Just one more thing...

You can have multiple sliders on the same page as each is identified by the Fragment anchor suffix to the class bxSlider.

You can have them display differently by copying the basic layout and adapting it.

Three things need copying and changing for each new carousel/slider:

1. The Fragment Layout
2. The Promotional List (Promotional Carousel)
3. The Promotional List Entry

Say you want to show some 'recommended' products

1. Copy the Promo List Carousel Fragment and call it Promo List Carousel Product Summaries
2. Copy the Promotional Carousel Layout and call it Promotional Carousel Product Summaries Layout
3. Copy the Standard Promotional List Entry and call it Standard Promotional List Entry Product Summaries

Create a new fragment called 'Recommended', in layout choose the Promo List Carousel Product Summaries Layout
In marketing tick the box and select some products maybe 9.

The Promo List Carousel Product Summaries Fragment contains the Promotional Carousel Product Summaries Layout.
Here instead of using the site wide variables you can give this slider its own settings as you wish:

<script language="javascript" type="text/javascript">
    var scripts = document.getElementsByTagName('script');
    (function()
        {
        var oThisScript = scripts[scripts.length - 1];

        $(document).ready(function(){
            var oDivBXSlider = $(oThisScript).next().children().first();

            oDivBXSlider.data('sd_BXSlider', oDivBXSlider.bxSlider({
                minSlides     : 2,
                moveSlides   : 2,
                maxSlides    : 2,      
                slideWidth    : <actinic:variable name="CarouselSlideWidth" />,
                auto             : <actinic:variable name="SliderAuto" />,
                autoHover     : <actinic:variable name="SliderPauseOnHover" />,
                pause          : <actinic:variable name="SliderDwellms" />,
                mode           : '<actinic:variable name="SliderTransition" />',
                slideMargin  : 5,
                autoReload  : true,
                breaks: [{screen:0, slides:1, pager:false},{screen:460, slides:2, pager:false}]

              }));
        });}
    ());
</script>
<div class="sidebar">
<div class="bxSlider<actinic:variable name="FragmentID" />">

The Promotional Carousel Product Summaries Layout contains the Standard Promotional List Entry Product Summaries Layout.
In this layout, instead of the default

<div class="Slider"><a href="<actinic:variable name="ItemLink" selectable="false" />"><img src="<actinic:variable name="ItemImage" selectable="false" />"/></a></div>

try adding

<div class="Slider centred">
<a name="<actinic:variable name="EncodedProductAnchor" />"></a>
<p><a href="<actinic:variable name="ProductPageName" />">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22" >
   <img src="<actinic:variable name="ProductImageFileName" />"
      border="0"
      title="<actinic:variable name="ProductName" encoding="strip"/>"
      alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%3d%3d%20%22%22" >
   <img src="<actinic:variable name="DefaultProductImage" />"
      border="0"
      title="<actinic:variable name="ProductName" encoding="strip"/>"
      alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>
</p>
<a href="<actinic:variable name="ProductPageName" />">
    <actinic:variable formatting="h2" encoding="actinic" name="ProductName" />
</a>    
    <actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e" >
        <p class="product-price"><strong>
            <Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />">
            <actinic:variable name="PriceListRetail" />
            </Actinic:PRICES>
            <actinic:variable name="DynamicPrice" />
        </strong></p>
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False" >
        <p class="product-price"><strong>
            <Actinic:NOTINB2B><br><actinic:variable name="ProductPriceNotEnabledMessage" /></Actinic:NOTINB2B>
        </strong></p>
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e" >
        <p class="product-price"><strong>
            <Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable name="ProductID" />" COMPONENTID=-1><actinic:variable name="RetailCustomerMessage" /></Actinic:PRICE_EXPLANATION>
        </strong></p>
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
        <p class="product-text">Ref: <actinic:variable name="ProductReference" /></p>
    </actinic:block>

<a class="moreoftheinfo" href="<actinic:variable name="ProductPageName" />">
    More Info
</a>

</div>

The class centred by the way is this:

.centred, .centred div, centred img, centred p {
margin: 0 auto;
text-align:center;
}

The class moreoftheinfo is this:

.moreoftheinfo {
    background-color: <actinic:variable name="Palette2" />;
    border: none;
    color: <actinic:variable name="BGColor" />;
    padding: 15px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width:auto;
}
a.moreoftheinfo {    color: <actinic:variable name="BGColor" />!Important; }

You now have a slider of products each in a product summary layout.

You can do the same with best sellers, except you need to copy a best sellers layout and use that to become the promotional carousel for best sellers: Call it Best Sellers List Slider:

In the layout pane you have:
Click here to edit list layout settings
And under it paste:

<div class="Slider centred bslcarouselentry">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22" >
    <div class="bestSellerImage">
        <a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductID" />&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >&amp;SHOP=<actinic:variable name="ShopID" /></actinic:block>">
        <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22" >
        <img src="<actinic:variable name="ProductImageFileName" />" border="0" title="<actinic:variable name="ProductName" encoding="strip"/>" alt="<actinic:variable name="ProductName" encoding="strip"/>" />
        </actinic:block>
        <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%3d%3d%20%22%22" >
        <img src="<actinic:variable name="DefaultProductImage" />" border="0" title="<actinic:variable name="ProductName" encoding="strip"/>" alt="<actinic:variable name="ProductName" encoding="strip"/>" />
        </actinic:block>
        </a>
    </div>
</actinic:block>
<h3><a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductID" />&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >&amp;SHOP=<actinic:variable name="ShopID" /></actinic:block>"><actinic:variable name="ProductName" /></a></h3>
    <Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />">
        <actinic:variable name="PriceListRetail" value="Marketing Price List" />
    </Actinic:PRICES>

<a class="moreoftheinfo" href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductID" />&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >&amp;SHOP=<actinic:variable name="ShopID" /></actinic:block>">
    More Info
</a>
</div>

And when you edit the list layout settings:

<style>
.bx-wrapper {
    margin-right: -1em;
    }
.bslcarouselentry span.product-price {
padding-right:1.5em;
}
</style>
<script language="javascript" type="text/javascript">
    var scripts = document.getElementsByTagName('script');
    (function()
        {
        var oThisScript = scripts[scripts.length - 1];

        $(document).ready(function(){
            var oDivBXSlider = $(oThisScript).next().children().first();

            oDivBXSlider.data('sd_BXSlider', oDivBXSlider.bxSlider({
                minSlides     : 3,
                moveSlides   : 2,
                maxSlides    : 3,      
                slideWidth    : <actinic:variable name="CarouselSlideWidth" />,
                auto             : <actinic:variable name="SliderAuto" />,
                autoHover     : <actinic:variable name="SliderPauseOnHover" />,
                pause          : <actinic:variable name="SliderDwellms" />,
                mode           : '<actinic:variable name="SliderTransition" />',
                slideMargin  : 5,
                autoReload  : true,
                breaks: [{screen:0, slides:1, pager:false},{screen:460, slides:2, pager:false},{screen:768, slides:3, pager:true}]

              }));
        });}
    ());
</script>
<div class="sidebar">
<div class="bxSlider<actinic:variable name="FragmentID" />">

You will see I add a class to the slider or sidebar div (bslcarouselentry or homepageCarousel) so you can give them different styles if you wish.