Hey Nicco
That works for Desktop View. On Mobile view, there is now some space between the thumbnail rows. I could live with it, but if there’s a solution…
René
-
This reply was modified 5 years, 1 month ago by
baiker.
Hi baiker,
Some of the thumbnails are slightly larger than the others which causes the issue.
To fix it, try adding this CSS code in Enfold > General Styling > Quick CSS:
#top #wrap_all .avia-gallery-thumb a {
height: 82px;
}
Hope it helps.
Best regards,
Nikko
Once again:
3: Enfold deletes the metadata from the images, at least for every image which is generated by Enfold
Example: The original image “test.jpg” contains all IPTC-data, the image “test-845×684.jpg” (which is an Enfold-thumbnail) has no IPTC-data anymore.
(you can easily check it yourself by adding this plugin into your Chrome or Firefox: addons.mozilla.org/en-US/firefox/addon/iptc-photo-metadata-inspector/)
Hi,
Thank you for the inquiry.
In the blog post element, you could select a different thumbnail from the Styling > Preview Image Size settings. Have you tried it? However, it is best to always upload images with the same size and aspect ratio to get a consistent grid.
Best regards,
Ismael
Hi
I use a on pages Gallery, big picture with thumbnails below, Gallery (845×684), and same size for all thumbnails (Portfolio 495×400).
But even when all pictures have the same size, there are caps/spaces between the thumbnails. Got this problem on different Pages.
What is here the problem? See for example Link in private content.
Thanks
René
Hi,
HOWEVER it is now creating 7 sets of each image !
Those thumbnails are probably from another plugin. In Enfold > Performance > Responsive Images And Lazy Loading section, you could enable the Image Thumbnails Info option to display all registered thumbnails from the theme and from other plugins, including the name of the thumbnail and their sizes.
Best regards,
Ismael
You’ll need to use Chrome Lighthouse, or the 3G throttling mode to see what I am referring to. On that page or related ones, with a 3G throttle:
– logo loads after menu
– all the related product thumbnails load before the main image (because they are above the fold due to description tag not yet expanding)
– +/- buttons for quantity load
– description tab loads pushing thumbnails below the fold
– then main product image loads
The core web vitals scores in Lighthouse demonstrate this with very different scores compared to an unthrottled test like GTMetrix.
Thanks,
Jason
I have seen older threads like this one
so I have used the filter below in my child theme
`function ava_image_sizes() {
remove_image_size(‘widget’);
remove_image_size(‘featured’);
remove_image_size(‘featured_large’);
remove_image_size(‘extra_large’);
remove_image_size(‘portfolio_small’);
remove_image_size(‘magazine’);
remove_image_size(‘masonry’);
remove_image_size(‘entry_without_sidebar’);
remove_image_size(‘entry_without_sidebar’);
remove_image_size(‘entry_without_sidebar’);
}
add_action( ‘after_setup_theme’, ‘ava_image_sizes’, 11 );
and it has reduced the number of sizes created – HOWEVER it is now creating 7 sets of each image !
here is a record of one of the images
https://gccre.com.au/wp-content/uploads/2021/02/image-creation.pdf
Hi,
@smarta-brett: Please refrain from opening up old threads and create your own ticket instead. The inquiry form is located in the following page.
// https://kriesi.at/support/forum/enfold/#new-post
We replied here: https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1278521
Best regards,
Ismael
Hi,
As recommended by @Guenni007 above, you could use the provided filter to disable the default thumbnails and prevent regeneration of images that were registered by the theme.
// https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1270140
Best regards,
Ismael
Screenshot is not necessary.
I solved the problem in another way: “… changed Gallery styling from “Small thumbnails” to “Big image with thumbnails below”, which allows better navigation between thumbnails and full-view images.
In the older “Small thumbnails” Gallery styling, it was certainly possible to scroll through the linked images in full resolution using the arrows – and animated closing symbol. I don’t mean the arrows on the keyboard, but the ones on the screen – similar to the Slider “Slideshow control” element.
This option seems to have been removed in some newer versions of the Enfold template. Could it be so?
If so, then the current “Small thumbnails only” styling is very little usable.
—
However, sometimes it is more convenient to have thumbnails the right.
Can you please add the option “Big image with thumbnails right” to the “Gallery” – “Styling” tab?
—
Thank you for your cooperation and please move the theme for the new gallery style“Big image with thumbnails right” to the list of requirements in one of the next versions.
Best regards,
ViBe
-
This reply was modified 5 years, 1 month ago by
VB_web.
Hi
I am working on this problem too
I have a situation where I have a site that is importing real estate listings from a hub – the site only needs 2 thumbnails of a certain size (one for from end and one for admin/media library) and 3 larger images of a certain size for the font end
it seem WP & Enfold crate 29 versions of each image
I have worked out which images I need to keep
eg
18195851__1612125956-22539-Office1-300×225.jpg
18195851__1612125956-22539-Office1-300×200.jpg
18195851__1612125956-22539-Office1-845×684.jpg
18195851__1612125956-22539-Office1-scaled-800x500_c_epl_slider.jpg
18195851__1612125956-22539-Office1-2048×1536.jpg
and all these are not needed
18195851__1612125956-22539-Office1-100×100.jpg
18195851__1612125956-22539-Office1-1030×773.jpg
18195851__1612125956-22539-Office1-1210×423.jpg
18195851__1612125956-22539-Office1-1500×1125.jpg
18195851__1612125956-22539-Office1-1500×430.jpg
18195851__1612125956-22539-Office1-1500×630.jpg
18195851__1612125956-22539-Office1-1536×1152.jpg
18195851__1612125956-22539-Office1-180×180.jpg
18195851__1612125956-22539-Office1-2048×1536.jpg
18195851__1612125956-22539-Office1-260×185.jpg
18195851__1612125956-22539-Office1-36×36.jpg
18195851__1612125956-22539-Office1-495×400.jpg
18195851__1612125956-22539-Office1-705×529.jpg
18195851__1612125956-22539-Office1-710×375.jpg
18195851__1612125956-22539-Office1-768×576.jpg
18195851__1612125956-22539-Office1-80×80.jpg
18195851__1612125956-22539-Office1-845×321.jpg
18195851__1612125956-22539-Office1-845×684.jpg
18195851__1612125956-22539-Office1-scaled-120x120_c_epl_slider.jpg
18195851__1612125956-22539-Office1-scaled-400×300.jpg
18195851__1612125956-22539-Office1-scaled-800x500_c_epl_slider.jpg
18195851__1612125956-22539-Office1-scaled.jpg
18195851__1612125956-22539-Office1.jpg
how can I add these to the above code for my child there functions.php file
maybe
remove_image_size(‘1030×773.jpg’);
would that work ?
or do I need it without the .jpg ?
Hi Guys
some of that coding is way above me but seems it may be the key to my problem – however I do know how to add code to my child themes functions.php file – though often I have no idea what the code means!!
I have a situation where I have a site that is importing real estate listings from a hub – the site only needs 2 thumbnails of a certain size (one for from end and one for admin/media library) and 2 larger images of a certain size for the font end
the site is at https://gccre.com.au/
is there code to control what images are created when they are imported?
currently it appears that Enfold is creating many different sized images that are wasting a lot of server space
the images it uses seem to be just
300×225 for the media library
300×200 for the front end thumbnail
800×500 for the listing image
and the full size image for a clickable larger pop-up image from the listing images
my question is – is it possible to set it so only those image sizes are created from the import?
I’m not too worried about quality as I have Short Pixel that can set the compression quality and max size
if you could supply me with the code that would do this I shall be eternally grateful!
Hi smarta-brett,
We apologize for the inconvenience.
You may want to check on Guenni007’s post here: https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1270140
It would require using a child theme, you can download and find instructions on how to use it here: https://kriesi.at/documentation/enfold/child-theme/
Best regards,
Nikko
Hi
I posted this a few days ago and have had no reply – I’m hoping this one will have more luck ;-)
It’s getting kinda urgent!
I have a site that is importing real estate listings from a hub – the site only needs one thumbnail of a certain size and one larger image of a certain size
is there setting to control what images are created when they are imported?
currently it appears that Enfold is creating many different sized images that are wasting a lot of server space
Hi all team members, I have the problem similar to described here:
—edit—
I changed Gallery styling from “Small thumbnails” to “Big image with thumbnails below” – it’s much clearer.
However, sometimes it is more convenient to have thumbnails the right.
Can you please add the option “Big image with thumbnails right” to the “Gallery” – “Styling” tab?
—
https://kriesi.at/support/topic/portfolio-grid-images-not-showing-3/
“… still failed to add the IMAGE ARROWS for pictures convenient visiting.
Every time when I click a picture, it will show a new page with that picture only, without any arrows …”
I don’t mean the arrows on the keyboard, but the ones on the screen – similar to the Slider “Slideshow control” element.
There are no navigation (left / right, closing symbol … ) in gallery image with full view, simple image only.
Recommended plugin “Enable jQuery Migrate Helper” installed and set to “Legacy 1.12.4 – wp” – no changes.
After display a selected picture, still picture only, without any navigation …
Some months ago my galleries were O.K.
—
WordPress version 5.6.1
Enfold 4.7.6.4
—
Can you help me?
ViBe
—
Nobody knows?
Missing navigation is bad for our customer …
-
This topic was modified 5 years, 1 month ago by
VB_web.
I figured out how to do part of this – for the home page ALB blog posts in grid layout, but I need some help tweaking it. If I use the .small.avia-copyright within the Featured Image, then I can display it on the home page using the following selector. However, the following is tied to a specific post – how do I streamline this CSS so that it pulls the .small.avia-copyright for whatever post is appearing in the content slider?
#featured-news > div > div > div > div > div > div.flex_column.av_three_fourth.flex_column_div.av-zero-column-padding.avia-builder-el-5.el_after_av_one_fourth.el_before_av_hr > div.avia-content-slider.avia-content-grid-active.avia-content-slider1.avia-content-slider-even.avia-builder-el-7.el_after_av_textblock.el_before_av_hr.post-featured-news > div > div > article.slide-entry.flex_column.post-entry.post-entry-5416.slide-entry-overview.slide-loop-1.slide-parity-odd.av_one_half.first.real-thumbnail.post-format-standard > a > small {
display: block!important;
}
Hiu
I have a site that is importing real estate listings from a hub – the site only needs one thumbnail of a certain size and one larger image of a certain size
is there setting to control what images are created when they are imported?
currently it appears that Enfold is creating many different sized images that are wasting a lot of server space
It does not work, maybe I I didn’t set the css correctly,
One more thing I need to hide the header in some pages like portfolio items https://cincomilmillas.com/portfolio-item/jam-flamenca-gestalguinos/
and maybe in some pages more ,like tienda (in woocommerce)
https://cincomilmillas.com/mi-cuenta/?preview_id=1684&preview_nonce=37f25d9c49&_thumbnail_id=-1&preview=true
or https://cincomilmillas.com/mi-cuenta/?preview_id=1684&preview_nonce=37f25d9c49&_thumbnail_id=-1&preview=true
I want to hide the header in this pages because the links in the menu does not work
Too many things I know…
Thanks a lot
Hi,
is there a way where both can work together?
This may not be possible because when the responsive image option is enabled, WP will automatically select the appropriate size based on the current screen resolution instead of the selected thumbnail. Did you refresh the site or purge the cache before regenerating the images? Please make sure that the site is using the latest version of the theme, 4.7.6.4.
Would you mind providing the WP and FTP login details again so that we could test it properly?
Best regards,
Ismael
I am using the Media Elements component, Gallery on the website at https://www.ciadaspersianas.com/produto/papel-de-parede-rio-de-janeiro/
However, when I click on the thumbnails the image opens without the ability to move the images (left arrow and right arrow).
How do I do that?
How do I open the image and be able to switch images?
thanks
Hi,
you know what IPTC-data is?!
iptc.org/
Its a kind of important metadata, specially regarding SEO.
Issues:
1: The metadata field “Copyright” does not grab the content from the appropriate IPTC-fields (you can easily check it yourself) out from the image when uploaded to the medialibrary like it does with “Titel” & “Beschriftung”
This is a “pia” since users have to paste the copyright field manually on hundreds or thousands of images via medialibrary.
2: The same issue with the fields for Description (and alt-attribute. This might be not Enfolds fault but at least you should be modern and progressive enough to provide a solution in usability instead of developing gimmicks) although ALL existing IPTC & Metadata fields has been filled out.
3: Enfold deletes the metadata from the images, at least for every image which is generated by Enfold
Example: The original image “test.jpg” contains all IPTC-data, the image “test-845×684.jpg” (which is an Enfold-thumbnail) has no IPTC-data anymore.
(you can easily check it yourself by adding this plugin into your Chrome or Firefox: addons.mozilla.org/en-US/firefox/addon/iptc-photo-metadata-inspector/)
EDIT to #3:
It is not always like that, but in most cases and i have no idea under which circumstances the metadata gets lost and when not
Maren
Hi Mike,
the speed person regenerated the thumbnails which fixed the issue of the post slider images on my home page, blog and destination pages. However, the featured images on the posts are still thin. This person keeps saying its a theme issue but it’s not. I scrolled up in this thread and it seemed like you said before Jetpack is the problem. Can you check on this? I want the images to be the size the image is on my Destinations page. The difference is the destination page is built with Avia where as the posts are in classic editor and I do not have as much direct control over the image size.
Hi Ismael,
we’ve disabled the responsive option and the imges get displayed with the correct cropping position in the page but in the dropdown the sizes are still wrong. Unfortunately the responsive thumbnails of the images don’t get loaded… is there a way where both can work together?
We’ve insert the snippet and regnereated all thumbnails but the size didn’t change…
Regards,
Sebastian.
Hi,
Thank you for the update.
Have you tried inspecting the demo directly in the browser to see the size of the images used in the pages? For example, in the front page of the demo, these are the images used.
// https://kriesi.at/themes/enfold-restaurant/wp-content/uploads/sites/39/2014/07/pasta.jpg
// https://kriesi.at/themes/enfold-restaurant/wp-content/uploads/sites/39/2014/07/pizza-710×375.jpg
// https://kriesi.at/themes/enfold-restaurant/wp-content/uploads/sites/39/2014/07/burger-845×684.jpg
// https://kriesi.at/themes/enfold-restaurant/wp-content/uploads/sites/39/2014/07/kitchen_chef_edit.jpg
This might help. https://developers.google.com/web/tools/chrome-devtools/open
A specific thumbnail is usually assigned to a specific element in the builder such as the masonry thumbnail for the Masonry element, or the portfolio thumbnail for the Portfolio Grid but there is also an option called Preview Image Sizes in the elements’ Styling tab where you could select the size of the images manually if you prefer to use a different one.
Best regards,
Ismael
Hi,
Thank you for the update.
If you want to adjust the dimensions or cropping options of the existing thumbnails, try to use the following plugin.
// https://wordpress.org/plugins/simple-image-sizes/
After the thumbnail adjustment, please do not forget to regenerate the images or upload them again.
Best regards,
Ismael
Hi,
Thank you for the update.
The easiest solution that we can think of is to resize the original image so that its aspect ratio is the same as the aspect ratio of entry_with_sidebar thumbnail before uploading it. Unfortunately, we cannot change the size of the designated thumbnail for a single post.
Best regards,
Ismael
Hi,
Thank you for the info.
Last time we checked, the Masonry element is set to 3 columns, which is why we recommended a squarish images. For full width or a single column Masonry element, you should use a wider image. Please note that the maximum size of the default thumbnail used in the Masonry element is 705x705px.
Best regards,
Ismael
This reply has been marked as private.
Hi,
You may need to disable the Responsive Images option if you want the images with different cropping position to actually display. For some reason, WP always selects the thumbnail with the default cropping position.
And to adjust the compression level, please use this snippet in the functions.php file.
// set the compression level of calculated images
add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) {
$quality = 65; // compression level, default is 100
return $quality;
}
Best regards,
Ismael