frontpage image too small

  • Resolved stevepb

    (@stevepb)


    7 years, 1 month ago

    Hi,

    The Featured Images used for the frontpage, does not correctly re-size; and is way too low quality.

    Looking at the featured images in use on my blog pages, these re-size and scale with high quality.

    Basically my frontpage/homepage forward slashed with http://www.sheilds.org/amp/ – the featured image looks terrible due to really small size dimensions being used somewhere in the code (which I can’t locate).

    The featured image used has exactly the same original aspect dimensions of: 1220x707px

    I have swapped between each design 1, 2 & 3 and this issue happens every time and only on the home page (so far), not posts, not any other page, just the homepage only.

    the home page http://www.sheilds.org/amp/ when inspecting the image reflects these dimensions: 300x174px

    Inspecting html of frontpage:

    <figure class="amp-wp-article-featured-image wp-caption"> 					<amp-img src="http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-300x174.jpg" width="300" height="174" layout="responsive" alt="Home" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout"><i-amphtml-sizer style="display: block; padding-top: 58%;"></i-amphtml-sizer>  <img alt="Home" class="i-amphtml-fill-content i-amphtml-replaced-content" src="http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-300x174.jpg"></amp-img>	
</figure>

    Looking at the featured image used on blog pages, here for example:
    http://www.sheilds.org/occupational-disease-construction/amp/
    reflects the image dimensions of:1030x597px

    Inspecting the html from a blog post:

    <div class="post-featured-img">
				<figure class="amp-wp-article-featured-image wp-caption">
					<amp-img width="1030" height="597" src="http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min-1030x597.jpg" class="attachment-large size-large wp-post-image amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" alt="Occupational Disease in Construction" srcset="http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min-1030x597.jpg 1030w, http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min-300x174.jpg 300w, http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min-768x445.jpg 768w, http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min-705x409.jpg 705w, http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min-450x261.jpg 450w, http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min.jpg 1220w" sizes="(min-width: 1000px) 1000px, 100vw" style="width: 1000px;"><i-amphtml-sizer style="display: block; padding-top: 57.9612%;"></i-amphtml-sizer><img alt="Occupational Disease in Construction" class="i-amphtml-fill-content i-amphtml-replaced-content" src="http://www.sheilds.org/wp-content/uploads/2017/08/OccupationalDiseaseInConstruction1A-min-1030x597.jpg"></amp-img>					 
				</figure>
			</div>

    Now if I set a featured image to any other page that is not the home page I don’t have this issue, same as blog posts, this issue does not occur.

    Here’s inspected html code from a regular ‘page’ that does not suffer from the issue – as I said this problem only affects the homepage:

    <div class="amp-wp-article-featured-image amp-wp-content featured-image-content">
			<div class="post-featured-img">
				<figure class="amp-wp-article-featured-image wp-caption">
					<amp-img width="1030" height="597" src="http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-1030x597.jpg" class="attachment-large size-large wp-post-image amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" alt="SHEilds Health Safety Training" srcset="http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-1030x597.jpg 1030w, http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-300x174.jpg 300w, http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-768x445.jpg 768w, http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-705x409.jpg 705w, http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-450x261.jpg 450w, http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min.jpg 1220w" sizes="(min-width: 1000px) 1000px, 100vw" style="width: 1000px;"><i-amphtml-sizer style="display: block; padding-top: 57.9612%;"></i-amphtml-sizer><img alt="SHEilds Health Safety Training" class="i-amphtml-fill-content i-amphtml-replaced-content" src="http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-1030x597.jpg"></amp-img>					 
				</figure>
			</div>
		</div>

    Does anyone know the source of this problem? I’ve been looking for quite some time but can’t see it in the code for the plugin.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter stevepb

    (@stevepb)

    7 years, 1 month ago

    Hi,

    To get around the problem for now, I have found the image with dimensions added -300×174.jpg for example and manually overwritten the image with a 1030x597px dimension.

    effectively this image sheilds-health-safety-training-home-min-300×174.jpg is actually in these dimensions now: 1030×597.

    I have noticed however that google amp preview does not show the image on the homepage url (it does on any other page/post), so I think the image dimensions are too large for google to show in serp Rich Results/Cards.

    Still need a fix though, any clues anyone?

    frenchomatic

    (@frenchomatic)

    7 years, 1 month ago

    yes – I had this issue. You have two possibilities. The first is to change medium to large in frontpage_elements.php for your design. I did that and it worked fine but it is going to get wiped out on plugin upgrade. A better solution which I did later was to resize thumbs in the regular media settings so that medium is much larger. You have it set to 300 by 300 (I am guessing). I set my medium thumbnail size to have a width of 800 – the home page renders perfectly in google console’s AMP validator showing the image too.

    There are several plugins which allow you to resize and replace images. You set what you want normally in admin’s media settings and then run the plugin for all images or just the ones you wish to resize. Do remember that if you are using medium thumbnails elsewhere in your regular site or AMP version it will be using larger images afterwards which can have a page load time impact.

    • This reply was modified 7 years, 1 month ago by frenchomatic.
    • This reply was modified 7 years, 1 month ago by frenchomatic.
    • This reply was modified 7 years, 1 month ago by frenchomatic.
    Mohammed Razzaq

    (@marqas)

    7 years, 1 month ago

    Hi @stevepb,

    May be your checking your AMP site in Desktop, check it in mobile.

    We have added medium intentionally because it will look good in mobile view, otherwise, it will take more resources.

    frenchomatic

    (@frenchomatic)

    7 years, 1 month ago

    @marqas – I had the same issue. The problem is if your regular media settings create medium thumbnails at say 300px width. The best thing to do is to resize thumbnails so medium is larger – I choose 800px as it is renders perfectly. You pay a very small price on load times but the images are then clear on mobiles and on larger tablets which have good resolution. This is an awkward one for you as the plugin developer because you can’t know in advance what people have set in their media settings.

    When I had 300px set, even in mobile it was not crisp.

    On all other posts and pages, I did not get the issue because you are not setting medium. Those appear to be taking the large image and using screen size sets.

    • This reply was modified 7 years, 1 month ago by frenchomatic.
    • This reply was modified 7 years, 1 month ago by frenchomatic.
    • This reply was modified 7 years, 1 month ago by frenchomatic.
    Thread Starter stevepb

    (@stevepb)

    7 years, 1 month ago

    Hi,

    Using defaults and as for the difference between mobile and desktop – I also can confirm that the image quality is absolutely terrible on both mobile and desktop devices regardless.

    So, I changed from medium in all three designs from ‘medium’ to ‘medium_large’ in “templates\frontpage_elements.php”, this displays an acceptable image dimensions of 768x445px.

    Best solution for me…

    As you mention on update this would go back to defaults, I’ve kept my re-sized image for medium at 1030x707px, but with file name ending -300×174.jpg

    I strongly suggest this is changed in future releases of the plugin updates as the medium size is really bad visually on all devices.

    Thanks

    • This reply was modified 7 years, 1 month ago by stevepb.
    • This reply was modified 7 years, 1 month ago by stevepb.
    • This reply was modified 7 years, 1 month ago by stevepb.
    frenchomatic

    (@frenchomatic)

    7 years, 1 month ago

    You are correct that the frontpage php file is doing featured images differently. I have pointed it out on github already with regard to the use of alt tags too.

    Back to your problem:

    Are you redirecting (using a different home page) or are you actually using the amp editor on the home page itself to make a page? I am assuming you are doing the latter.

    Changing this line works if you replace medium to large and large is sufficiently big enough.

    $image = wp_get_attachment_image_src( $thumb_id, 'medium' );

    You can place an echo 'I am here"; just after it to make sure it is firing.

    This image looks ok to me and it is what is being shown in your AMP page.

    http://www.sheilds.org/wp-content/uploads/2015/01/sheilds-health-safety-training-home-min-768×445.jpg

    I did say reset the thumbnail sizes so medium is much larger was the best solution in the long run as edits get wiped out on upgrade. Also what is large set to in your admin panel?

    • This reply was modified 7 years, 1 month ago by frenchomatic.
    • This reply was modified 7 years, 1 month ago by frenchomatic.
    Thread Starter stevepb

    (@stevepb)

    7 years, 1 month ago

    Hi,
    Thanks for further input, as mentioned I set my size to medium_large, as this is visually acceptable on all devices and better in terms of file size.

    I removed a lot of my previous comment through edits as I felt it was a bit too naggy, but I’m pleased you noted the point about the frontpage doing this differently to other pages for the featured image, which use as large sized image of 1030x707px.

    I used the ‘cumstom amp editor’ area at the bottom of the homepage as amp has some rather big issues with my theme as you may imagine. I’m still in the process of customising the css, adding classes to the custom editor, etc. so it looks more like the rest of my non-amp theme and more pleasing on the eye to visitors.

    I’m still trying to keep things clean and basic however; and only using two amp pages at the moment (although all my blog posts are amp) – the homepage and another at http://www.sheilds.org/qualifications/amp/ which I’m still working on.

    I intend to slowly make more use of amp pages.

    Thanks

    • This reply was modified 7 years, 1 month ago by stevepb.
    frenchomatic

    (@frenchomatic)

    7 years, 1 month ago

    Glad to have found a solution for you but this does need resolving in an upgrade of the plugin. I think the small resource addition with a screen set on large image size is worth doing to mimi what happens on regular pages/posts.

    Also to use this so the alt tag gets picked up and not the ppost title 

    <figure class="amp-wp-article-featured-image wp-caption"> <?php  
				$thumb_id = get_post_thumbnail_id($post_id);
				$image = wp_get_attachment_image_src( $thumb_id, 'medium' ); 
				$caption = get_the_post_thumbnail_caption( $post_id ); 
				$alt = esc_attr(get_post_meta( $thumb_id, '_wp_attachment_image_alt', true));
				?>
				<amp-img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" layout=responsive alt="<?php echo $alt; ?>" >  </amp-img>
    Mohammed Razzaq

    (@marqas)

    7 years, 1 month ago

    Hi @stevepb and @frenchomatic,

    Thank you so much for all your support and suggestions.

    I have created a ticket about it in our Github and will surely resolve this in our next updates.

    reference: https://github.com/ahmedkaludi/accelerated-mobile-pages/issues/1063

    Regards
    Marqas

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘frontpage image too small’ is closed to new replies.