#208 – sizing images

 Hi.

I am trying to solve the problem of images displaying in full container size on AMP pages. Here is a custom CSS code I tried and which didn't work:

.amp-img {
height: auto;
max-width: [width];
width: 60%;
}

Any suggestions? Thanks.

Hi

Can't say without a full an real URL to a page.

Best regards

Here's one page where that is an issue. Thanks:

https://www.ocalahomes.online/ocala-lifestyle-blog/amp

Hi

I see. How are you inserting that image?

If you use the "Header Image URL" in the main settings page, this is intended for a header image, that is a logo or maybe just your image of a house, definitely not a banner, the image is really hard to resize in that position. Can I ask why you are using a small square image inserted into an image of very wide background instead of just the proper square house image itself? that would work fine I think.

If you use the "Header background image URL" field from the Customize settings page, the image you provide there will be stretched or sized down to fit your header, so you might want to use that.

Best regards

Hi again

Have to go so at least I think you can try the following:

.wbamp-header-sub-block.wbamp-site-image-wrapper amp-img {
width: 60%;
}

- amp-img is an element, not a CSS class and I have added some selectors before to be more selective. It should work but I have not been able to test it.

Best regards

Ok. The CSS code you provided does not correct the issue. Therefore, here is some more information that may help:

(1) I create blog posts that are 500-1400 words in length and publish one per week. Each post includes one featured image which is approximately 1200px X 800px to meet Google's AMP requirements.

(2) I then use code in the theme to reduce the size of displayed featured images to 800px X 600px.

(3) I use the Blog Designer plugin to create a blog page and display the featured blog photos with excerpts from the blog posts. Each excerpt has a "read more" button which takes the reader to the full blog post. Blog Designer downsizes the images to fit its style sheet requirements.

(4) Neither the the code change described in (2) above, nor the Blog Designer style sheet effects theses images when the are displayed on an AMP version of the blog page.

(5) Therefore, it appears that the images are displayed in the largest scale allowed by the container(s) they are displayed in.

Is there any way to control the size of these images using CSS code?

Hi

Ok. The CSS code you provided does not correct the issue.

Sorry, that was just an attempt to help.

(4) Neither the the code change described in (2) above, nor the Blog Designer style sheet effects theses images when the are displayed on an AMP version of the blog page.

As is expected because neither of those are in use on the AMP version.

(5) Therefore, it appears that the images are displayed in the largest scale allowed by the container(s) they are displayed in.

I replied in details to that, let me quote again:

If you use the "Header Image URL" in the main settings page, this is intended for a header image, that is a logo or maybe just your image of a house, definitely not a banner, the image is really hard to resize in that position. Can I ask why you are using a small square image inserted into an image of very wide background instead of just the proper square house image itself? that would work fine I think.



If you use the "Header background image URL" field from the Customize settings page, the image you provide there will be stretched or sized down to fit your header, so you might want to use that.

The "Header Image URL" is displayed by our CSS exactly as is. It is meant for a logo for instance, not a banner.

Is there any way to control the size of these images using CSS code?

Most certainly. I of course cannot provide custom CSS for you but I don't see why it would not be doable, that's just CSS. The other, proper way of doing this is of course to supply a suitable image instead of a banner image.

Best regards

Yannick Gaultier
weeblr.com
@weeblr

I really don't understand what you are talking about. My issue is with images in the body of the page, not the header banner. The problems with those is that the images are too large, not too small. But I have explained my reasoning for using images of that size. Since I am not just dealing with one image and the images whose size I am trying to control are not in the header, I can't see how using the background header image setting will help. Thank you anyway.

---- On Fri, 24 Apr 2020 03:36:33 -0400 WeeblrPress <[email protected]> wrote ----

Hi Yannick,
OK. I arrived at a solution. Since the issue only appears on the amp version of my parent blog page, I created a page heading to replace it and listed as children all my blog posts in amp format. It’s better this way anyway because the parent page defaults to the URLs of the non-amp versions of the blog posts. By replacing it with a space holder heading, I was able to provide access to the amp versions of the blog posts and to take advantage of the added speed that offers. Thanks for your input, though this time I don’t think we were on the same page.
Stay safe,Andy K.




---- On Fri, 24 Apr 2020 03:36:33 -0400 WeeblrPress<[email protected]> wrote ----