Serving Scaled Images – Resizing images

Call 01323 872296


Serving Scaled Images – Resizing images

In July 2020 I wrote about resizing images using a php script called Simple Image (https://community.sellerdeck.com/forum/sellerdeck-ecommerce-software/sellerdeck-desktop-v18/552425-page-load-times?p=552830#post552830)

I have been developing the concept and along with some valuable input from Norman Rouxell of drillpine.biz regarding using the script with a Bootstrap site (Swift for example) am now using the following way of serving scaled images appropriate to viewport. It also gives the appropriate width and height for each image which also helps SEO.

You need to download the simpleImage.php script from https://github.com/claviska/SimpleImage

Please note, this is now version 3.6.3 and it differs from earlier versions in having the line

namespace claviska;

So that when the script is called you need to use:

$image = new \claviska\SimpleImage();

and not as previously:

$image = new SimpleImage();

You need to create a folder in the Site folder called ‘scaled’.

The layouts that are modified are as follows:

Before you start take a site snapshot!

Then copy these layouts in the design library so you have backups:

  • Best Seller
  • Home Page Section List
  • New Product
  • Product Summary Image
  • Standard Product Image
  • Standard Promotional List Entry
  • Top Level Section

Here are the layouts

Best Seller – Simple Image Revised July 2021

Compact Best Seller Layout

]<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22" >
<actinic:block php="true" >
include_once 'simpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
$altname = '<actinic:variable name="ProductName" encoding="perl" selectable="false" /> image';
$sOrigimagebs = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
$scaleddir = 'scaled/';
$simpleimagebase = basename($sOrigimagebs);
$bslgwidth = 230;
$bsmdwidth = 495;
$bssmwidth = 767;
$bsxswidth = 576;
$bslgfile = $scaleddir . 'bslg_' . $simpleimagebase;
$bsmdfile = $scaleddir . 'bsmd_' . $simpleimagebase;
$bssmfile = $scaleddir . 'bssm_' . $simpleimagebase;
$bsxsfile = $scaleddir . 'bsxs_' . $simpleimagebase;
if ( file_exists($sOrigimagebs) )
{
$bslgheight = ($bslgwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$bsmdheight = ($bsmdwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$bssmheight = ($bssmwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$bsxsheight = ($bsxswidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
}
try
{
if ( file_exists($sOrigimagebs) )
{
$simpleimagebsl = new \claviska\SimpleImage($sOrigimagebs);
$simpleimagebsl -> resize($bslgwidth) -> toFile($bslgfile);
$simpleimagebsl -> resize($bsmdwidth) -> toFile($bsmdfile);
$simpleimagebsl -> resize($bssmwidth) -> toFile($bssmfile);
$simpleimagebsl -> resize($bsxswidth) -> toFile($bsxsfile);
}
}
catch(Exception $err)
{
// Handle errors
echo $err->getMessage();
}
</actinic:block>
</actinic:block>

<div class="image">
<a class="d-flex align-items-center justify-content-center overflow-hidden" 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 class="d-none d-lg-block lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$bslgfile\" data-src=\"$bslgfile\" alt=\"$altname\" width=\"$bslgwidth\" height=\"$bslgheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
<img class="d-none d-md-block d-lg-none lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$bsmdfile\" data-src=\"$bsmdfile\" alt=\"$altname\" width=\"$bsmdwidth\" height=\"$bsmdheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
<img class="d-none d-sm-block d-md-none lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$bssmfile\" data-src=\"$bssmmfile\" alt=\"$altname\" width=\"$bssmwidth\" height=\"$bssmheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
<img class="d-block d-sm-none lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$bsxsfile\" data-src=\"$bsxsfile\" alt=\"$altname\" width=\"$bsxswidth\" height=\"$bsxsheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%3d%3d%20%22%22" >
<img class="lazyload lazy img-responsive" data-src="<actinic:variable name="DefaultProductImage" />" src="<actinic:variable name="DefaultProductImage" />" />
</actinic:block>
</a>
</div>
<div class="caption">
<a class="product-name" href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable encoding="url" 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>"><span><actinic:variable name="ProductName" /></span></a>
<div class="col-12">
<div class="product-price-sec">
<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>
</div>
</div>
</div>
<p class="product-info">
<a class="add-to-cart-btn" href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable encoding="url" 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>">
<img src="cart-icon-w.png" class="cartIcon" alt="">
</a>
</p>

Home Page Section List – Simple Image Revised July 2021

From :

<div class="image">

To :

<div class="caption">
<a class="text-center product-title" href="<actinic:variable name="SectionURL" />"><actinic:variable name="SectionName" /></a>
</div>
</div>

Inclusive

<div class="image">
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
<actinic:block php="true" >
include_once 'SimpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
$altname = '<actinic:variable name="SectionName" encoding="perl" selectable="false" /> image';
$sOrigimagehps = str_replace('\\','/', '<actinic:variable name="SectionImageFileName" encoding="perl" selectable="false" />');
$scaleddir = 'scaled/';
$simpleimagebasehps = basename($sOrigimagehps);
$hpsxlgwidth = 240;
$hpsxmdwidth = 500;
$hpsxsmwidth = 770;
$hpsxxswidth = 580;
$hpsxlgfile = $scaleddir . 'hpsxlg_' . $simpleimagebasehps;
$hpsxmdfile = $scaleddir . 'hpsxmd_' . $simpleimagebasehps;
$hpsxsmfile = $scaleddir . 'hpsxsm_' . $simpleimagebasehps;
$hpsxxsfile = $scaleddir . 'hpsxxs_' . $simpleimagebasehps;
if ( file_exists($sOrigimagehps) )
{
$hpsxlgheight = ($hpsxlgwidth*(<actinic:variable encoding="perl" name="SectionImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="SectionImageWidth" selectable="false" />)) ;
$hpsxmdheight = ($hpsxmdwidth*(<actinic:variable encoding="perl" name="SectionImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="SectionImageWidth" selectable="false" />)) ;
$hpsxsmheight = ($hpsxsmwidth*(<actinic:variable encoding="perl" name="SectionImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="SectionImageWidth" selectable="false" />)) ;
$hpsxxsheight = ($hpsxxswidth*(<actinic:variable encoding="perl" name="SectionImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="SectionImageWidth" selectable="false" />)) ;
}
try
{
if ( file_exists($sOrigimagehps) )
{
$simpleimagehps = new \claviska\SimpleImage($sOrigimagehps);
$simpleimagehps -> resize($hpsxlgwidth) -> toFile($hpsxlgfile);
$simpleimagehps -> resize($hpsxmdwidth) -> toFile($hpsxmdfile);
$simpleimagehps -> resize($hpsxsmwidth) -> toFile($hpsxsmfile);
$simpleimagehps -> resize($hpsxxswidth) -> toFile($hpsxxsfile);
}
}
catch(Exception $err)
{
// Handle errors
echo $err->getMessage();
}
</actinic:block>
</actinic:block>
<a href=<actinic:variable name="SectionURL" />" class="text-center align-items-center d-flex image-link">
<img src=<actinic:block php="true">echo "\"$hpsxlgfile\" data-src=\"$hpsxlgfile\" alt=\"$altname\" width=\"$hpsxlgwidth\" height=\"$hpsxlgheight\"";</actinic:block> class="d-none d-lg-block lazy lazyload img-responsive product-summary-image ml-auto mr-auto"/>
<img src=<actinic:block php="true">echo "\"$hpsxmdfile\" data-src=\"$hpsxmdfile\" alt=\"$altname\" width=\"$hpsxmdwidth\" height=\"$hpsxmdheight\"";</actinic:block> class="d-none d-md-block d-lg-none lazy lazyload img-responsive product-summary-image ml-auto mr-auto"/>
<img src=<actinic:block php="true">echo "\"$hpsxsmfile\" data-src=\"$hpsxsmfile\" alt=\"$altname\" width=\"$hpsxsmwidth\" height=\"$hpsxsmheight\"";</actinic:block> class="d-none d-sm-block d-md-none lazy lazyload img-responsive product-summary-image ml-auto mr-auto"/>
<img src=<actinic:block php="true">echo "\"$hpsxxsfile\" data-src=\"$hpsxxsfile\" alt=\"$altname\" width=\"$hpsxxswidth\" height=\"$hpsxxsheight\"";</actinic:block> class="d-block d-sm-none lazy lazyload img-responsive product-summary-image ml-auto mr-auto"/>
</a>
<div class="caption">
<a class="text-center product-title" href="<actinic:variable name="SectionURL" />"><actinic:variable name="SectionName" /></a>
</div>
</div>

New Product – Simple Image Revised July 2021

Compact New Products Item

]<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22" >
<actinic:block php="true" >
include_once 'simpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
$altname = '<actinic:variable name="ProductName" encoding="perl" selectable="false" /> image';
$sOrigimagenp = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
$scaleddir = 'scaled/';
$simpleimagebase = basename($sOrigimagenp);
$nplgwidth = 240;
$npmdwidth = 500;
$npsmwidth = 770;
$npxswidth = 580;

$nplgfile = $scaleddir . 'nplg_' . $simpleimagebase;
$npmdfile = $scaleddir . 'npmd_' . $simpleimagebase;
$npsmfile = $scaleddir . 'npsm_' . $simpleimagebase;
$npxsfile = $scaleddir . 'npxs_' . $simpleimagebase;
if ( file_exists($sOrigimagenp) )
{
$nplgheight = ($nplgwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$npmdheight = ($npmdwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$npsmheight = ($npsmwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$npxsheight = ($npxswidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
}
try
{
if ( file_exists($sOrigimagenp) )
{
$simpleimagenpl = new \claviska\SimpleImage($sOrigimagenp);
$simpleimagenpl -> resize($nplgwidth) -> toFile($nplgfile);
$simpleimagenpl -> resize($npmdwidth) -> toFile($npmdfile);
$simpleimagenpl -> resize($npsmwidth) -> toFile($npsmfile);
$simpleimagenpl -> resize($npxswidth) -> toFile($npxsfile);
}
}
catch(Exception $err)
{
// Handle errors
echo $err->getMessage();
}
</actinic:block>
</actinic:block>


<div class="image">
<a class="d-flex align-items-center justify-content-center overflow-hidden" 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 class="d-none d-lg-block lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$nplgfile\" data-src=\"$nplgfile\" alt=\"$altname\" width=\"$nplgwidth\" height=\"$nplgheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
<img class="d-none d-md-block d-lg-none lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$npmdfile\" data-src=\"$npmdfile\" alt=\"$altname\" width=\"$npmdwidth\" height=\"$npmdheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
<img class="d-none d-sm-block d-md-none lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$npsmfile\" data-src=\"$npsmfile\" alt=\"$altname\" width=\"$npsmwidth\" height=\"$npsmheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
<img class="d-block d-sm-none lazyload lazy img-responsive" src=<actinic:block php="true">echo "\"$npxsfile\" data-src=\"$npxsfile\" alt=\"$altname\" width=\"$npxswidth\" height=\"$npxsheight\"";</actinic:block> title="<actinic:variable encoding="strip" name="ProductName" />" >
</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" />" class="lazyload lazy img-responsive" data-src="<actinic:variable name="DefaultProductImage" />" title="<actinic:variable encoding="strip" name="ProductName" />">
</actinic:block>
</a>
</div>
<div class="caption">
<a class="product-name" href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable encoding="url" 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>">
<span><actinic:variable name="ProductName" /></span>
</a>
<div class="col-12">
<div class="product-price-sec">
<Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />">
<actinic:variable name="PriceListRetail" value="Standard Retail Price List" />
</Actinic:PRICES>
</div>
</div>
</div>
<p class="product-info">
<a class="add-to-cart-btn" href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable encoding="url" 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>">
<img src="cart-icon-w.png" class="cartIcon" alt="">
</a>
</p>

Product Summary Image – Simple Image Revised July 2021

‘Small Product Image’

]<actinic:block php="true" >
include_once 'simpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
$altname = '<actinic:variable name="ProductName" encoding="perl" selectable="false" /> image';
$sOrigimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
$scaleddir = 'scaled/';
$simpleimagebasespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> = basename($sOrigimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />);
$plgwidth = 267;
$pmdwidth = 470;
$psmwidth = 720;
$pxswidth = 545;
$plgfile = $scaleddir . 'plg_' . $simpleimagebasespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />;
$pmdfile = $scaleddir . 'pmd_' . $simpleimagebasespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />;
$psmfile = $scaleddir . 'psm_' . $simpleimagebasespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />;
$pxsfile = $scaleddir . 'pxs_' . $simpleimagebasespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />;
if ( file_exists($sOrigimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />) )
{
$plgheight = ($plgwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$pmdheight = ($pmdwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$psmheight = ($psmwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$pxsheight = ($pxswidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
}
try
{
if ( file_exists($sOrigimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />) )
{
$simpleimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> = new \claviska\SimpleImage($sOrigimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />);
$simpleimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> -> resize($plgwidth) -> toFile($plgfile);
$simpleimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> -> resize($pmdwidth) -> toFile($pmdfile);
$simpleimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> -> resize($psmwidth) -> toFile($psmfile);
$simpleimagespi<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> -> resize($pxswidth) -> toFile($pxsfile);
}
}
catch(Exception $err)
{
// Handle errors
echo $err->getMessage();
}
</actinic:block>
</actinic:block>

<div class="d-flex align-items-center justify-content-center w-100 product-image-sec">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="<actinic:variable name=ExtendedInfoPageEncoded />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />#SID=<actinic:variable name="SectionID" />">
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">

<img src=<actinic:block php="true">echo "\"$plgfile\" data-src=\"$plgfile\" alt=\"$altname\" title=\"$altname\" width=\"$plgwidth\" height=\"$plgheight\"";</actinic:block>
id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
class="d-none d-lg-block" />
<img src=<actinic:block php="true">echo "\"$pmdfile\" data-src=\"$pmdfile\" alt=\"$altname\" title=\"$altname\" width=\"$pmdwidth\" height=\"$pmdheight\"";</actinic:block>
id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
class="d-none d-md-block d-lg-none" />
<img src=<actinic:block php="true">echo "\"$psmfile\" data-src=\"$psmfile\" alt=\"$altname\" title=\"$altname\" width=\"$psmwidth\" height=\"$psmheight\"";</actinic:block>
id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
class="d-none d-sm-block d-md-none" />
<img src=<actinic:block php="true">echo "\"$pxsfile\" data-src=\"$pxsfile\" alt=\"$altname\" title=\"$altname\" width=\"$pxswidth\" height=\"$pxsheight\"";</actinic:block>
id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
class="d-block d-sm-none" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<img src="<actinic:variable name="DefaultProductImage" />"
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%22IsPopUpDisplayedByImage%22%20%2f%3e%20OR%0d%28%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29%29" >
</a>
</actinic:block>
</div>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<actinic:variable name="PinterestButtonLayout" value="Product Pin It Button Layout" />
</actinic:block>


Product Image – Simple Image Revised July 2021

‘Standard Product Image’

]<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<actinic:block php="true" >
include_once 'simpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
$altname = '<actinic:variable name="ProductName" encoding="perl" selectable="false" /> image';
$sOrigimagepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
$scaleddir = 'scaled/';
$simpleimagebasepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> = basename($sOrigimagepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />);
$ppwidth = 400;
$pprwidth = 740;
$ppfile = $scaleddir . 'pp_' . $simpleimagebasepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />;
$pprfile = $scaleddir . 'ppr_' . $simpleimagebasepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />;
if ( file_exists($sOrigimagepp) )
{
$ppheight = ($ppwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
$pprheight = ($pprwidth*(<actinic:variable encoding="perl" name="ProductImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="ProductImageWidth" selectable="false" />)) ;
}
try
{
if ( file_exists($sOrigimagepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />) )
{
$simpleimagepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> = new \claviska\SimpleImage($sOrigimagepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" />);
$simpleimagepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> -> resize($ppwidth) -> toFile($ppfile);
$simpleimagepp<actinic:variable encoding="perl" name="EncodedProductAnchor" selectable="false" /> -> resize($pprwidth) -> toFile($pprfile);
}
}
catch(Exception $err)
{
// Handle errors
echo $err->getMessage();
}
</actinic:block>
</actinic:block>
<actinic:block if="%28%28%3cactinic%3avariable%20name%3d%22ZoomAutoIncludeMainImageWidth%22%20%2f%3e%20%3e%200%29%20%26%26%20%28%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%3d%20%3cactinic%3avariable%20name%3d%22ZoomAutoIncludeMainImageWidth%22%20%2f%3e%29%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage0%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage1%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage2%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage3%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage4%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage5%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage6%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage7%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage8%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage9%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage10%22%20%2f%3e%20%21%3d%20%22%22%29" ><!-- Magic zoom prefix V3.14R -->
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><style>.mzmaxwidth-<actinic:variable name="ProductImageMaxWidth" />{max-width:<actinic:variable name="ProductImageMaxWidth" />px !important;}</style></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomIconsPosition%22%20%2f%3e%20%3d%3d%20%22top%22" ><span class="mzp-ptab-icons-above"><actinic:variable name="MagicZoomImages" value="Magic Zoom Image List Swift" /></span><br></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomIconsPosition%22%20%2f%3e%20%3d%3d%20%22left%22" ><span class="mzp-ptab-icons-left"><actinic:variable name="MagicZoomImages" value="Magic Zoom Image List Swift" /></span></p><p class="product-image set-left"></actinic:block>
<a href="<actinic:variable name="MagicZoomImages" value="Magic Zoom First Product Image Swift" />"
class="MagicZoom"
id="mz-<actinic:variable name="EncodedProductAnchor" selectable="false" />"
<actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomResponsiveMaxScaleDown%22%20%2f%3e%20%3c%201" >
data-mzpimgw="<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%3d%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>"
data-mzpmaxs="<actinic:variable name="ZoomResponsiveMaxScaleDown" />"
data-mzpimgid = "im-<actinic:variable name="EncodedProductAnchor" selectable="false" />"
</actinic:block>
data-options="zoomMode: <actinic:variable name="ActionOnHover" />; expand: <actinic:variable name="ActionOnClick" />; zoom-position:<actinic:variable name="ZoomedImagePosition" selectable="false" />;
<actinic:block php="true">
// Hotspots
$zoomimages = array('<actinic:variable name="ZoomImage0" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage1" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage2" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage3" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage4" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage5" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage6" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage7" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage8" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage9" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomImage10" encoding="perl" selectable="false" />');

$iconalts = array('<actinic:variable name="ZoomAlt0" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt1" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt2" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt3" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt4" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt5" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt6" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt7" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt8" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt9" encoding="perl" selectable="false" />',
'<actinic:variable name="ZoomAlt10" encoding="perl" selectable="false" />');
// see if there's anything to display
$zoomimagecount = count($zoomimages);
$hotspots = false;
$coordpattern = '/\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)[\s,]+(\d+)[\s,]*(.*)/';
for ( $i=1; $i < $zoomimagecount; $i++ )
{
if ( ($zoomimages[$i] != '') && preg_match($coordpattern, $iconalts[$i]) )
{
$hotspots = true;
break;
}
}
if ( $hotspots ) echo "hotspots: mzhot-<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false" />;";
</actinic:block>
zoom-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomedImagePosition%22%20%2f%3e%20%3d%3d%20%22inner%22"><actinic:variable name="ProductImageWidth" selectable="false" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomedImagePosition%22%20%2f%3e%20%21%3d%20%22inner%22" ><actinic:variable name="ZoomedImageWidth" selectable="false" /></actinic:block>px;
zoom-height: <actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomedImagePosition%22%20%2f%3e%20%3d%3d%20%22inner%22"><actinic:variable name="ProductImageHeight" selectable="false" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomedImagePosition%22%20%2f%3e%20%21%3d%20%22inner%22" ><actinic:variable name="ZoomedImageHeight" selectable="false" /></actinic:block>px;">

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<img class="d-none d-md-block<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" > mzmaxwidth-<actinic:variable name="ProductImageMaxWidth" /></actinic:block>" src=<actinic:block php="true">echo "\"$ppfile\" data-src=\"$ppfile\" alt=\"$altname\" title=\"$altname\"";</actinic:block>
id="im-<actinic:variable name="EncodedProductAnchor" />"
border="0" />
<img class="d-none d-sm-block d-md-none<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" > mzmaxwidth-<actinic:variable name="ProductImageMaxWidth" /></actinic:block>" src=<actinic:block php="true">echo "\"$pprfile\" data-src=\"$pprfile\" alt=\"$altname\" title=\"$altname\"";</actinic:block>
id="im-<actinic:variable name="EncodedProductAnchor" />"
border="0" />
<img class="d-block d-sm-none<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" > mzmaxwidth-<actinic:variable name="ProductImageMaxWidth" /></actinic:block>" src=<actinic:block php="true">echo "\"$ppfile\" data-src=\"$ppfile\" alt=\"$altname\" title=\"$altname\"";</actinic:block>
id="im-<actinic:variable name="EncodedProductAnchor" />"
border="0" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<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>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomIconsPosition%22%20%2f%3e%20%3d%3d%20%22bottom%22" ><span class="mzp-ptab-icons-below"><br><actinic:variable name="MagicZoomImages" value="Magic Zoom Image List Swift" /></span></actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ZoomIconsPosition%22%20%2f%3e%20%3d%3d%20%22right%22" ></p><p class="mzp-ptab-icons-right"><actinic:variable name="MagicZoomImages" value="Magic Zoom Image List Swift" /></p></actinic:block>
</actinic:block>

<actinic:block if="%21%28%28%28%3cactinic%3avariable%20name%3d%22ZoomAutoIncludeMainImageWidth%22%20%2f%3e%20%3e%200%29%20%26%26%20%28%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%3d%20%3cactinic%3avariable%20name%3d%22ZoomAutoIncludeMainImageWidth%22%20%2f%3e%29%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage0%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage1%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage2%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage3%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage4%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage5%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage6%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage7%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage8%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage9%22%20%2f%3e%20%21%3d%20%22%22%29%0dOR%20%28%3cactinic%3avariable%20name%3d%22ZoomImage10%22%20%2f%3e%20%21%3d%20%22%22%29%29" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="<actinic:variable name=ExtendedInfoPageEncoded />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />#SID=<actinic:variable name="SectionID" />">
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<img class="d-none d-md-block<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" > mzmaxwidth-<actinic:variable name="ProductImageMaxWidth" /></actinic:block>" src=<actinic:block php="true">echo "\"$ppfile\" data-src=\"$ppfile\" alt=\"$altname\" title=\"$altname\" width=\"$ppwidth\" height=\"$ppheight\"";</actinic:block>
id="im-<actinic:variable name="EncodedProductAnchor" />"
border="0" />
<img class="d-none d-sm-block d-md-none<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" > mzmaxwidth-<actinic:variable name="ProductImageMaxWidth" /></actinic:block>" src=<actinic:block php="true">echo "\"$pprfile\" data-src=\"$pprfile\" alt=\"$altname\" title=\"$altname\" width=\"$pprwidth\" height=\"$pprheight\"";</actinic:block>
id="im-<actinic:variable name="EncodedProductAnchor" />"
border="0" />
<img class="d-block d-sm-none<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" > mzmaxwidth-<actinic:variable name="ProductImageMaxWidth" /></actinic:block>" src=<actinic:block php="true">echo "\"$ppfile\" data-src=\"$ppfile\" alt=\"$altname\" title=\"$altname\" width=\"$ppwidth\" height=\"$ppheight\"";</actinic:block>
id="im-<actinic:variable name="EncodedProductAnchor" />"
border="0" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<img src="<actinic:variable name="DefaultProductImage" />"
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%22IsPopUpDisplayedByImage%22%20%2f%3e%20OR%0d%28%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22ProductListImageLink%22%20%2f%3e%20%3d%3d%201%29%29" >
</a>
</actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<actinic:variable name="PinterestButtonLayout" value="Product Pin It Button Layout" />
</actinic:block>

Standard Promotional List Entry – Simple Image Revised July 2021

]<actinic:block php="true" >
include_once 'simpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
$altname = '<actinic:variable name="CarouselCaption" encoding="perl" selectable="false" /> image';
$sOrigimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" /> = str_replace('\\','/', '<actinic:variable name="ItemImage" encoding="perl" selectable="false" />');
$scaleddir = 'scaled/';
$simpleimagebase = basename($sOrigimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" />);
$splewidthlg = 1112;
$splewidthmd = 993;
$splewidthsm = 768;
$splewidthxs = 576;
$splefilelg = $scaleddir . 'splelg_' . $simpleimagebase;
$splefilemd = $scaleddir . 'splemd_' . $simpleimagebase;
$splefilesm = $scaleddir . 'splesm_' . $simpleimagebase;
$splefilexs = $scaleddir . 'splexs_' . $simpleimagebase;
try
{
if ( file_exists($sOrigimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" />) )
{
$simpleimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" /> = new \claviska\SimpleImage($sOrigimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" />);
$simpleimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" /> -> resize($splewidthlg) -> toFile($splefilelg);
$simpleimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" /> -> resize($splewidthmd) -> toFile($splefilemd);
$simpleimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" /> -> resize($splewidthsm) -> toFile($splefilesm);
$simpleimagesple<actinic:variable encoding="perl" name="FragmentID" selectable="false" /> -> resize($splewidthxs) -> toFile($splefilexs);
}
}
catch(Exception $err)
{
// Handle errors
echo $err->getMessage();
}
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ItemType%22%20%2f%3e%20%21%3d%202" >
<div class="slide-entry">
<a href="<actinic:variable name="ItemLink" selectable="false" />">
<img class="d-none d-lg-block" src=<actinic:block php="true">echo "\"$splefilelg\" data-src=\"$splefilelg\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
<img class="d-none d-md-block d-lg-none" src=<actinic:block php="true">echo "\"$splefilemd\" data-src=\"$splefilemd\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
<img class="d-none d-sm-block d-md-none" src=<actinic:block php="true">echo "\"$splefilesm\" data-src=\"$splefilesm\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
<img class="d-block d-sm-none" src=<actinic:block php="true">echo "\"$splefilexs\" data-src=\"$splefilexs\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
</a>
<actinic:block if="%3cactinic%3avariable%20name%3d%22CarouselCaption%22%20%2f%3e%20%21%3d%20%22%22" >
<div class="carousel-caption">
<h3><actinic:variable name="CarouselCaption" /></h3>
</div>
</actinic:block>
</div>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22ItemType%22%20%2f%3e%20%3d%3d%202" >
<div class="slide-entry">
<a href="<actinic:variable name="ItemLink" selectable="false" />">
<img class="d-none d-lg-block" src=<actinic:block php="true">echo "\"$splefilelg\" data-src=\"$splefilelg\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
<img class="d-none d-md-block d-lg-none" src=<actinic:block php="true">echo "\"$splefilemd\" data-src=\"$splefilemd\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
<img class="d-none d-sm-block d-md-none" src=<actinic:block php="true">echo "\"$splefilesm\" data-src=\"$splefilesm\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
<img class="d-block d-sm-none" src=<actinic:block php="true">echo "\"$splefilexs\" data-src=\"$splefilexs\" alt=\"$altname\" title=\"$altname\"";</actinic:block>"/>
</a>
</div>
</actinic:block>

Top Level Section – No Description Section Link Swift – Simple Image Revised July 2021

]<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
<actinic:block php="true" >
include_once 'simpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
$altname = '<actinic:variable name="SectionName" encoding="perl" selectable="false" /> image';
$sOrigimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" /> = str_replace('\\','/', '<actinic:variable name="SectionImageFileName" encoding="perl" selectable="false" />');
$scaleddir = 'scaled/';
$simpleimagebasendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" /> = basename($sOrigimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" />);
$sxwidth = 420;
$sxrwidth = 770;
$sxfile = $scaleddir . 'sx_' . $simpleimagebasendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" />;
$sxrfile = $scaleddir . 'sxr_' . $simpleimagebasendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" />;

if ( file_exists($sOrigimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" />) )
{
$sxheight = ($sxwidth*(<actinic:variable encoding="perl" name="SectionImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="SectionImageWidth" selectable="false" />)) ;
$sxrheight = ($sxrwidth*(<actinic:variable encoding="perl" name="SectionImageHeight" selectable="false" />/<actinic:variable encoding="perl" name="SectionImageWidth" selectable="false" />)) ;
}

try
{
if ( file_exists($sOrigimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" />) )
{
$simpleimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" /> = new \claviska\SimpleImage($sOrigimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" />);
$simpleimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" /> -> resize($sxwidth) -> toFile($sxfile);
$simpleimagendsl<actinic:variable encoding="perl" name="SectionID" selectable="false" /> -> resize($sxrwidth) -> toFile($sxrfile);

}
}
catch(Exception $err)
{
// Handle errors
echo $err->getMessage();
}
</actinic:block>
</actinic:block>

<div class="thumbnail section-thumbnail text-center bg-white theme-shadow-h">
<div class="image">
<a href="<actinic:variable name="SectionHref" />" target="_self" class="text-center align-items-center d-flex image-link">
<img src=<actinic:block php="true">echo "\"$sxfile\" data-src=\"$sxfile\" alt=\"$altname\" width=\"$sxwidth\" height=\"$sxheight\"";</actinic:block> class="d-none d-md-block lazy lazyload img-responsive product-summary-image ml-auto mr-auto">
<img src=<actinic:block php="true">echo "\"$sxrfile\" data-src=\"$sxrfile\" alt=\"$altname\" width=\"$sxrwidth\" height=\"$sxrheight\"";</actinic:block> class="d-none d-sm-block d-md-none lazy lazyload img-responsive product-summary-image ml-auto mr-auto">
<img src=<actinic:block php="true">echo "\"$sxfile\" data-src=\"$sxfile\" alt=\"$altname\" width=\"$sxwidth\" height=\"$sxheight\"";</actinic:block> class="d-block d-sm-none lazy lazyload img-responsive product-summary-image ml-auto mr-auto">
</a>
<div class="caption">
<a class="text-center" href="<actinic:variable name="SectionHref" />"><actinic:variable encoding="actinic" name="SectionName" /></a>
</div>
</div>
</div>

Finally take a look in the stylesheet for

img {
    max-width: 100%;
    max-height: 100%;
}

And edit it thus:

img {
    max-width: 100%;
    max-height: 100%;
    height:auto;
}

By all means use and develop as you wish but remember this is posted in good faith without any warranty or guarantee express or implied.

Thank you.

Keep in touch and share

Graphicz on Social Media



01323 872296. 07836 551000.
Email:

Website by Graphicz