-
Search Results
-
Topic: Video gallery / lightbox
Hello, is it possible, or if its there, how can I add videos in gallery? I have more photos and videos and want put it in blog page. In gallery i can add photos in grid with lightbox, it show small images thumbnails, when click it show big images and this I want with videos too, it will show in grid and when click, it will popup larger video, how to do it please.
Thanks very much for your suggestion, Mike. It helped me look quite deeply into this issue using Chrome’s debugger. I want to first apologise to you for keeping things so complicated using my in-development home page, which is quite complicated, instead of creating a test page for this topic question–which is exactly what I did to debug this issue after your reply.
It turns out that the stackoverflow suggestion doesn’t work. Their suggestion is to add itemOpts.index = index; before the mfp._openClick({mfpEl:items}, jqEl, itemOpts); line as follows:
$.fn.magnificPopup = function(options) { _checkInstance(); var jqEl = $(this); // We call some API method of first param is a string if (typeof options === "string" ) { if(options === 'open') { var items, itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup, index = parseInt(arguments[1], 10) || 0; if(itemOpts.items) { items = itemOpts.items[index]; } else { items = jqEl; if(itemOpts.delegate) { items = items.find(itemOpts.delegate); } items = items.eq( index ); } itemOpts.index = index; // Added line per https://stackoverflow.com/questions/49131727/open-all-images-on-page-with-magnific-popup mfp._openClick({mfpEl:items}, jqEl, itemOpts); } else { if(mfp.isOpen) mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1)); } } else { // clone options obj options = $.extend(true, {}, options); /* * As Zepto doesn't support .data() method for objects * and it works only in normal browsers * we assign "options" object directly to the DOM element. FTW! */ if(_isJQ) { jqEl.data('magnificPopup', options); } else { jqEl[0].magnificPopup = options; } mfp.addGroup(jqEl, options); } return jqEl; };The problem is that that bug fix never even gets to run because it’s encapsulated within the IF condition of typeof options === “string”, as you can see above. So if you look at BOTH:
(1) us Enfold users:
links.not(options.exclude).addClass('lightbox-added') .magnificPopup($.avia_utilities.av_popup);where $.avia_utilities.av_popup === {type: ‘image’, mainClass: ‘avia-popup mfp-zoom-in’, tLoading: ”, tClose: ”, removalDelay: 300, …}
(2) and the Original Poster to that stackoverflow thread:
$('#content').magnificPopup({ items: $imgs, type: 'image', gallery: { enabled: true }, });you can see that typeof options === “object”! So it wouldn’t work for either of us (the OP coincidentally was wanting to do the exact same thing as me, to “enable magnific popup on all images on my page”). Unfortunately, the OP never responded to the reply person’s bug fix suggestion, so the thread never went further in order to highlight the failure of the suggestion for the OP.
After ruling out magnific’s code as the culprit of my problem, I focused on avia-snippet-lightbox.js and its code at the end of its function, $.fn.avia_activate_lightbox = function(variables):
return this.each(function() { var container = $(this), videos = $(options.videoElements, this).not(options.exclude).addClass('mfp-iframe'), /*necessary class for the correct lightbox markup*/ ajaxed = ! container.is('body') && ! container.is('.ajax_slide'); for( var i = 0; i < options.groups.length; i++ ) { container.find(options.groups[i]).each(function() { var links = $(options.autolinkElements, this); if( ajaxed ) { links.removeClass('lightbox-added'); } links.not(options.exclude).addClass('lightbox-added').magnificPopup($.avia_utilities.av_popup); }); } });Sure enough, this is the culprit. What’s happening in this code above is that:
(1) the outer loop, controlled by the FOR loop, searches the <body> DOM for each class in the options object (.avia-slideshow, .avia-gallery, .av-horizontal-gallery, .av-instagram-pics, .portfolio-preview-page, .portfolio-preview-content, .isotope, .post-entry, .sidebar, #main, .main-menu, & .woocommerce-product-gallery); and if it finds the current options[i] in the <body> DOM, then:
(2) the inner loop, controlled by “.each(function()”, looks for every instance of that options[i] in body and adds the images within that sub-DOM instance to the links object “array”. In other words, it creates multiple lightboxes per page–and, in fact, NOT JUST a separate one for each options[i] image set (from the outer loop), BUT ALSO a separate lightbox for each instance of options[i] as well.
But I want a single lightbox for all linked images on a page, i.e. a single image set that is sent to magnific. Specifically, for me, options[7]===’.post-entry’ is not only found in outer 1/1, 1/2, etc. layout sections, in which I may put images, but also in Color Sections, in which I will definitely put images, perhaps in inner 1/1, 1/2, etc. layout sections within the Color Sections. It’s the Color Section that ends up separating out ‘.post-entry’ images from each other, creating multiple image sets sent to magnific for separate lightboxes (notice the <div class=’post-entry post-entry-type-page post-entry-31′> line):
<div class='avia-section av-lib3uyi7-57ce06e0452ac92eb7d4393a8384e180 main_color avia-section-default avia-no-border-styling avia-builder-el-62 el_after_av_section el_before_av_section mainPageBodyThreeCols avia-bg-style-scroll container_wrap fullsize' > <div class='container av-section-cont-open' > <div class='template-page content av-content-full alpha units'> <div class='post-entry post-entry-type-page post-entry-31'> <div class='entry-content-wrapper clearfix'> <div class='flex_column av-i3z0f-243165cc077a80e50bbee8f020d21535 av_one_third avia-builder-el-63 el_before_av_one_third avia-builder-el-first first flex_column_div ' > <div class='avia-image-container av-lib47uf4-9660e94fab46a96b36ab619c8b679a09 av-styling- avia-align-center avia-builder-el-64 el_before_av_textblock avia-builder-el-first av-group-lightbox' itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject" > <div class="avia-image-container-inner"> <div class="avia-image-overlay-wrap"> <a href="...dentures.jpg" class='avia_image' > <img decoding="async" class='wp-image-699 avia-img-lazy-loading-not-699 avia_image ' src="...dentures-300x264.jpg" alt='...' height="264" width="300" itemprop="thumbnailUrl" srcset="..." sizes="(max-width: 300px) 100vw, 300px" /> </a> </div> </div> </div>...In other words, each .avia-section (Color Section) has its own class=’post-entry post-entry-type-page post-entry-31′, so the images under that DOM are collected as a separate image set for a lightbox.
So I ended up just bypassing all of it, and replaced the code in avia-snippet-lightbox.js with my own child_avia-snippet-lightbox.js:
return this.each(function() { //Find all linked images var myLinks = $(options.autolinkElements, this); //Note: ".not(options.exclude)" is left out of this "myLinks.not(options.exclude).addClass(..." on purpose to impose the policy: if you want to exclude an image from the all-images set in the lightbox, just don't make it a link. Linked images excluded from the lightbox means if the user clicks on that linked image, it will follow that link, which is to open it's full size image, but without the lightbox's closing mechanism. Then the only way for the user to go back to the page is to click the Back button--which is bad UX. myLinks.addClass('lightbox-added').magnificPopup($.avia_utilities.av_popup); });And adding this to my child functions.php file:
add_action('wp_enqueue_scripts', 'magnific_script_fix', 100); function magnific_script_fix() { wp_dequeue_script('avia-lightbox-activation'); wp_enqueue_script('child_avia-lightbox-activation', get_stylesheet_directory_uri().'/child_avia-snippet-lightbox.js', array('jquery')); }Also, as you can see, I’ve left out “.not(options.exclude)” from myLinks.not(options.exclude).addClass(‘lightbox-added’).magnificPopup($.avia_utilities.av_popup) for the following reason: If I put it in, then, yes, the images with those exclusion classes will be excluded from the lightbox. But they are still linked images: so if a user clicks on one of them, it will follow that link, which is to open it’s full size image, but without the lightbox’s closing mechanism. So the only way for the user to go back to the page is to click the Back button–which is bad UX.
FYI: I attempted to figure out a way to add each of those excluded images in its own individual one-image lightbox, but I just couldn’t even figure out how Enfold does the not(options.exclude), as a starting point (going step by step in the debugger to see how it’s doing it was a bewildering experience), so I just gave up. So I just gave myself the policy: if you want to exclude an image from the all-images set in the lightbox, just don’t make it a link. Lol. Yes, I could have left the .not(options.exclude) in there and just not used it per my policy, but I wanted to make sure the UX stays correct by preventing me (or anyone else maintaining the site) from having any effect to forgetting the policy and adding e.g. “noLightbox” to an image’s Custom CSS Class field, expecting it to be excluded from the lightbox, but still keeping the image’s link active. No: if I (or they) go into the code, they’ll see there is no .not(options.exclude) at all, and read the comment in the code, to see why their image is not getting excluded from the lightbox.
So, anyway, that’s my solution to my particular problem. I appreciate your help, Mike. Unless you have some solution code for me to include those excluded images in their own individual one-image lightboxes (which would be helpful to just round up this solution, in case others want to use it), you may close this thread.
Thanks very much,
GaryHey BeeCee,
Thank you for the inquiry.
The value of the title attribute is actually used in the lightbox container, so removing the title will also affect the lightbox. Another user posted a script that only removes or hides the title on mouse hover and brings it back on mouse out. Please check the thread below.
Best regards,
IsmaelIn reply to: Image quality lightbox
there are different snippets for child-theme functions.php to influence the lightbox image source file.
for image galleries:
function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){ $link = wp_get_attachment_image_src($attachment->ID, "full"); return $link; } add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);for masonry image galleries:
function avia_change_masonry_thumbnail_link($size){ return "full"; } add_filter('avf_avia_builder_masonry_lightbox_img_size', 'avia_change_masonry_thumbnail_link', 10, 1);or for single image lightbox size:
function change_lightbox_size() { return "full"; } add_filter('avf_avia_builder_helper_lightbox_size','change_lightbox_size', 10);In reply to: How to delay cookies pop up? Enfold
Hi,
If you want this for a faster load this won’t help, I checked your site on WebPageTest and linked the test below.
The bigest issue that I see is youtube videos, I only see 4 videos on your homepage but they cause a lot of events in the test.
It looks like you are adding those videos in a code block with the youtube code, try using the video element with the option Wait for user interaction to load the video this will only load the video and it’s scripts after the user clicks and speed up your page.
You will then need to add a fallback image to show in the place of the video, try adding the video thumbnail or taking a screenshot of the video thumbnail to show.
I don’t believe that the cookie bar is causing any significant delayBest regards,
MikeHello,
is it possible to open a portfolio from the portfolio grid as a lightbox gallery (not as AJAX, not only the big image, not in a new page)?
I know I could do it with the gallery module but i want it to be sortable and with the caption below the thumbnails like in the portfolio grid.Hope you can help.
Thanks, ThorstenIn reply to: Product Single Image Size
Solved it. I had to understand that the images shown for the Full Size Product Images in the Lightbox are not defined by Enfold but by WordPress. With the large Thumbnail Size Setting. I thought that there was a different setting in Enfold itself.
It seems. not to be possible to make the size for the Woocommerce Lightboxes independent from the Large Thumbnail Sizes defined in WordPress. Because I would need the larger Size for the Large Thumbnails only in Woocommerce but not on regular pages.
Or can I make this independent?
In reply to: install filter
Hi,
Your snippet is to make the single product gallery images 250×250, but I don’t see that you have any single product gallery images on your product pages, so I assume that you was hoping this would do something else.
Nonetheless I added it to the end of your child theme functions.php file in Appearance ▸ Editor:add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) { return array( 'width' => 250, 'height' => 250, 'crop' => 1, ); });Perhaps this article will help you with what you are trying to achieve: How to override WooCommerce Image Sizes
Best regards,
MikeTopic: Product Single Image Size
Hi,
sorry if this is answered anywhere in this forum but after searching for about an hour, and not finding an answer to exact my question, I’ll try it with a new topic.
Which size has full / single product image (Lightbox Image when I click on the Square Preview Image) when using enfold? (As enfold overwrites the woocommerce settings)
From what I found I assume 999, 1000 or 1030 Pixel?
How can I enlarge this size to maybe 1500 or 2000 on the long end?
I found here a snippet for the Child Functions.php which so I assume let me set the sizes in Woocommerce instead of Enfold. But then I have to know exact the sizes for thumbnails etc, which enfold is using… So I would prefer changing the product images size for enfold.Where and how can I change the Single Product Image size in Enfold ? And do you have a list for the woocommerce sizes? (The enfold sizes for the normal Site I found)
Thanks
FrankIn reply to: Change image size in blog post
Hi,
In the filter that we provided above, you will have to adjust the height value from 630 to 423
add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 ); function enfold_customization_modify_thumb_size( $size ) { $size['entry_without_sidebar'] = array('width'=>1200, 'height'=>430, 'crop' => true); return $size; }After the adjustment, use the following plugin to regenerate the thumbnails. Please make sure to create a site backup or a restore point before using the plugin.
// https://wordpress.org/plugins/regenerate-thumbnails/
Thank you for your patience.
Best regards,
IsmaelThank you for replying Ismael. I appreciate you helping me. Unfortunately, “av-group-lightbox” didn’t work for me.
First, I didn’t realize I needed to add a class to every image I want to open up in the lightbox gallery on a particular page. As I mentioned in my original post, point #2, all images on the page in my original test, except the office photo inside its Color Section, opened in the lightbox gallery, WITHOUT MY HAVING TO ADD ANY CLASS TO CONNECT THEM TOGETHER. I just didn’t understand why a Color Section was messing things up. I assumed that to omit an image from the lightbox gallery, you just don’t create a link on it, and if the image is linked, then it’s part of the lightbox gallery.
It’s actually weird that all those images did open in the lightbox gallery connected together without a class, because I have found some people on the Internet talk about how Magnific Popup requires you to add a class to all images on a page that you want to include in the gallery, just like you said.
Or the class is to be added to the links of the images perhaps, like the leadership at https://help.groupthought.com/article/64-pages-how-to-show-an-image-in-a-pop-up-window are telling their people to do:
$(document).ready(function() { $('.template-article img').each(function() { var currentImage = $(this); currentImage.wrap("<a class='image-link' href='" + currentImage.attr("src") + "'</a>"); }); $('.image-link').magnificPopup({type:'image'}); });But I don’t know how to easily give a class to my image links, so I just went ahead with your suggestion. When I did a hard refresh of my page, I saw that the “av-group-lightbox” class was added to the avia-image-container <div>:
<div class='avia-image-container av-liaq7z66-359c3e896ff6ab62eb93041dca6e9e63 av-styling- avia-align-center avia-builder-el-5 avia-builder-el-no-sibling av-group-lightbox' itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject" > <div class="avia-image-container-inner"> <div class="avia-image-overlay-wrap"> <a href="...dog_chewing_denture.jpg" class='avia_image' > <img decoding="async" class='wp-image-191 avia-img-lazy-loading-not-191 avia_image ' src="...dog_chewing_denture-284x300.jpg" alt='' title='dog_chewing_denture' height="300" width="284" itemprop="thumbnailUrl" srcset="..." sizes="(max-width: 284px) 100vw, 284px" /> </a> </div> </div> </div>Anyway, let me run down my analysis:
******
TEST 1
******First, this is my home page at the moment (which has developed since I first wrote), where all Image Media Element images have Advanced > Link Settings set to Open in Lightbox, EXCEPT AS INDICATED OTHERWISE:
- Dog (test image) in a 1/1 column layout element
- Office Photo in Color Section
- Color Section with text
- Middle-aged couple (test image) in a 1/1 column layout element
- Empty Color Section
- Woman holding dentures (test image)
- Couple on beach (test image) inside a Textblock in a 1/1 column layout element: this embedded image has Display Settings > Link To = Media File (with URL set to the image’s Media Library original full size URL)
- Couple with pretzel & coffee (test image) inside a Textblock in a 1/1 column layout element
- Color Section containing a heading, “Our Services”, in a 1/1 column layout element.
- Color Section for Our Services with 3 rows 3 columns:
- The oral surgery test image again (full size this time), inside a 1/1 column layout element (test image)
– A bunch of dentures photo (small thumbnail-like image) inside the first 1/3 column layout element
– An oral surgery photo (small thumbnail-like image) inside the second 1/3 column layout element (first row)
– A denture on implants (small thumbnail-like image) inside the third 1/3 column layout element (first row): Advanced > Link Settings set to Set Manually and linked to the original full size image using its Media Library URL
– …the rest of the images in the grid-like Color Section have their images set to nothing (all 1/3 columns in this “Our Services” Color Section are designed to link to the pages discussing those specific services, except I removed that column link in the first row of images for test purposes)RESULTS WITHOUT “av-group-lightbox”, with Open in Lightbox (and the one manual setting):
- The following images opened up as singular: Dog, Office, Middle-aged couple
- The following images opened connected together in the lightbox gallery: Woman holding dentures, Beach couple, Pretzel couple
- All 3 images from my grid-like Color Section that I defined to Open in Lightbox did so (they were connected together).
So to me it seems like Color Section breaks up image groupings as follows:
- Since there is a Color Section after the dog, it isolates the dog, making it open singly in the lightbox.
- There is only 1 image, the office, inside the Color section following the dog, so it opens singly in the lightbox.
- Since there is an empty Color Section after the Middle-aged couple, it’s isolated and opens singly in the lightbox.
- The next Color Section, containing the “Our Services” heading, comes after the Pretzel couple, so we have 3 images between two Color Sections, allowing them to be connected together to open as a gallery in lightbox.
- The Color Section after that contains our grid-like images (and their headings & blurbs), making all images inside that Color Section set to Open in Lightbox open together in the lightbox as a gallery.
- And the final image at the bottom, our full size oral surgery, is isolated after the previous Color Section, making it open singly in the lightbox.
******
TEST 2
******Then I thought, for the heck of it, I’ll replace all “Advanced > Link Settings = Open in Lightbox” with “Advanced > Link Settings = Set Manually” & URL pointing to the original full size image’s URL in the Media Library.
RESULTS WITHOUT “av-group-lightbox” and manual URL instead of Open in Lightbox: No change–I got the same results. It’s as if it’s the anchor link on the image (which I assume Open in Lightbox also sets) that determines what goes together–within the Color Section mess-up criterion I found.
******
TEST 3
******So I’m left with my problem of being able to open all images on the page I wish to together in a single lightbox gallery, irrespective of what Color Sections may exist on the page–which brings us to your kindly proposed solution.
So, for testing, I added “av-group-lightbox” to the Advanced > Developer Settings > Custom CSS Class field of the following images on my home page as specified below:
- *Dog: av-group-lightbox
- *Office Photo: av-group-lightbox
- Color Section with text
- *Middle-aged couple: av-group-lightbox
- Empty Color Section
- Woman holding dentures
- *Beach couple: av-group-lightbox
- *Pretzel couple: av-group-lightbox
- Color Section with 3 rows 3 columns, with “av-group-lightbox” just in the first 2 images:
- *Full size Oral surgery: av-group-lightbox
– *A bunch of dentures: av-group-lightbox
– *Oral surgery: av-group-lightbox
– Implants denture
– …the rest of the images in the grid-like Color SectionRESULTS WITH “av-group-lightbox” (with either Open in Lightbox or Set Manually–it didn’t matter): There was no change compared to the WITHOUT case:
- The following images opened up as singular: Dog, Office, Middle-aged couple
- The following images opened connected together in the lightbox gallery: Woman holding dentures, Beach couple, Pretzel couple
- All 3 images from my grid-like Color Section that I defined to Open in Lightbox did so connected together, including the Implant denture that I didn’t have “av-group-lightbox” on.
******
TEST 4
******I also tested with “avia-image” instead of “av-group-lightbox”, since I read somewhere in Enfold documentation/support that for an image embedded in a text block (like my Beach couple), you set Link CSS Class = “avia-image” (without quotes).
By the way, I searched through all Enfold parent files (using the Double Commander tool on my computer after downloading the entire Enfold folder to my computer on Jul 30, 2022), and found no “av-group-lightbox” string inside any files anywhere. Did things change perhaps since my download date? I also looked through the downloaded HTML (Developer’s Page Source), and there is basically no difference between the DOMs and classes for all images (except for the obvious stuff).
Any ideas?
Thanks,
Gary-
This reply was modified 2 years, 6 months ago by
.
-
This reply was modified 2 years, 6 months ago by
-
This reply was modified 2 years, 6 months ago by
-
This reply was modified 2 years, 6 months ago by
-
This reply was modified 2 years, 6 months ago by
-
This reply was modified 2 years, 6 months ago by
-
This reply was modified 2 years, 6 months ago by
-
This reply was modified 2 years, 6 months ago by
In reply to: can i get general layerslider support here?
Hi,
Thank you for the link.
Have you considered adding another image to serve as a cover for the video while it loads? This approach can help provide a visual placeholder until the video is ready to play. Unfortunately, there is no built-in option to hide the thumbnail directly, so you may need to explore alternative workarounds to achieve the desired result.
Best regards,
IsmaelIn reply to: can i get general layerslider support here?
When this page loads, the video thumbnail shows and looks pretty terrible.
In reply to: can i get general layerslider support here?
Thanks Mike, it was just a matter of fixing the aspect ratio. Do you happen to know how to prevent the slide from showing the video thumbnail for a split second when the page loads?
In reply to: can i get general layerslider support here?
Hi,
As I understand you added a video background layer but the thumbnail for the video is showing, if true I believe this is because or your youtube link that you are using for the background video, instead of the short youtube link use this format instead:https://www.youtube.com/watch?v=G0k3kHtyoqcnotice the watch?v=
If this doesn’t correct please include admin login in the Private Content area so we can investigate.Best regards,
MikeIn reply to: can i get general layerslider support here?
In reply to: Post Link Format not directly linking
Hi,
Thank you for the link to your post, I assume that you are asking how to get your News Widget in the sidebar to link to the post type “link”. Unfortunately for the News Widget you would need to edit the core files and make these changes with each update because it can not be added to your child theme, see this thread.
I recommend using the Magazine element instead without the first image large as it looks the same in the sidebar:
To do this open an empty post with the Classic Editor and use the shortcode wand for the magazine element:
and then copy the shortcode to a Custom HTML widget in your sidebar, here is the shortcode I used in this example:[av_magazine link='category' thumbnails='aviaTBthumbnails' heading='' date_filter='' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' first_big_pos='top' image_big='magazine' items='10' paginate='' offset='0' heading_color='theme-color' heading_custom_color='#ffffff' heading_tag='' heading_class='' heading_link='' link_target='' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']I assume that you would like to hide the excerpts and the border between each item, so try this css:
.sidebar .custom-html-widget .av-magazine-content { display: none; } .sidebar .custom-html-widget .av-magazine-content-wrap { border: none; }For this expected result:
Best regards,
MikeIn reply to: WooCommerce Category – Image is cropped
Hi Alex,
Please add this code in functions.php of your child theme, if you don’t have a child theme then you can use the plugin called WPCode to insert this code snippet:
add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 ); function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) { return 'full'; }Hope it helps.
Best regards,
NikkoThis actually shows the main image with thumbnails underneath?
I was just looking to amend the previous code:
@media only screen and (max-width: 767px) {
#top.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper > a {
display: none;
}
}To show only three thumbnails instead of all of them :)
Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { #top.single-product .woocommerce-product-gallery .thumbnails a:nth-child(n+4) { display: none; } }After applying the css, please clear your browser cache and check.
Best regards,
MikeMike,
Thank you so much.
This is almost perfect – the last change I would like to make is for it to show just three thumbnails instead of all of them please..
Thank you for this.
Ideally, I would like to have four small thumbnail images with two being displayed side by side in a grid of four.
Is this possible?
Also, if I just wanted to show the main image, is this the correct CSS code? Or is there a simpler way?
@media only screen and (max-width: 767px) {
#top.single-product .woocommerce-product-gallery .thumbnails a:nth-child(n+0) {
display: none;
}
}Hi Mike!
That is so bizarre, because here’s the HTML in Chrome’s inspector for the image’s element (which is also seen in your screen shot in my private area):
<img decoding="async" class="wp-image-412 avia-img-lazy-loading-not-412 avia_image " src="...banner2.jpg" alt="..." title="..." height="831" width="1830" itemprop="thumbnailUrl" srcset="...banner1.jpg 1830w, ...banner1-300x136.jpg 300w, ...banner1-1030x468.jpg 1030w, ...banner1-768x349.jpg 768w, ...banner1-1536x697.jpg 1536w, ...banner1-1500x681.jpg 1500w, ...banner1-705x320.jpg 705w" sizes="(max-width: 1830px) 100vw, 1830px">As you can see, the src has banner2, but the srcset contains nothing but banner1, and it’s banner1 that is displayed, because banner2 contains just the part of the image with the senior couple, not the graphics background. On smaller screens I want to maximize displaying the couple alone, without have to shrink them to include the background.
Do you know how to get banner2’s srcset in there so it renders properly?
Now, I have been experimenting with doing this, arguably, the correct way: setting the Color Section (class seniorCoupleContainer) to the background graphic image itself using CSS (which works better anyway because I want it to span the entire browser’s width), and inserting an Image media element (class seniorCouple) into the Color Section containing just the happy couple–instead of using a graphics program to combine them as a single image for bigger screens, and swapping the image of the couple with background with just the image of the couple alone on smaller screens.
.seniorCoupleContainer { background-image: url(...home-page-banner-background.png); background-size: 2881px 601px; } .seniorCouple { top: -35px; }You can see this in a second Color Section I created on the home page below the original banner at the top. With and without the background image, it all works well responsively too:
@media only screen and (max-width:964px) { .seniorCoupleContainer { background-image: none; } }However, because there may be other situations I need to use Javascript to swap images, can you please help me solve my original probem?
Thanks,
GaryIn reply to: WooCommerce Thumbnail Size is Wrong
Hey WaldenDesign,
Please add this code in functions.php of your child theme, if you don’t have a child theme then you can use the plugin called WPCode to insert this code snippet:
add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 ); function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) { return 'woocommerce_thumbnail'; }I hope it helps.
Best regards,
NikkoIn reply to: shop_catalog Image Size Issue WooCommerce
Hi BlutVampir,
Please add this code in functions.php of your child theme, if you don’t have a child theme then you can use the plugin called WPCode to insert this code snippet:
add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 ); function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) { return 'woocommerce_thumbnail'; }I hope it helps.
Best regards,
NikkoThe WooCommerce thumbnails are suddenly generating at a square ratio even though they are set to a custom size (706 px x 1000 px). This was working until recently.
When we swap out the Enfold theme for the WooCommerce “Storefront” theme the problem is resolved, so it appears to be some conflict with Enfold.
Only new uploaded images are having this issue. Older ones are fine.
On https://mannequinsource.com/product/rpfa-1/ if you scroll down to the “Related Products” section you’ll see that the thumbnails don’t align if one of the newer images is in the selection (note, you may need to refresh the page to see a set of related products that are affected by this).
We’ve tried changing the images, and installing the newest version of Enfold, but nothing has fixed the issue yet.
The Image in the Catalog should be set in WooCommerce over the Design -> customizer -> Produkt Images
Whatever there is been set is ignored.
That is because the image Size shop_catalog is already existing, becuase Enfold does set it.In the config.php I find following code:
$avia_config['imgSize']['shop_thumbnail'] = array( 'width' => 120, 'height' => 120 ); $avia_config['imgSize']['shop_catalog'] = array( 'width' => 450, 'height' => 450 ); $avia_config['imgSize']['shop_single'] = array( 'width' => 450, 'height' => 999, 'crop' => false ); avia_backend_add_thumbnail_size( $avia_config );When I want other dimentions, like 4:3 Format, instead of the enfold 1:1 Format, I need to add like following code:
add_action( 'after_setup_theme', 'wpdocs_theme_setup',999,1 ); function wpdocs_theme_setup() { remove_image_size('shop_catalog'); add_image_size('shop_catalog', 300, 225, true ); }Why is it needed that Enfold sets the images sizes for Woocommerce, when Woocommerce can do it be themself?
Hello,
I want to change my woocommerce thumbnails so they crop the thumbnails from the top, center instead of from the middle of the image. I added code to my functions.php file in my child theme.
add_filter( ‘woocommerce_get_image_size_gallery_thumbnail’, ‘enfold_child_set_gallery_thumbnail_crop’ );function enfold_child_set_gallery_thumbnail_crop( $size ) {
$size = array(
‘width’ => 450,
‘height’ => 450,
‘crop’ => array( ‘center’, ‘top’ ),
);
return $size;
}
I then regenerated the thumbnails through woocommerce. It works on my personal computer, I can see the results I intended. However it does not show up on my Ipad, my phone, and no one else I show the site to is seeing it. We aren’t using a caching plugin. Tried waiting over night, and it didn’t work the next day either. They’ve tried shift reloading as well, it’s not showing for them either. I’ve also tried regenerating the thumbnails with a regenerate thumbnails plugin. Is there a step I am missing, or a conflict that would prevent that from working properly? I can’t figure out why I can see it but no one else can.Hi,
Thank you for your patience and the link to the page, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { #top.single-product .woocommerce-product-gallery .thumbnails a:nth-child(n+4) { display: none; } }This will show one large image and three thumbnails on mobile so the product info also shows “above the fold”
After applying the css, please clear your browser cache and check.Best regards,
Mike
