Hey Tim,

Thank you for the inquiry.

It may depend on the elements that are actually used in the site. If there are a lot of masonry elements for example and they are all set to use the default thumbnail, then the “masonry” thumbnail should be kept. WordPress also default back to the original image if a thumbnail is not available, so even if we remove all thumbnails, the site should still work fine.

The following threads should help.

// https://kriesi.at/support/topic/enfold-image-sizes-3/#post-1109028
// https://kriesi.at/support/topic/how-can-i-delete-all-enfold-image-sizes/

Best regards,
Ismael

Hi,
Thank you for your patience and the links to your site, the portfolio size images on the archive pages is set by line 190 in the enfold/functions.php file

I didn’t find an easy way to adjust the image size on the archive page so I would recommend changing the portfolio size from array('width'=>495, 'height'=>400 ); to mmatch the magazine size array('width'=>710, 'height'=>375 ); and then you will need to regenerate your thumbnails and then check.
This would also change any other use of the portfolio thumbnails on your site, but it doesn’t look like this would be an issue for you.

Best regards,
Mike

Hey mirotck,

Thank you for the inquiry.

The size of the images in the portfolio grid are not the same, which is why the items are not aligned. To keep the grid consistent, you have to make sure that the images have the same size and aspect ratio. You could also select a specific size or thumbnail in the Styling > Grid Settings > Portfolio Grid Image Size settings, but thumbnails may still vary in width and height, so this may not work as expected.

Best regards,
Ismael

Hey Knutnik,

Thank you for the inquiry.

What do you mean by “option”? If you are referring to the size of the images, it may depend on the value that was set in the Enfold > General Layout > Dimensions > Maximum Container width field. The width of the 1/1 column will not exceed this value, so any image that has the same exact size as the maximum container width or larger should be fine.

The theme also adds an srcset attribute to images and displays the appropriate thumbnail based on the current screen size, but you may need to use an actual image element from the builder instead of manually adding the image in a text block. You have the option to select the full size or the original version of the image before inserting it.

Best regards,
Ismael

Hi,
Thank you for trying the masonry gallery element, I see that the same issue with the WordPress created thumbnails is occuring, I’m not sure why. As I look at your /picturebooks/ page again, I almost believe that the images are correct until you hover over them and then they are blurry, please check again and see if you also believe this, if so we can investigate the css:

.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}

But if you don’t think this is true, then I wrote this script for the /picturebooks/ page that will replace your thumbnails with the original image that is linked in the lightbox for you to try. Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_masonry_img_script() { ?>
    <script>
(function($){
$("#top.page-id-937 .av-masonry-entry").each(function(){
    var imageUrl = $(this).attr("href");
    $(this).find(".av-masonry-image-container img").attr("src", imageUrl);
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_masonry_img_script');

Best regards,
Mike

Hi,
Thank you for your patience, and the link to your site, when I compare the actual image & it’s thumbnail I see a slight difference, but I’m not sure what may cause this. It looks like you are using the masonry element, please try creating a test page using the masonry gallery element, it seems to offer multiple image sizes on page load that may help.

Best regards,
Mike

Hey Mickyhood,
Thank you for your patience, the /framework/php/ files can not be added to a child theme to override, you can copy the function you want to override to your child theme functions.php and make your changes, so for example to remove the image container from the Latest News widget

I copied this function from \wp-content\themes\enfold\framework\php\class-framework-widgets.php

if (!class_exists('avia_newsbox'))
{
	class avia_newsbox extends WP_Widget {

		var $avia_term = '';
		var $avia_post_type = '';
		var $avia_new_query = '';

		function __construct()
		{
			$widget_ops = array('classname' => 'newsbox', 'description' => __('A Sidebar widget to display latest post entries in your sidebar', 'avia_framework') );

			parent::__construct( 'newsbox', THEMENAME.' Latest News', $widget_ops );
		}

		function widget($args, $instance)
		{
			global $avia_config;

			extract($args, EXTR_SKIP);
			echo $before_widget;

			$title = empty($instance['title']) ? '' : apply_filters('widget_title', $instance['title']);
			$count = empty($instance['count']) ? '' : $instance['count'];
			$cat = empty($instance['cat']) ? '' : $instance['cat'];
			$excerpt = empty($instance['excerpt']) ? '' : $instance['excerpt'];
			$image_size = isset($avia_config['widget_image_size']) ? $avia_config['widget_image_size'] : 'widget';
			
			/**
			 * @since 4.5.4
			 * @return string
			 */
			$image_size = apply_filters( 'avf_newsbox_image_size', $image_size, $args, $instance );

			if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };


			if(empty($this->avia_term))
			{
				$additional_loop = new WP_Query("cat=".$cat."&posts_per_page=".$count);
			}
			else
			{
				$catarray = explode(',', $cat);


				if(empty($catarray[0]))
				{
					$new_query = array("posts_per_page"=>$count,"post_type"=>$this->avia_post_type);
				}
				else
				{
					if($this->avia_new_query)
					{
						$new_query = $this->avia_new_query;
					}
					else
					{
						$new_query = array(	"posts_per_page"=>$count, 'tax_query' => array(
														array( 'taxonomy' => $this->avia_term,
															   'field' => 'id',
															   'terms' => explode(',', $cat),
															   'operator' => 'IN')
															  )
														);
					}
				}

				$additional_loop = new WP_Query($new_query);
			}

			if($additional_loop->have_posts()) :



			echo '<ul class="news-wrap image_size_'.$image_size.'">';
			while ($additional_loop->have_posts()) : $additional_loop->the_post();

			$format = "";
			if(empty($this->avia_post_type)) 	$format = $this->avia_post_type;
			if(empty($format)) 					$format = get_post_format();
	     	if(empty($format)) 					$format = 'standard';
			
			$the_id = get_the_ID();
			$link = get_post_meta( $the_id  ,'_portfolio_custom_link', true) != "" ? get_post_meta( $the_id ,'_portfolio_custom_link_url', true) : get_permalink();
			
			
			echo '<li class="news-content post-format-'.$format.'">';

			//check for preview images:
			$image = "";

			if(!current_theme_supports('force-post-thumbnails-in-widget'))
			{
				$slides = avia_post_meta(get_the_ID(), 'slideshow', true);

				if( $slides != "" && !empty( $slides[0]['slideshow_image'] ) )
				{
					$image = avia_image_by_id($slides[0]['slideshow_image'], $image_size, 'image');
				}
			}

			if(current_theme_supports( 'post-thumbnails' ) && !$image )
			{
				$image = get_the_post_thumbnail( $the_id, $image_size );
			}

			$time_format = apply_filters( 'avia_widget_time', get_option('date_format')." - ".get_option('time_format'), 'avia_newsbox' );


			echo "<a class='news-link' title='".get_the_title()."' href='".$link."'>";

			$nothumb = (!$image) ? 'no-news-thumb' : '';

			echo "<span class='news-thumb $nothumb'>";
			echo $image;
			echo "</span>";
			if(empty($avia_config['widget_image_size']) || 'display title and excerpt' != $excerpt)
			{
				echo "<strong class='news-headline'>".get_the_title();
				
				if($time_format)
				{
					echo "<span class='news-time'>".get_the_time($time_format)."</span>";	
				}
				
				echo "</strong>";
			}
			echo "</a>";

			if( 'display title and excerpt' == $excerpt )
			{
				echo "<div class='news-excerpt'>";

				if(!empty($avia_config['widget_image_size']))
				{
					echo "<a class='news-link-inner' title='".get_the_title()."' href='".$link."'>";
					echo "<strong class='news-headline'>".get_the_title()."</strong>";
					echo "</a>";
					if($time_format)
					{
						echo "<span class='news-time'>".get_the_time($time_format)."</span>";	
					}

				}
				the_excerpt();
				echo "</div>";
			}

			echo '</li>';


			endwhile;
			echo "</ul>";
			wp_reset_postdata();
			endif;


			echo $after_widget;

		}


		function update($new_instance, $old_instance)
		{
			$instance = $old_instance;
			$instance['title'] = strip_tags($new_instance['title']);
			$instance['count'] = strip_tags($new_instance['count']);
			$instance['excerpt'] = strip_tags($new_instance['excerpt']);
			$instance['cat'] = implode(',',$new_instance['cat']);
			return $instance;
		}



		function form($instance)
		{
			$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'count' => '', 'cat' => '', 'excerpt'=>'' ) );
			$title = strip_tags($instance['title']);
			$count = strip_tags($instance['count']);
			$excerpt = strip_tags($instance['excerpt']);


			$elementCat = array("name" 	=> __("Which categories should be used for the portfolio?", 'avia_framework'), 
								"desc" 	=> __("You can select multiple categories here", 'avia_framework'),
					            "id" 	=> $this->get_field_name('cat')."[]",
					            "type" 	=> "select",
					            "std"   => strip_tags($instance['cat']),
					            "class" => "",
	            				"multiple"=>6,
					            "subtype" => "cat");
			//check if a different taxonomy than the default is set
			if(!empty($this->avia_term))
			{
				$elementCat['taxonomy'] = $this->avia_term;
			}




			$html = new avia_htmlhelper();

	?>
			<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'avia_framework'); ?>
			<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></label></p>

			<p>
				<label for="<?php echo $this->get_field_id('count'); ?>"><?php _e('How many entries do you want to display: ', 'avia_framework'); ?></label>
				<select class="widefat" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>">
					<?php
					$list = "";
					for ($i = 1; $i <= 20; $i++ )
					{
						$selected = "";
						if($count == $i) $selected = 'selected="selected"';

						$list .= "<option $selected value='$i'>$i</option>";
					}
					$list .= "</select>";
					echo $list;
					?>


			</p>

			<p><label for="<?php echo $this->get_field_id('cat'); ?>"><?php _e('Choose the categories you want to display (multiple selection possible):', 'avia_framework'); ?>
			<?php echo $html->select($elementCat); ?>
			</label></p>

			<p>
				<label for="<?php echo $this->get_field_id('excerpt'); ?>"><?php _e('Display title only or title & excerpt', 'avia_framework'); ?></label>
				<select class="widefat" id="<?php echo $this->get_field_id('excerpt'); ?>" name="<?php echo $this->get_field_name('excerpt'); ?>">
					<?php
					$list = "";
					$answers = array(
								'show title only'			=>	__( 'show title only', 'avia_framework' ),
								'display title and excerpt'	=>	__('display title and excerpt', 'avia_framework')
								);
					
					foreach ( $answers as $key => $answer )
					{
						$selected = "";
						if( $key == $excerpt ) $selected = 'selected="selected"';

						$list .= "<option $selected value='$key'>$answer</option>";
					}
					$list .= "</select>";
					echo $list;
					?>


			</p>


	<?php
		}
	}
}

and commented out lines 989-991

for this result:

Please give this a try.

Best regards,
Mike

Hi,

Please try this CSS as well:

.single-product .thumbnails a {
    width: 60px !important;
    padding: 0px !important;
}

Best regards,
Rikard

Hi,
Thank you for your patience and for the link to your site, you could try this script that will count the number of thumbnails in each thumbnail gallery and add a class to that div that represents how many thumbnails there are. Then you could use some css for that class that will set the width for you.
Try adding this code to the end of your functions.php file in Appearance > Editor:

function count_thumbs_script() { ?>
    <script>
(function($) {
var matched = $(".avia-gallery-thumb a");
$('.avia-gallery-thumb').addClass('thumbs-' + matched.length);
}(jQuery));
</script>
    <?php
}
add_action('wp_footer', 'count_thumbs_script');

This will add the class thumbs-6 if there are six thumbnails on the page.
For the css note that I specifically targeted your single-hotels pages so other pages would not run the script and cause possible conflicts. Also note that this css rule only sets the width for six thumbnails, you will need to add more for other numbers:

#top.single-hotels .avia-gallery-thumb.thumbs-6 > a > img {
	    width: 16.66% !important;
}

Hope this helps.

Best regards,
Mike

Hi,

This must occur during the original upload. Is that true? If so, it would explain why my migration skipped the thumbnailing process.

Yes, the thumbnails are generated when uploading an image.

I am a bit concerned about this. Are all of the sizes necessary — and is there any way to reduce the number of thumbs generated?

You can actually disable every registered thumbnails without causing any problem. WordPress will just fall back to the original image when necessary. The thumbnails are added to improve the site’s loading speed. They are there so that WordPress or the theme will not have to use the largest image when a smaller one will do.

To unset or deregister the thumbnails, you can use this snippet in the functions.php file.

// deregister theme thumbnails
function ava_remove_enfold_image_sizes() {
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}
add_action('init', 'ava_remove_enfold_image_sizes');

Next time an image is uploaded, the thumbnails listed above will not be generated.

Best regards,
Ismael

Hi,

Have you tried adjusting the dimension of the thumbnail? You should also add this css code to prevent the theme from stretching the featured image or to prevent it from inheriting the width of the content container.

.big-preview.single-big a img {
	width: auto;
}

Best regards,
Ismael

Hi,

the cropping option for registered thumbnails

The theme uses the following function to generate other versions or thumbnails of an image. One of the parameters is called “crop”, which tells WordPress to crop or scale the image.

// https://developer.wordpress.org/reference/functions/add_image_size/

Yes, the theme relies on those thumbnail names. You may need to regenerate the thumbnails or the images if you did something in the database.

// https://wordpress.org/plugins/regenerate-thumbnails/

Best regards,
Ismael