OK. I fixed the problem. We figured out what was important–its the ratio that is important, not the actual size of the image.

For example if you want all the pictures to be square you would size them all to 400×400, or 800×800 or 120×120, or whatever. If you want vertical rectangle pictures, then an aspect ratio of 600 (height) x 300 (width) or 800×500, etc. Or if you want it horizontal rectangle, then it would be just reversed 800 (height) x 500 (width), or 300×600, etc. It is the relationship of the height x width that matters, not what the actual size (the numbers) are, that is taken care of by the theme itself (Enfold in my case).

So what we wanted was a square ratio. So we set all our different image sizes (featured image, thumbnail, small, medium, large, post, portfolio, etc) in Enfold to the same “aspect ratio” which for us was square (e.g. 650×650, 700×700, 120×120 respectively) .

Then, we resized all our pictures in Photoshop to the maximum size we thought we would use–for us that was 800×800. So every picture was resized to 800×800 (for you PS people, we used an action, much faster :).

Next, we deleted all the images in our media library that we were replacing. Then we uploaded all the new 800×800 images we just created and attached them to the respective products on the product pages. The pictures were resized by the cart according to the use of the picture, so our thumbs were 120×120. The main product image was sized by the cart to 450×450, and the enlarged product image was 600×600.

Now, if we ever want to change those preferences, we can just change setting in Enfold, and then regenerate the images. As long as we’ve kept the same ratio, it will work seamlessly.
You can see how we’ve done on our website here: http://www.outtagear.com .

I hope this helps others, Good Luck!

I think that at least the increasing of the maximum vertical dimension of the lightbox to use the available screen dimension should be possible, isn’t it?
And also the possibility to avoid the resizing of the picture inside the lightbox, in that way you can overcome the problem uploading the images with the needed dimensions.

In any case, could you please suggest me a lightbox plugin that is compatible with Enfold for solving this problem, because I know that sometimes plugins create problems to the theme.

For example, trying “Final Tiles Grid Gallery” plugin, it seems that also the lightbox from Enfold is opened.
Is there a simple way to disable the opening of the lightbox of Enfold?

Thanks,
Giovanni

Ok. I’ve put also changes proporsed by Ismael and Josue, but still there is no effect I want to get in ajax portfolio, display as gallery:
– don’t display lightbox after clicking big photo
– don’t display lightbox after clicking on small photos on thumbnail
– big photo should be not clickable
– small photos on thumbnail should be clickable, but after clicking it should change big photo, no display any lightbox

My page is http://www.yskra.pl

Ok guys, theme updated. results of my testing are:

In Google Chrome it does not appear. The page fades to grey and if you scroll down to the bottom of the page there is a large white space displayed.
On Samsung Tab 3 – Chrome browser now displays the lightbox, but you have to “chase” it down the screen
On Samsung Tab 3 – native browser it does not show the lightbox and now you can’t change the image that appears in the ‘big thumbnail’ by selecting one of the small thumbnails
On Samsung Galaxy S2 – native browser, lightbox doesnt show and now you can’t change the image that appears in the ‘big thumbnail’ by selecting one of the small thumbnails. Extended Header issue resolved
On Samsung Galaxy S2 – Chrome browser: Extended Header. Google Font not showing, Gallery ‘Big Preview’ height not auto adjusting as per the CSS. Lightbox does not appear although page fades to grey and it seems that you can ‘chase’ it down the screen but its not showing
On IE11 everything works as expected

here’s a screen shot of how i have the header.php configured with the google font code if it helps:

https://www.dropbox.com/s/4ddig3zdh90t31g/headerphp.PNG

thanks,
stu

btw. how can the gallery post being displayed on the blog entry page?

http://wpml.viramedia.de/news/

thanks

Thanks for the tipp… found the issue… it was the themeFusion Core Plugin for AVADA previosly installed…

thanks did work great, problem solved

Hi,

I am trying to be more clear.

Have a look at the images in the following link:
https://drive.google.com/folderview?id=0B8lRqyCRL2oHc2lJX0htTUcwZXc&usp=sharing

A portrait image, like “Arabesque” (width 900, height 2773 – picture 1), is displayed very small on the lightbox (picture 3), even smaller than the correspondent thumbnail image, and the lightbox is used to have a more detailed picture.

A landscape image, like “Allorizzonte” (width 1500, height 508 – picture 2), is displayed as a big image on the lightbox (picture 4), much too big.

The point is that the lightbox is not using all the available vertical dimension of the screen but only a portion of it and that all the images are resized to the maximum height and so the proportionality with the real images is left.

What I need for the lightbox is that the maximum height should be as large as possible on the basis of the available screen and moreover to display the images proportionally to the real ones, having the possibility either to define the % of the resize or to directly define the size of the image displayed on the lightbox.

In such a way, starting from the maximum height available for the lightbox, you can accordingly define the dimension of the different images in order to display images similar to the real ones and properly detailed.

Thanks again for your help.

Kind regards,
Giovanni

Hi David,

Thx for your reply!

I understand you have this for the dynamics of enfold, but shouldnt that be aplied to the avia containers that require this and explicitly not to the custom text block images?

How would you add a 200×300 image inside the custom text block to left aline it as a thumbnail to have text run around it and make sure screens display it at 100×150 including retina?

Visual:

[img] text te
xt text text t
ext text etc

My opinion is to only apply width/height=100% to places where this is needed, not all images.

Ps. Somehow this prob came with 2.6(1) and was not there in 2.5.4 resulting in images being shown double sized allover the site.

• This reply was modified 12 years ago by borkent.

Hi Dude,

Thanks for your reply. the lightbox is gone but it is still a link nojust opening in new page.

Shouldn’t have mentioned the lightbox, sorry. I still want to trigger the gallery big picture but without it being a link to whatever, clicking on it must not be possible. Only to trigger.

So thumbnails are not a link to anything only to activate/trigger the gallery.

thanks

Hi Dude,

I’ll give it a shot…But still having an issue with the images not being the same height.

Ismael – this css: `#top div .avia-gallery .avia-gallery-big img {
height: 100%;
}`

works in FireFox but stretches the images in Chrome way beyond their 670px height – no good. Please feel free to take a look: http://www.sistahhollywood.com/spring-2014-trend-report/ … And for some reason in Chrome, it removed the thumbnails from under the big preview from 2 – 4. #veryfrustrating

Is there documentation or a post somewhere that tells us what sizes these images should be to begin with? So it looks correct/good across browsers just like your demo … This way we can avoid having to constantly tweak the CSS.