Blog Image Sizes

Multi-Vendor Questions
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="<a data-ipb='nomediaparse' href='https://buybcfoodanddrink.com/images/thumbnails/232/151/blog/23/cansu-emir.jpg'>https://buybcfoodanddrink.com/images/thumbnails/232/151/blog/23/cansu-emir.jpg"alt="Meet Cansu & Emir from the Okanagan Pasta Company" title="Meet Cansu & 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="<a data-ipb='nomediaparse' href='https://buybcfoodanddrink.com/images/thumbnails/512/342/blog/23/cardamom-coffee-cake.jpg'>https://buybcfoodanddrink.com/images/thumbnails/512/342/blog/23/cardamom-coffee-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!

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}
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.

4

Yes, it worked. I had the same issues and I follow your comment :) Thanks https://en.wikipedia.org/wiki/CSS