#208 – sizing images

Posted in ‘weeblrAMP’
This is a public ticket. Everybody will be able to see its contents. Only enter usernames, passwords or any other sensitive information in the Private information field.
Thursday, 23 April 2020 15:46 UTC
Andy K
 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.
 
Thursday, 23 April 2020 16:02 UTC
wb_weeblrpress
Hi

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

Best regards
 
Thursday, 23 April 2020 16:55 UTC
Andy K
Here's one page where that is an issue. Thanks:

https://www.ocalahomes.online/ocala-lifestyle-blog/amp
 
Thursday, 23 April 2020 17:15 UTC
wb_weeblrpress
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
 
Thursday, 23 April 2020 17:21 UTC
wb_weeblrpress
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

 
Thursday, 23 April 2020 18:31 UTC
Andy K
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?
 
Friday, 24 April 2020 07:36 UTC
wb_weeblrpress
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
 
Friday, 24 April 2020 11:06 UTC
Andy K
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 ----

 
Friday, 24 April 2020 21:36 UTC
Andy K
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 ----

 
This ticket is closed, therefore read-only. You can no longer reply to it. If you need to provide more information, please open a new ticket and mention this ticket's number.