Change image size in archives/list

Hi Kharis,

I hope this is the last time I have to bother you. :slight_smile:

I want just want to change the image size in the archives list to a square ratio, specifically 250px by 250 px. Is it possible to do that? I tried changing it in the CSS, but it doesn’t appear that I did it right.

Thank you!

Heather

Hello there,

To achieve it, firstly, you need to define a new image size in your child theme’s functions. Add the following code into your child theme’s functions.php file.


/**
 * New image size
 */
add_action('init', 'greatmag_child_image_size');
function greatmag_child_image_size(){

  add_image_size( 'greatmag-thumb-archive', 250, 250, true );

}

Then you’ll need a copy of content.php file from parent theme which resides in the template-parts folder. Replicate the same in your child theme. So you’ll have greatmag-child/template-parts/content.php. Then edit this file and find the following line:


<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="featured-img"><?php the_post_thumbnail( greatmag_index_image_sizes() ); ?></a>

Replace it with this code block to call your new image size in archive page:


<?php
$thumbnail_size = greatmag_index_image_sizes();
if( is_archive() ) {
   $thumbnail_size = 'greatmag-thumb-archive';
}
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="featured-img"><?php the_post_thumbnail($thumbnail_size); ?></a>

Update the changes by transferring them through FTP. Once you’re done, you will need to regenerate your images with new thumbnail size which can be done using this plugin.

Regards,
Kharis

It didn’t work. :frowning: I added a new post with a new image and it still cropped it the same way. Do you have any other suggestions?

Here’s what I currently have in the child theme’s file content.php in the template-parts folder

<?php
/**

?>

<article id=“post-<?php the_ID(); ?>” <?php post_class(); ?>>

&lt;?php if ( has_post_thumbnail() ) : ?&gt;
	&lt;div class="media-left"&gt;
		&lt;div class="media-object"&gt;
			&lt;?php

$thumbnail_size = greatmag_index_image_sizes();
if( is_archive() ) {
$thumbnail_size = ‘greatmag-thumb-archive’;
}
?>
" title="<?php the_title(); ?>" class=“featured-img”><?php the_post_thumbnail($thumbnail_size); ?>
<?php greatmag_get_post_cats( $first_cat = true ); ?>
</div>
</div>
<?php endif; ?>

&lt;div class="media-body"&gt;
	&lt;header class="entry-header"&gt;
		&lt;?php

		the_title( '&lt;h2 class="entry-title"&gt;<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a>&lt;/h2&gt;' );

		if ( 'post' === get_post_type() &amp;&amp; get_theme_mod('hide_meta_index') != 1 ) : ?&gt;
		&lt;div class="entry-meta"&gt;
			&lt;?php greatmag_posted_on(); ?&gt;
		&lt;/div&gt;&lt;!-- .entry-meta --&gt;
		&lt;?php
		endif; ?&gt;
	&lt;/header&gt;&lt;!-- .entry-header --&gt;

	&lt;div class="entry-content"&gt;
		&lt;?php
			the_excerpt();

			wp_link_pages( array(
				'before' =&gt; '&lt;div class="page-links"&gt;' . esc_html__( 'Pages:', 'greatmag' ),
				'after'  =&gt; '&lt;/div&gt;',
			) );
		?&gt;
	&lt;/div&gt;&lt;!-- .entry-content --&gt;

&lt;/div&gt;

</article><!-- #post-## -->

Could you please confirm if you have inserted the following code into your child theme’s functions.php file?


/**
 * New image size
 */
add_action('init', 'greatmag_child_image_size');
function greatmag_child_image_size(){

  add_image_size( 'greatmag-thumb-archive', 250, 250, true );

}

Regards,
Kharis

Yes it is there in the functions.php file. Here is the full script in the file. Maybe I put in an extra space or something?

<?php
function my_theme_enqueue_styles() {

$parent_style = 'greatmag-style'; // This is 'greatmag-style' for the GreatMag theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()-&gt;get('Version')
);

}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

/**

  • New image size
    */
    add_action(‘init’, ‘greatmag_child_image_size’);
    function greatmag_child_image_size(){

add_image_size( ‘greatmag-thumb-archive’, 250, 250, true );

}

Hello there,

Your child theme’s functions.php looks fine. Please share the link to one of your archive pages, so I can check.

Regards,
Kharis

oh wait! it is working on the archives pages! But its not working on the front page… which I thought was considered an archive page, as well? So can we just get it to work on the home page, too?

Here is the archives page where it is working: http://www.stuffed-pepper.com/category/recipes/

Here is the front page: www.stuffed-pepper.com

thank you so much!

Hello there,

To apply new image size on your homepage, edit your greatmag-child/template-parts/content.php file. Then replace this code block:


<?php
$thumbnail_size = greatmag_index_image_sizes();
if( is_archive() ) {
   $thumbnail_size = 'greatmag-thumb-archive';
}
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="featured-img"><?php the_post_thumbnail($thumbnail_size); ?></a>

with:


<?php
$thumbnail_size = greatmag_index_image_sizes();
if( is_archive() || is_home() ) {
   $thumbnail_size = 'greatmag-thumb-archive';
}
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="featured-img"><?php the_post_thumbnail($thumbnail_size); ?></a>

Let me know how it goes.

Regards,
Kharis

worked beautifully! thank you!

You’re most welcome here!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis