Page templates and images

[nelleandlizzy]

I am using BB.sst which includes BB-BXSliderCarousel.sst to build category pages.
The original size images are being selected and then scaled. This is causing extra delays in page loads.
How can I select one of the smaller sized images (ss_size1, ss_size2, ss_size3) instead of the original size?

[ShopSite Lauren]

The carousel is responsive so it will fill the area it is in with whatever size image you use. Most themes using the BB.sst page template display the carousel the full width of the page. You can switch your page template to the BB-InnerPageCarousel.sst page template (Pages > Edit Page Layout), and the carousel width will match the width of your page content instead of the width of the screen.

[nelleandlizzy]

The carousel is responsive so it will fill the area it is in with whatever size image you use. Most themes using the BB.sst page template display the carousel the full width of the page. You can switch your page template to the BB-InnerPageCarousel.sst page template (Pages > Edit Page Layout), and the carousel width will match the width of your page content instead of the width of the screen.

Thanks Lauren. The problem is not how it is displayed. I am very happy with the display. It is the size of the image that is being used. For example:

It is using /media/ring.jpg
I want it to use /media/ss_size1/ring.jpg

If I can provide the proper sized image in ss_size1 then there will be a reduced page load time.

Thanks!
Jim

[ShopSite Lauren]

You can do that by adding the /ss_size1/ in front of the image file name under Preferences > Carousel.

[nelleandlizzy]

You can do that by adding the /ss_size1/ in front of the image file name under Preferences > Carousel.

I think I may have confused myself and the situation!!

My pages are using BB.sst (shown below). The images are coming from bb-loopproducts? It looks like it is taking each product image, but I would like to also specify what resize to use. Here is an example:
https://www.nelleandlizzy.com/rings.html
The first product is using https://www.nelleandlizzy.com/media/double_5.jpg, but I would like it to be one of the ss_size images instead.

THANK YOU!!!!

Code: Select all

### Design By Lauren. Copyright ShopSite Inc.
[--DEFINE LINK_TO_PAGE--][-- VAR.LinkCount INC --][-- IF PAGE.LinkName --][-- VAR.SingleLinkName PAGE.LinkName --][-- ELSE --][-- VAR.SingleLinkName PAGE.Name --][-- END_IF --]<div class="item item[-- VAR.LinkCount --][-- IF PAGE.TextWrap "Off" --] nowrap[-- END_IF --]">[-- IF PAGE.LinkGraphic --]<a class="bb-lkimg" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]" title="[-- VAR.SingleLinkName --]">[-- PAGE.LinkGraphic ONLY_ALT_TAG --]</a>[-- IF PAGE.LinkName --]<a class="bb-lknme" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]" title="[-- VAR.SingleLinkName --]">[-- PAGE.LinkName --]</a>[-- END_IF --][-- ELSE_IF PAGE.LinkName --]<a class="bb-lknme" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]" title="[-- VAR.SingleLinkName --]">[-- PAGE.LinkName --]</a>[-- ELSE --]<a class="bb-lknme" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]" title="[-- VAR.SingleLinkName --]">[-- PAGE.Name REMOVE_HTML --]</a>[-- END_IF --][-- IF PAGE.LinkText --]<span>[-- PAGE.LinkText --]</span>[-- END_IF --]</div>[--END_DEFINE LINK_TO_PAGE--]
#########################################################################
[-- DEFINE PAGE --][-- VAR.Secure "no" --][-- VAR.Type "page" --][-- VAR.SubProductType "select" --][-- VAR.SidesAllowed "yes" --][-- INCLUDE BB-VARs-DOCTYPE.sst PROCESS --][-- INCLUDE BB-VARs-Page.sst PROCESS --]
<meta name="keywords" content="[-- IF PAGE.MetaKeywords --][-- PAGE.MetaKeywords --][-- ELSE --][-- PAGE.Name REMOVE_HTML --][-- END_IF --]">
<meta name="description" content="[-- IF PAGE.MetaDescription --][-- PAGE.MetaDescription --][-- ELSE --][-- PAGE.Name REMOVE_HTML --][-- END_IF --][-- IF PAGE.PaginatedPageNum GT 1 --] Page [-- PAGE.PaginatedPageNum --][-- END_IF --]">
<title>[-- IF PAGE.Title --][-- PAGE.Title --][-- ELSE --][-- PAGE.Name REMOVE_HTML --][-- END_IF --][-- IF PAGE.PaginatedPageNum GT 1 --] Page [-- PAGE.PaginatedPageNum --][-- END_IF --]</title>
[-- IF PAGE.FileName "index.html" --]<link rel="canonical" href="[-- OUTPUT_DIRECTORY_URL --]/">[-- ELSE --]<link rel="canonical" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">[-- END_IF --]
[-- INCLUDE BB-Head.sst PROCESS --]
####pinterest conversion tracking
<script>
pintrk('track', 'viewcategory');
</script>
<noscript>
<img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?tid=2613301069992&event=viewcategory&noscript=1" />
</noscript>
####end pinterest conversion tracking
[-- IF VAR.AdvancedPageSpeed "yes" --][-- INCLUDE BB-EndHead.sst --][-- ELSE --]</head>[-- END_IF --]<body class="[-- VAR.NarrowResponsiveDesign--]">
[-- INCLUDE VAR.Header PROCESS --]
[-- INCLUDE BB-BXSliderCarousel.sst PROCESS --]
[-- IF PAGE.Graphic --][-- IF PAGE.DisplayGraphic --]<div id="bb-pagebannercar"><div id="bb-pagebannerinner">[-- PAGE.Graphic ONLY_ALT_TAG --]</div></div>[-- END_IF --][-- END_IF --]
[-- IF VAR.AboveSideMenus "no" --][-- IF VAR.NarrowResponsiveDesign NE "fullwidth" --]<div id="bb-menuscontainer">[-- END_IF --][-- INCLUDE BB-RightMenu.sst PROCESS --]<div id="bb-content"><div id="bb-inner" class="[-- VAR.PageLayout --]">[-- END_IF --]
<div id="bb-namesection"><div id="bb-namesectioninner" class="[-- VAR.PageLayout --]">
[-- IF VAR.Breadcrumbs "yes" --][-- IF PAGE.FileName "index.html" --][-- ELSE --] [-- VAR.BreadPosition 0 --]<div id="bbbread" itemscope itemtype="http://schema.org/BreadcrumbList"><div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a id="bbbreadhome" href="[-- MyStoreURL --]" title="[-- STORE.Name REMOVE_HTML --]" itemprop="item"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick="__utmLinker(this.href);"[-- END_IF --]><span itemprop="name">[-- STORE.Home --]</span><meta itemprop="position" content="[-- VAR.BreadPosition INC --][-- VAR.BreadPosition --]"></a></div><span class="bbbread-div">[-- VAR.BreadcrumbDivider --]</span><div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]" title="[-- VAR.LinkTitle --]" itemprop="item"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick="__utmLinker(this.href);"[-- END_IF --]><span itemprop="name">[-- VAR.LinkName --]</span><meta itemprop="position" content="[-- VAR.BreadPosition INC --][-- VAR.BreadPosition --]"></a></div></div>[-- END_IF --][-- END_IF --]
[-- IF PAGE.DisplayName --] <h1 id="bbnme"[-- IF PAGE.Layout "Centered" --] class="center"[-- END_IF --]>[-- PAGE.Name REMOVE_HTML --]</h1>[-- END_IF --]
[-- IF PAGE.Text1 --] <div id="bbtext1" class="bbtext">[-- PAGE.Text1 --]<div class="clear"></div></div>[-- END_IF --]
</div></div>
[-- IF VAR.AboveSideMenus "yes" --]<div id="bb-abovedivider"></div>[-- IF VAR.NarrowResponsiveDesign NE "fullwidth" --]<div id="bb-menuscontainer">[-- END_IF --][-- INCLUDE BB-RightMenu.sst PROCESS --]<div id="bb-content"><div id="bb-inner" class="[-- VAR.PageLayout --]">[-- END_IF --]
[-- IF PAGE.NumLinks "0" --][-- ELSE --] <div id="bblplinks" class="loop[-- VAR.LinkCols --][-- IF PAGE.DisplayColumnBorders --] borders[-- END_IF --]"><ul id="bb-looplinks" class="bb-loopheight">[-- VAR.LinkCount 0 --][-- LOOP LINKS --]<li class="link bb-matchheight">[-- LINK BB.sst --]</li>[-- IF VAR.LinkCount EQ VAR.MaxLinkCount --][-- VAR.LinkCount 0 --][-- END_IF --][-- END_LOOP LINKS --]</ul><div class="clear"></div></div>[-- END_IF --]
[-- IF PAGE.Text2 --] <div id="bbtext2" class="bbtext">[-- PAGE.Text2 --]</div>[-- END_IF --]
[-- IF PAGE.NumProducts "0" --][-- ELSE --][-- VAR.ProductType "full" --]
 [-- IF PAGE.ProductsPerPage NE "0" --]<div id="bbpag1" class="bbpagination">[-- PrevNext NoCenter --]</div>[-- END_IF --]
 <div id="bblpprods" class="loop[-- VAR.Cols --][-- IF PAGE.DisplayColumnBorders --] borders[-- END_IF --]"><ul id="bb-loopproducts" class="bb-loopheight">[-- VAR.Count 0 --][-- LOOP PRODUCTS --]<li class="prod bb-matchheight">[-- PRODUCT --]</li>[-- IF VAR.Count EQ VAR.MaxCount --][-- VAR.Count 0 --][-- END_IF --][-- END_LOOP PRODUCTS --]</ul><div class="clear"></div></div>
[-- IF VAR.QuantityPricing "yes" --]<span id="bb-qpflag">[-- STORE.QuantityPricingFlag --] [-- STORE.QuantityPricingMsg --]</span>[-- END_IF --]
#[--IF  VAR.Variableproduct "yes" --]<span id="bb-vpflag">[-- STORE.VariablePricingFlag --] [-- STORE.VariablePricingMsg --]</span>[-- END_IF --]
 [-- IF PAGE.ProductsPerPage NE "0" --]<div id="bbpag2" class="bbpagination">[-- PrevNext NoCenter --]</div>[-- END_IF --]
[-- END_IF --]
[-- IF PAGE.Text3 --] <div id="bbtext3" class="bbtext">[-- PAGE.Text3 --]</div>[-- END_IF --]
 [-- VAR.DisplaySocial "no" --][-- IF FACEBOOK_SHARE --][-- VAR.DisplaySocial "yes" --][-- ELSE_IF TWITTER_SHARE --][-- VAR.DisplaySocial "yes" --][-- END_IF --]
 [-- IF VAR.DisplaySocial "yes" --]<div id="bbsocialshare">[-- SOCIAL_SHARE tag --]</div>[-- END_IF --]
<div class="clear"></div></div></div>
[-- INCLUDE BB-LeftMenu.sst PROCESS --]
[-- IF PageLinks.Left --]<div class="clear"></div></div>[-- ELSE_IF PageLinks.Right --]<div class="clear"></div></div>[-- END_IF --]
[-- IF PAGE.GlobalCrossSell --]<section id="bb-bestsellers"><div id="bb-divbestsellers" class="[-- VAR.PageLayout --]"><h2 id="bb-globalcrosssellhdr">[-- STORE.GlobalCrossSellHeader --]</h2><div id="bbgcrosssell" class="loopinfinite5[-- IF VAR.DisplayColumnBorders --] infinitecrossborders[-- END_IF --]"><ul id="bb-loopgcross" class="bb-loopheight">[-- VAR.ProductGlobalCrossCount 0 --][-- LOOP GLOBAL_Cross_Sell --]<li class="prod bb-matchheight">[-- VAR.ProductCrossSellDefine.sst BB-ProductCrossSellDefine-Infinite.sst --][-- GLOBAL_CROSS_SELL --]</li>[-- END_LOOP Global_Cross_Sell --]</ul><div class="clear"></div></div></div></section>[-- END_IF --]
[-- VAR.Type "page" --]
[-- VAR.PageFooter "no" --][-- IF PAGE.DisplayPageFooter --][-- IF FOOTER --][-- VAR.PageFooter "yes" --][-- END_IF --][-- END_IF --]
[-- INCLUDE VAR.Footer PROCESS --]
[-- INCLUDE BB-FooterScripts.sst PROCESS --]
[-- INCLUDE QuickAjaxAddToCart.sst PROCESS --]
<script src="//assets.pinterest.com/js/pinit.js" type="text/javascript" async defer data-pin-hover="true"></script>
[-- INCLUDE click_id PROCESS --]
</body></html>
[-- END_DEFINE PAGE --]

[ShopSite Lauren]

It sounds like you want to adjust the product image size rather than the carousel under preferences > carousel. If that is the case, you can add the parameter SS_SIZE1 in the image tag. Also, note that you can set the preset/default for the image size under Preferences > Product Defaults, so that every time you add a new product it already defaults to a particular size image. However, if you want to bypass the ShopSite image size selection, you can force it in the template.

<img src="[-- PRODUCT.MoreInformationGraphic SS_SIZE1 URL_ONLY --]">

<img src="[-- PRODUCT.Graphic SS_SIZE1 URL_ONLY --]">

Note, if you are adjusting the product image size, then you would make that adjustment in the product template rather than the page template. The BB.sst page template matches with the BB-Product.sst templates (there are a few variations, but this is the default), which uses the BB-ProductDefine.sst include file for product layouts on category pages. You will likely want to make a copy of the BB-ProductDefine.sst include file, then re-copy your copy and rename it the exact same name as the original in order to override the original.

I hope that helps!