grid results / thumbnails

Anonymous

#191491

Hello,
I use your plugin for the homepage of my website:
You helped me to configure the presentation of this page: https://www.filmspourenfants.net/
(See topic: https://support.searchandfilter.com/forums/topic/show-results-in-grid/)

I see a problem, the images that appear in grid (thumbnails) are actually very large and therefore take time to load.

Example with the film Silent Voice :

The image come from the url:
https://www.filmspourenfants.net/wp-content/uploads/2018/10/silent-voice-a.jpg
instead of this one:
https://www.filmspourenfants.net/wp-content/uploads/2018/10/silent-voice-a-183×250.jpg

which is available on this page as thumbnails:
https://www.filmspourenfants.net/silent-voice/

Can you please help me use the urls small thumbnails rather than large images?

As a reminder, here is the code of my results.php file:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

if ( $query->have_posts() )
{
	?>
	
 <div class="gp-blog-wrapper gp-blog-columns-6">
	 <div class="gp-inner-loop ajax-loop">
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
		<section class="gp-post-item post-<?php get_the_id();?> post type-post format-standard has-post-thumbnail category-post-formats" itemscope="" itemtype="http://schema.org/Blog">
			<div class="gp-post-thumbnail gp-loop-featured">
				<div class="gp-image-above">
					<a href="<?php the_permalink(); ?>">
			<?php 
				if ( has_post_thumbnail() ) {
					the_post_thumbnail("small", array('class' => 'gp-post-image gp-large-image'));
					the_post_thumbnail("thumb", array('class' => 'gp-post-image gp-mobile-image'));
				}
			?>
					</a>
				</div>
			</div>
			<div class="gp-loop-content gp-image-above">
				<h2 class="gp-loop-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				<div class="gp-loop-cats">
					<?php echo get_the_term_list( get_the_id(), 'gp_hubs', '', ' ', '' ); ?> 

				</div>
			</div>
		</section>
		<?php
	}
	?>
	</div></div>
	Page <?php echo $query->query['paged']; ?> sur <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Page suivante', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Page précédente' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "Aucun résultat";
}
?>

Trevor

#191518

Please see this section of the code:

if ( has_post_thumbnail() ) {
  the_post_thumbnail("small", array('class' => 'gp-post-image gp-large-image'));
  the_post_thumbnail("thumb", array('class' => 'gp-post-image gp-mobile-image'));
}

You appear to be outputting both a small/large and thumbnail image? This is not our standard code, so I guess it comes from your theme. What happens if you load only the second, thumb, imaage?

Anonymous

#191524

Ok it’s done :

<?php 
				if ( has_post_thumbnail() ) {
					the_post_thumbnail("thumb", array('class' => 'gp-post-image gp-mobile-image'));
				}
			?>

But now the images do not load anymore :
https://www.filmspourenfants.net/

Trevor

#191528

Remove the class ‘gp-mobile-image’ from the code.

Anonymous

#191534

Ok great, it works, my images appear, and its light, so loading is faster.
The shape of the images is square. Is it possible to increase the height?

Trevor

#191536

They are using the media sizes set in WordPress, and thumbnails are normally square. You would need to add a new media size or re-define an existing one, then change the code to use that size, then use a plugin to re-make all the images in that new size.

Anonymous

#191542

But I have the impression that each of my images are already resized in several sizes.
Look at my FTP:

Thanks for your help.

Trevor

#191546

All you need, then, is to know the ‘name’ of each size to replace the word ‘thumb’ in the code. I am not sure where you will find this, but it will be somewhere in WordPress or the plugin that makes all these sizes.

Anonymous

#191805

Hi Trevor, thank you very much for your help.
I have finally changed the thumbnail sizes in the WordPress settings.

And now I have the perfect size on my homepage:
https://www.filmspourenfants.net/

Good day and good luck.
Thanks again.

[Author]

Posts