Title and explanation at:
https://community.sellerdeck.com/for...esizing-images
The forum only lets you post 10 <img> tags thinking theu are images even though they are in code, so the layouts are on a number of posts - sorry!
Product Image - Simple Image Revised July 2021
'Standard Product Image'
https://community.sellerdeck.com/for...esizing-images
The forum only lets you post 10 <img> tags thinking theu are images even though they are in code, so the layouts are on a number of posts - sorry!
Product Image - Simple Image Revised July 2021
'Standard Product Image'
Code:
<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>