I would like to have a template like this:
https://prnt.sc/hc2ifn
How can I do it? in the demo, the short code “Blog posts” is being used, and it looks like this image.

But when I try to use “blog posts” it looks different:
https://prnt.sc/hc2hmm
The thumbnail is getting on top of the title, not next to it as in the demo.

Since posting this I’ve added more images and the problem has gone away but then returned gain later on. But when clicking on a thumbnail to open a large image my PC hung up for a good three minutes on one occasion, so I’m assuming putting a lot of high res images in one page is hammering the memory. Some advice on the best way to manage a page like this would be appreciated. Here are some specific questions:
1) I’m using ‘Gallery’ under ‘media elements’- is it a good idea to just load pictures straight from my camera (at around 2Mb each) or should I reduce the resolution before loading them? Would this speed up the page load?
2) If I put four pictures in a row and then reduce the page size down to a mobile phone size, the pictures shrink down but don’t re-arrange themselves into rows of one or two as i might have expected. Is there anyway I can do this?.
3) Is there any way I can display pictures with a caption below each of them permanently, instead of the pop-up caption I get by default?

I download regenerate thumbnail plugin and is already the same problem !

Regards
Emmanuel

hello victoria, yes, but we fell back to the normal square thumbnails.
i think what i want could be accomplished with the masonry gallery, but than there is this
white triangle at the bottom of the thumb, and im pretty sure my client does not want that.
besides, i need the default alttekst field (the pale one) AND i dont need the caption showing under the thumb.
(only under the big image in the lightbox).

Hi @ismael, many thanks for your response. However, the issue persists. The banners are still doubled on the category page.

Here’s the full code I’m using:

// Fix Enfold from using 1500px wide image and use the full-size image instead
add_action( 'init', 'ssi_woocommerce_full_width_category_images', 50 );
function ssi_woocommerce_full_width_category_images()
{
	if( is_tax( 'product_cat' ) && ! is_shop() ) {
    remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
    }
	add_action( 'ava_after_main_container', 'avia_woocommerce_parallax_banner_child_theme', 11);

	function avia_woocommerce_parallax_banner_child_theme($bg, $overlay, $opacity, $description, $font)
	{

		if(is_numeric($bg))
		{
			$bg = wp_get_attachment_image_src($bg, 'full');
			if(is_array($bg) && $bg[0] != "") $bg = $bg[0];
		}

		if($font) $font = "style='color:{$font};'";
		if($bg) $bg = "background-image: url(".$bg.");";

		$output = "";

		$output .='<div id="av_product_description" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section av-section-color-overlay-active avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch" '.$font.'>';
		$output .='<div class="av-parallax  avia-full-stretch" data-avia-parallax-ratio="0.3">';
		$output .='<div class="av-parallax-inner" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
		$output .='</div>';
		$output .='</div>';

		$output .='<div class="av-section-color-overlay-wrap">';
		if(!empty($overlay))
		{
			$output .='<div class="av-section-color-overlay" style="opacity: '.$opacity.'; background-color: '.$overlay.'; "></div>';
		}

		$output .='<div class="container">';
		$output .='<main class="template-page content av-content-full alpha units">';
		if($description) $output .= "<h1>".$description."</h1>";
		$output .='</main></div></div></div>';

		return $output;
	}

	remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
	add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_child_theme', 11 );

	function avia_woocommerce_big_cat_banner_child_theme()
	{
		if(is_product_category())
		{
			global $wp_query, $avia_config;

			if(isset($wp_query->query_vars['taxonomy']))
			{
				$term = get_term_by( 'slug', get_query_var($wp_query->query_vars['taxonomy']), $wp_query->query_vars['taxonomy']);
				if(!empty($term->term_id))
				{
					$description 	= term_description() ;
					$style 			= get_woocommerce_term_meta($term->term_id, 'av_cat_styling');
					$attachment_id 	= get_woocommerce_term_meta($term->term_id, 'thumbnail_id');

					$overlay 	= get_woocommerce_term_meta($term->term_id, 'av-banner-overlay');
					$font 		= get_woocommerce_term_meta($term->term_id, 'av-banner-font');
					$opacity 	= get_woocommerce_term_meta($term->term_id, 'av-banner-overlay-opacity');

					if(!empty($style))
					{
						remove_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 11 );
						echo avia_woocommerce_parallax_banner_child_theme($attachment_id, $overlay, $opacity, $description, $font);
						$avia_config['woo-banner'] = true;
					}
				}
			}
		}
	}
}

Hi Victoria,

Thanks for the tip. That could also be a suggestion for the horizontal gallery: a checkbox labeled “Show thumbnails on mobile”.

Thanks again and best regards

The Pagination is NOT working. I have added the plugin and its still not working. I have not loaded my CPT in the plugin because I already have it registered in my functions files and I don’t want to risk losing any of my data.

here is the code for my CPT

// let's create the function for the custom type
function custom_post_newsroom() { 
	// creating (registering) the custom type 
	register_post_type( 'newsroom', /* (http://codex.wordpress.org/Function_Reference/register_post_type) */
	 	// let's now add all the options for this post type
		array('labels' => array(
			'name' => __( 'Newsroom' ), /* This is the Title of the Group */
			'singular_name' => __( 'Newsroom' ), /* This is the individual type */
			'all_items' => __( 'All News' ), /* the all items menu item */
			'add_new' => __( 'Add New' ), /* The add new menu item */
			'add_new_item' => __( 'Add New News Item' ), /* Add New Display Title */
			'edit' => __( 'Edit' ), /* Edit Dialog */
			'edit_item' => __( 'Edit News Item' ), /* Edit Display Title */
			'new_item' => __( 'New News Item' ), /* New Display Title */
			'view_item' => __( 'View Newsroom' ), /* View Display Title */
			'search_items' => __( 'Search Newsroom' ), /* Search Custom Type Title */ 
			'not_found' =>  __( 'No News Found.' ), /* This displays if there are no entries yet */ 
			'not_found_in_trash' => __( 'Nothing found in Trash' ), /* This displays if there is nothing in the trash */
			'parent_item_colon' => ''
			), /* end of arrays */
			'description' => __( 'This is the example custom post type' ), /* Custom Type Description */
			'public' => true,
			'publicly_queryable' => true,
			'exclude_from_search' => false,
			'show_ui' => true,
			'query_var' => true,
			'menu_position' => 6, /* this is what order you want it to appear in on the left hand side menu */ 
			'menu_icon' => 'dashicons-format-aside', /* the icon for the custom post type menu. uses built-in dashicons (CSS class name) */
			'rewrite'	=> array( 'slug' => 'newsroom', 'with_front' => false ), /* you can specify its url slug */
			'has_archive' => 'true', /* you can rename the slug here */
			'capability_type' => 'post',
			'hierarchical' => true,
			/* the next one is important, it tells what's enabled in the post editor */
			'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'revisions', 'comments' )
	 	) /* end of options */
	); /* end of register post type */
	
} 

// adding the function to the WordPress init
add_action( 'init', 'custom_post_newsroom');

Thanks Ismael, but this is not what I had in mind. The provided code changes the thumbnail image within the post article.
I’d like to change the thumbnail image on this page https://www.annapinnock.co.uk/articles/ which is a page that list all the articles. At the moment it’s still 81x81px. Could you please help? I need to remove the code you provided as it messes up my blog article.

Many thanks,

Anna

Victoria,

I’ve noticed that you (or somebody else part of the team) has done a wonderful job in making the video thumbnail look awesome and fixing the testimonial slider. Thanks so much.

The only thing that’s left for this mini-project is hiding the small bar above the header on that page, and then it is complete.

Again, nothing but thanks to you guys.