Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Blog Image Sizes Rate Topic   - - - - -

 

Posted 18 November 2021 - 10:44 PM #1

When I add a blog item and use the Add-on to upload an image, the thumbnail looks fine, but when I click on the blog item, this image loads at the top of the page, but in a very unattractive size. It is also not consistent. 

 

Here is some sample code:

 

<img class="ty-pict cm-image" id="det_img_25" src="https://buybcfoodand...cansu-emir.jpg"alt="Meet Cansu &amp; Emir from the Okanagan Pasta Company" title="Meet Cansu &amp; Emir from the Okanagan Pasta Company" width="232" height="151" srcset="https://buybcfoodanddrink.com/images/blog/23/cansu-emir.jpg 2x" style="opacity: 1;">

 

As you can see, some template is injecting the size width="232" height="151" and I would simply like to remove this and manage it with CSS....or edit the template with some more reasonable image size. 

 

I have looked in:

 

design/themes/YOUR_THEME/templates/addons/blog/hooks/pages/page_content.pre.tpl

design/themes/YOUR_THEME/templates/addons/blog/hooks/pages/page_extra.pre.tpl

 

and common/image.tpl

 

none of these templates allow me to change or have control over width="232" height="151". I'm sure that this is dynamic because on another blog post, this is the resulting HTML:

 

<img class="ty-pict cm-image" id="det_img_29" src="https://buybcfoodand...offee-cake.jpg"alt="Delicious Cardamom Coffee Cake" title="Delicious Cardamom Coffee Cake" width="512" height="342" srcset="https://buybcfoodanddrink.com/images/blog/23/cardamom-coffee-cake.jpg 2x" style="opacity: 1;">

 

For now, I am simply hiding the image using:

 

.ty-blog-grid .ty-wysiwyg-content .ut2-blog__img-block {
   display: none;
}
 
but I would like to have control over this image so that I can make a blog post attractive and consistent. Any ideas? Thank you!

 



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 22363 posts

Posted 19 November 2021 - 06:50 AM #2

Actual image size is used in the blog. You can control it by changing

{include file="common/image.tpl" obj_id=$page.page_id images=$page.main_pair} 

to

{include file="common/image.tpl" obj_id=$page.page_id images=$page.main_pair image_width=400 image_height=300}

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 1210     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 4025     CS-Cart + YOUPI      USD 1459      Multi-Vendor Ultimate       USD 7500 (6000)


 

Posted 19 November 2021 - 09:07 PM #3

Thanks...I didn't know I could add that without messing things up. I will experiment to see if I can use percentages in there. It would be great to use:

{include file="common/image.tpl" obj_id=$page.page_id images=$page.main_pair image_width=100%}

I'm hoping the result would be the image would fill the space (assuming it was big enough to fill it) but then maintain its aspect ratio. Thanks for your help and I will add my test results here for future reference.