-
AuthorPosts
-
July 4, 2018 at 5:46 pm #981305
Hi,
For certain galleries, I chose “Big image with thumbnails below”.
I would like to make the following three modifications:
1. Remove the transparent white overlay of the thumbnails when you hover on them.
(I already removed the transparent white overlay of the big image by referring to the following post, but this had no effect on the thumbnails below the big image: https://kriesi.at/documentation/enfold/image/#remove-the-image-overlay-circle-and-arrow-on-hover/)
2. Disable the feature of changing the big image to the image of the thumbnail when hover on the thumbnail.
3. Remove the first thumbnail (thumbnail of the big image) so there’re only the thumbnails of the other images of the gallery below the big image visible.
Best regards,
zizibe1July 6, 2018 at 10:26 am #981959Hey zizibe1,
Thank you for using Enfold.
1.) You can use this css code to set the opacity of the thumbnail on hover.
#top .avia-gallery .avia-gallery-thumb a:hover { opacity: 1; }
2.) Do you need the galleries to open the lightbox? If you don’t need the lighbox, you can use this css code.
#top #wrap_all .avia-gallery a { pointer-events: none; }
If lightbox is still needed, you have to edit the gallery script directly.
3.) Use this css code to remove the first thumbnail.
#top #wrap_all .avia-gallery .avia-gallery-thumb a:nth-child(1) { display: none; }
Best regards,
IsmaelJuly 8, 2018 at 1:51 am #982621Hi Ismael,
1. The code works fine. Thank you very much.
2. The code works, but yes, I still need the galleries to open the lightbox. Now they don’t anymore. How do I have to edit the gallery script directly?
3. The code works , but now, I have the following problem:
The first gallery on my page “Portfolio” contains only two images which I want to show next to each other and aligned center of the page. There, I chose “Gallery Style: Small Thumbnails” instead of “Big image with thumbnails below”. Now, because the fist thumbnail is removed, the first of the two images isn’t visible either.
I considered to replace the gallery by two image elements next to each other (Link Settings: Lightbox), but if I wanted them to align center of the page, they would be either too big or too small.
– images too big:
1/2 Layout Element with first image in it | 1/2 Layout Element with second image in it– images too small:
1/4 Layout Element | 1/4 Layout Element with first image in it | 1/4 Layout Element with second image in it | 1/4 Layout ElementNow in the gallery, the two images are aligned center of the page and are just the right size.
– right image size:
1/5 Layout Element | 3/5 Layout Element with Gallery in it | 1/5 Layout ElementThat’s the reason I would like to keep the gallery.
Is there a way to except the first gallery on my page “Portfolio” of the rule which removes the first thumbnail? Or do you find another solution?
Best regards,
zizibe1July 11, 2018 at 2:22 am #983950Hi,
2.) If you need the lightbox to work, edit the config-templatebuilder > gallery > gallery.js file and then comment out or remove this block of code.
gallery.on('mouseenter','.avia-gallery-thumb a', function() { var _self = this; big_prev.attr('data-onclick', _self.getAttribute("data-onclick")); big_prev.height(big_prev.height()); big_prev.attr('href', _self.href) var newImg = _self.getAttribute("data-prev-img"), oldImg = big_prev.find('img'), oldImgSrc = oldImg.attr('src'); if(newImg != oldImgSrc) { var next_img = new Image(); next_img.src = newImg; var $next = $(next_img); if(big_prev.hasClass('avia-gallery-big-no-crop-thumb')) { $next.css({'height':big_prev.height(),'width':'auto'}); } big_prev.stop().animate({opacity:0}, function() { $next.insertAfter(oldImg); oldImg.remove(); big_prev.animate({opacity:1}); big_prev.attr('title',$(_self).attr('title')); }); } });
3.) You should turn on the custom css class field so that you can apply the code to a specific gallery or element.
Best regards,
IsmaelJuly 11, 2018 at 2:22 pm #984230Hi Ismael,
Thank you for your reply.
2.) I opened FileZilla and connected to my server.
I went to wordpress > wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > gallery and moved the gallery.js file to my desktop. (In wordpress > wp-content > themes > enfold child, I couldn’t find this file.)
There, I opened it with TextEdit (I also have Adobe Dreamweaver on my macbook but never used it so far), removed the block code you wrote about in your post, saved the file and moved it back to the gallery folder on the server (Action: Overwrite).
Then I went to the page “Portfolio” of my website, pressed shift and the reload button of Chrome, but unfortunately, the lightbox of the gallery still doesn’t work.
3.) Referring to your link, I turned on the custom css class field.
Now when I go to “Pages” > my page “Portfolio” > my first gallery > “Edit element” and scroll down, I see the “Custom CSS Class” field.
What do I have to add there to except this gallery of the rule which removes the first thumbnail?
Best regards,
zizibe1July 12, 2018 at 3:10 am #984422Hi,
2.) Did you remove the previous css code that we suggested? The pointer-events is probably set to “none”. You need to purge the cache or do a hard refresh after removing the css code.
3.) Add a unique id or class in the gallery’s custom css class field. Use “custom-gallery” without quotes for example and then replace the previous modification with the following css code.
#top #wrap_all .custom-gallery .avia-gallery-thumb a:nth-child(1) { display: none; }
We replaced the generic or default “.avia-gallery” selector with the custom css class attribute/selector “.custom-gallery”.
Best regards,
IsmaelJuly 12, 2018 at 11:05 pm #984910Hi Ismael,
Thank you for your reply.
2.) That’s it. I removed the css code you suggested in your first post. Now, the lightbox of the gallery works.
3.) Now, it works fine. I replaced the code of your first post by the code of your last post in Quick CSS. Then I added “custom-gallery” without quotes to the custom css class field of each gallery where I wanted to hide the first thumbnail.
Although I chose “No Scaling (Original Width X Original Height)”, the big image of the gallery is not as sharp as the same image opened in a lightbox or added to a image media element . How can I fix this?
Best regards,
zizibe1July 13, 2018 at 10:37 am #985091Hi,
Thanks for the update.
The image in the gallery is resized down a bit — around 14px — because of the padding property. Add this css code to remove the gallery padding.
#top div .avia-gallery .avia-gallery-big { padding: 0; }
Best regards,
IsmaelJuly 13, 2018 at 12:08 pm #985121Hi Ismael,
Thank you for your reply.
I added the code to Quick CSS, but unfortunately, the big image of the gallery still is blurry.
Edit: There is a further problem. The big image should be left-aligned and right-aligned to the thumbnails below. When you remove the gallery padding, the big image is wider then the thumbnail row below. Moreover, the white space between the big image and the thumbnails is smaller then the white space between the thumbnails. When you remove the padding of the thumbnails too, the white space between the image and the thumbnails is missing.
Best regards,
zizibe1- This reply was modified 6 years, 5 months ago by zizibe1. Reason: further problem
July 16, 2018 at 3:16 am #985809Hi,
Thanks for the update.
Add the following css codes to adjust the padding of the thumbnails.
#top div .avia-gallery a:last-child img { padding-right: 0; } #top div .avia-gallery a:nth-child(2) img { padding-left: 0 !important; }
Best regards,
IsmaelJuly 16, 2018 at 11:41 pm #986152Hi Ismael
Thank you for your reply.
I added the code to Quick CSS.
a) Now the white space between the big image of the gallery and the thumbnails below is too thin.
b) When there are more than two thumbnails below the big image of the gallery, they don’t have the same size.
c) The big image of the gallery still is slightly blurry.
Best regards
zizibe1July 18, 2018 at 2:32 am #986709Hi,
Thanks for the update.
Do you have a larger version of the image? Please remove the previous css codes and then upload a larger image to make it look sharper in the page.
Best regards,
IsmaelJuly 18, 2018 at 4:39 pm #987089Hi Ismael
Thank you for your reply.
a) I found the mistake. I had the following code in my Quick CSS:
/* no border around gallery thumbnails */ #top div .avia-gallery img { border-style: none; padding-top: 0px; }
I removed “padding-top: 0px;”. Now the white space between the big image of the gallery and the thumbnails below is the right size.
b) I removed the code you’ve mentioned in your previous post. Now the thumbnails below the big image are all the same size.
But now the big image isn’t left-aligned and right-aligned to the thumbnails below anymore. Now the big image is wider then the thumbnail row below. It’s the same problem I’ve already described above in my post of July 13, 2018 at 12:08 pm, #985121.
c) Yes, I have a larger version of the image.
The original details of the image are:
File type: image/jpeg
Dimensions: 5000 × 3333 px
File size: 18.2 MBHere are the details of the uploaded image which is blurry:
File type: image/jpeg
Dimensions: 1200 × 800 px
File size: 356 KBWhat file size would you recommend to get a sharp but still fast-loading image?
I’ve read online that the file size should be smaller than 200 KB because of the visitors of the website who have a slow internet connection. Is that true?
Best regards
zizibe1July 19, 2018 at 12:35 pm #987357Hi,
b.) You should remove this css code because it doesn’t seem to help in making the image sharper.
#top div .avia-gallery .avia-gallery-big { padding: 0; }
It will re-align the main image and the gallery thumbnails.
What file size would you recommend to get a sharp but still fast-loading image?
c.) You should consider the standard screen resolutions when deciding what image size to use.
// https://www.w3schools.com/browsers/browsers_display.asp
Best regards,
IsmaelJuly 22, 2018 at 3:11 pm #988406Hi Ismael,
Thank you for your reply.
b.) I removed the code to re-align the main image and the gallery thumbnails. It worked fine.
c.) I uploaded the largest version of the jpg:
File size: 9 MB
Dimensions: 5208 × 3648Unfortunately, the big image of the gallery still is blurry. In the lightbox, the image is sharp no matter I uploaded the smaller or the larger version.
So I tried this workaround:
Instead of a gallery, I used a “1/1 Layout Element”, added an “Image Media Element” to it, inserted the jpg (1200 × 800 px, 356 KB). Now, the image is sharp. I also activated the lightbox ( Edit Element > Link Settings > Image Link > Lightbox).
Below, instead of the two thumbnails, I added two 1/2 layout elements, added an “Image Media Element” to each of it, inserted a jpg (1200 × 800 px) to each of it and activated the lightbox.
Now I would like to:
– align the first image to the two images below
– reduce the white space between the first image and the two images below
– reduce the white space between the second and the third imageHow can I achieve this?
Best regards,
zizibe1July 23, 2018 at 2:56 am #988547Hi,
Thanks for the update.
I have applied a unique css class attribute to the columns and then added these css codes on the Quick CSS field.
.avia-image-container-inner, .avia_image, .av-image-caption-overlay { width: 100%; } div .av_one_half.truck-column-1 { width: 49%; margin-left: 0; margin-top: 2%; } div .av_one_half.truck-column-2 { width: 49%; margin-left: 2%; margin-top: 2%; }
Best regards,
IsmaelJuly 24, 2018 at 3:24 pm #989220Hi Ismael,
Thank you very much for your support. Now, the white space between the images looks much better to me .
Because I wanted to reduce the white space a little bit more, I changed the parameters of your code like this:
First column:
width: 49.5%
margin-left: 0
margin-top: 1%Second column:
width: 49.5%
margin-left: 1%
margin-top: 1%Now, the white space between the images looks alright to me.
Back to the image sharpness. I think I might have figured something out. I went to the portfolio page of my website and measured the size of the big image by pressing “shift + cmd + 4” on my MacBook. Then I cropped the original image exactly to this size in Photoshop. If the big image is one or two pixels larger or smaller then the measured size, it looks slightly blurry, but if the big image is exactly the measured size, it looks sharp.
In my case, the ideal image sizes are:
Gallery:
Big image 1196 × 798 pxImage Media Element:
Big image 1210 × 806 pxBut now, I have an issue concerning the lightbox of the “Image media Element”. The image in the lightbox is resized down a little bit which makes it look slightly blurry. How can I adjust the lightbox so the image isn’t resized down anymore?
Best regards,
zizibe1July 25, 2018 at 7:10 am #989508Hi,
On my screen (1920x1080px), full size (1196×798px) of the image is displayed inside the lightbox container.
Best regards,
IsmaelJuly 25, 2018 at 4:58 pm #989803Hi Ismael,
Thank you for your reply.
On my screen (2560 × 1440 px), the full size of the image is:
Original image: 1196 × 798 px
Gallery: 1196 × 798 px -> image sharp
Lightbox of Gallery: 1196 × 798 px -> image sharpOriginal image: 1210 × 806 px
Image Media Element: 1210 × 806 px -> image sharp
Lightbox of Image Media Element: 1199 × 799 px -> image blurryHow can I adjust the lightbox of the “Image media Element” so the image isn’t resized down?
Best regards,
zizibe1July 30, 2018 at 3:16 am #991354Hi,
I’m not sure why it resizes like that. I inspected the markup and found nothing. Please resize the image to exactly 1199x799px. It’s barely noticeable on my end.
Best regards,
IsmaelAugust 1, 2018 at 3:23 pm #992441Hi Ismael,
Thank you for your reply.
I resized the image to exactly 1199 × 799 px and uploaded it.
Here are the results:
Original image: 1199 × 799 px
Image Media Element: 1210 × 806 px -> image blurry
Lightbox of Image Media Element: 1199 × 799 px -> image sharpNow, it’s the other way round: The image displayed in the Image Media Element is slightly blurry while the same image displayed in the Lightbox of the Image Media Element is sharp. As you see, the Image Media Element displays the image bigger than the lightbox. This effects the sharpness of the image.
As a designer, the sharpness of the images is very important to me because I want to present them to my clients with the highest quality possible. So the Media Element and the Lightbox of the Image Media Element should display the image the same size.
How can I fix this?
Best regards,
zizibe1August 2, 2018 at 7:02 am #992727Hi,
Try to decrease the “Maximum Container width” value in the Enfold > General Layout > Dimension panel.
Best regards,
IsmaelAugust 5, 2018 at 6:56 pm #993727Hi Ismael
Thank you for your reply.
I decreased the “Maximum Container width” value. The problem is that this effected not only the Image Media Element, but also the big image of the gallery.
Here are the results:
“Maximum Container width value”: 1299 px
Original horizontal image: 1199 × 799 px
Image Media Element: 1199 × 799 px -> image sharp
Lightbox of Image Media Element: 1199 × 799 px -> image sharp
Big image of gallery: 1185 × 791 px -> image blurry
Lightbox of Gallery: 1199 × 799 px -> image sharpOriginal big vertical image: 705 × 1000 px
Big image of gallery: 676 × 959 px -> image blurry
Lightbox of Gallery: 705 × 1000 px -> image sharpTherefore I removed the css code and went back to my original settings:
“Maximum Container width” value: 1310 px
Original horizontal image: 1196 × 798 px
Big image of gallery: 1196 × 798 px -> image sharp
Lightbox of Gallery: 1196 × 798 px -> image sharpOriginal big vertical image: 682 × 962 px
Big image of gallery: 682 × 964 px -> image almost sharp
Lightbox of Gallery: 682 × 962 px -> image sharpNow the galleries come pretty close to be okay.
As for the blurry Image Media Elements, I think I’ll replace them all by galleries and choose “Big image with thumbnails below” even if there are no thumbnails. Nobody will find out if there’s an Image Media Elements or a gallery. The main point is that all the images are sharp.
Or do see another solution?
Best regards,
zizibe1August 7, 2018 at 4:03 am #994197Hi,
I’m running out of ideas here. I’ll ask the rest of the team to check.
Best regards,
IsmaelAugust 8, 2018 at 3:28 pm #995008Hi Ismael
Thank you for your reply.
Okay, if somebody of your team has another idea, I’m looking forward to hearing from you.
In the meantime, I’ll replace all Image Media Elements by galleries.
Best regards,
zizibe1August 10, 2018 at 9:38 pm #996149Hi,
Did it worked if the Media Elements work?
Best regards,
BasilisAugust 11, 2018 at 12:03 am #996187Hi Basilis,
Thank you for your reply.
No, unfortunately not.
When the image displayed in the “Image Media Element” and in the “Lightbox of Image Media Element” was sharp, the big image of the gallery was blurry, see my second last reply (#993727).
No matter which setting I chose up to now, always one or several of the horizontal or vertical images displayed in the following media elements were blurry:
– Image Media Element
– Lightbox of Image Media Element
– Gallery
– Lightbox of GalleryNo matter which setting I used, always one of these media elements varied in size. Already a slight difference of a few pixels made the image look blurry.
Best regards,
zizibe1August 19, 2018 at 12:43 pm #998897Hi,
Please try installing the thumbnail re-generator plugin and regenerate all thumbnails. If you still have any issue we need working login credentials to check your site and vire the frontend as it only shows a coming soon page at the moment. Please keep the credentials active till the issue is resolved.
Best regards,
VinayAugust 20, 2018 at 2:49 pm #999392Hi Vinay,
Thank you for your reply.
I installed the plugin “Regenerate Thumbnails” and went to Tools > Regenerate Thumbnails for all 44 Attachments > checked: “Skip regenerating existing correctly sized thumbnails (faster)” > hard refresh in Chrome, but I can’t see any difference.
Should the images be sharper now?
Best regards,
zizibe1August 24, 2018 at 5:34 am #1001034Hi,
The images should look proportionate now. However, the image quality looks the same as the uploaded image. Please check the image link in private and let me know if the original image you uploaded is of better quality? If so upload the original image via FTP to your site or google drive and share the link to the high-quality image so we can test it on your site.
I have checked for the image quality issue by uploading a high-quality test image and did not notice any pixelation. It looks perfectly fine please find the test link in private.
Best regards,
Vinay -
AuthorPosts
- The topic ‘Remove thumbnail overlay, disable changing of big image, remove first thumbnail’ is closed to new replies.