• Hello,

    So I am using the Motif theme for my site. I’m having an issue with the featured image for one of my pages that uses a full-width/grid theme. I have an idea of what’s happening after an hour or two of trial and error, but I don’t know how to fix it.

    When I upload the featured image for a full-width page (1072px wide) the quality of that image is terrible. I’m pretty sure the reason is because it scaling the featured image to the default post size (705 px wide) then re-scaling it up to 1072 which is causing the image to look distorted. I applied the default template for single posts to the page and the image looks fine, but when I apply the grid template it is messed up; I never touched the featured image when doing this test.

    Any ideas of what I would do to fix this?

    My site is https://www.michaelvcuomo.com, but I don’t have the page that I’m having trouble with live yet.

    Thanks for your help. I really appreciate it!

    Michael

Viewing 3 replies - 1 through 3 (of 3 total)
  • Can you publish the page(s) you’re talking about and post it here so we can see the images and how they are scaling:

    1. The grid layout, where the images should be smaller (probably thumbnail size, right? )

    2. And a page that has the full width image that looks distorted.

    Thread Starter michaelvcuomo

    (@michaelvcuomo)

    Sure,

    I published them and you can find the pages here: michaelvcuomo.com/mvc-u/

    The MVC U page is grid layout and that featured image is distorted. I’ve placed the same exact picture underneath it and it is crystal clear, so there isn’t an issue with the image. I’ve added two child pages – one default and the other full width – and both have the same exact image. The default featured image comes out fine but the full-width is distorted.

    Thanks for your help.

    PS the tumbnails look fine.

    Thread Starter michaelvcuomo

    (@michaelvcuomo)

    Ok, so I’ve done a little digging in the code and found this. Not sure if it is helpful or not.

    The functions.php file has a segment for featured image below:

    /**
    	 * Enable support for post thumbnails.
    	 */
    	add_theme_support( 'post-thumbnails' );
    
    	/**
    	 * Add the various thumbnail sizes.
    	 */
    	// Post thumbnails
    	set_post_thumbnail_size( 705, 435, true );
    	// Hero Image on the front page template
    	add_image_size( 'motif-hero-thumbnail', 1140, 610, true );
    	// Full width and grid page template
    	add_image_size( 'motif-page-thumbnail', 1072, 435, true );
    	// Grid child page thumbnail
    	add_image_size( 'motif-grid-thumbnail', 334, 233, true );
    	// Testimonial thumbnail
    	add_image_size( 'motif-testimonial-thumbnail', 90, 90, true );

    Now there are four page templates: default, full-width, grid, and front-page. The default template (I’m assuming its content.php) calls the post_thumbnail() here:

    <?php if ( '' != get_the_post_thumbnail() && ! post_password_required() ) : ?>
    	<div class="entry-thumbnail">
    		<?php the_post_thumbnail(); ?>
    	</div><!-- .entry-thumbnail -->
    	<?php endif; ?>

    The other templates do not have this. Is that the problem? Is it using the default set_post_thumbnail_size( 705, 435, true ); on these other templates that have larger featured images?

    Thanks again for your help

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Featured Image on page is re-scaling’ is closed to new replies.