Masonry Gallery Order – fronted gallery display sort order is different than admin sort order

I got the same problem and would highly appreciate a solution.

Kind regards,

Eckhard

Dear Josue,

thanks for your reply!

Here are my tests of the 3 different size settings of masonry gallery:
Flexible Masonry:
Perfect Grid:
Perfect Automatic Masonry:

“Flexible Masonry” shows the pictures right, but the alphabetical order doesn’t work right in all cases. For example: “Benner, Andreas” should follow “Bende, Andreas”.
“Perfect Grid” and “Perfect Automatic Masonry” only show parts of the images, therefore these options are useless for me; but, the images are shown in right alphabetical order.

To enforce alphabetical order I added the code which is provided at https://kriesi.at/support/topic/sort-masonry-gallery-by-title to the functions.php of Enfold Child.

All used picture have the same aspect ratio of 3:4, but they have different sizes, due to the sources, which are different image details. For example the picture “Achenbach, Kurt” has a low resolution, as it can be seen in the lightbox.
Up to now I tried to avoid to resize the pictures to fit all the same size, because I want to let the user see the most available resolution at the lightbox.

Did I miss something to let “Perfect Grid” show the whole pictures?

Kind regards,

Eckhard

• This reply was modified 9 years, 6 months ago by Eckhard. Reason: Added sample for alphacbetical order

Hi Josue,

thanks a lot for the quick and good answer!
It works fine and seems to be the right way!

Please don’t take it amiss, I’ll drop the three samples I provided above, because the content is not intended to be public.

Cheers,

Eckhard

Hi Josue,

in this context I detected a new problem. My website uses on some pages masonry galleries with size setting “Flexible Masonry”. Up to now these pages worked fine. But now, with the CSS setting you suggested to the page with a masonry page with setting “Perfect Grid”, the other pages with a setting of “Flexible Masonry” are affected too – the layout of these pages is disturbed.

Is it possible to improve the CSS code snippet in a way to let only masonry pages with setting “Perfect Grid” be affected?
Or: Is it possible to let masonry galleries with size setting “Flexible Masonry” ignore this CSS code?

May be, it’s not possible to have a general solution. In this case it would be fine for me, to address a specific page in the CSS code. But, how?
Sorry for bothering you again and for my insufficient CSS knowledge.

Cheers,

Eckhard

Hi Josue,

thanks a lot for your support!
At the moment, I’m a bit frustrated. My tries to follow your suggestion worked only limited.
Yes, I could turn on custom CSS class fields as suggested by you by adding add_theme_support('avia_template_builder_custom_css'); to functions.php of “Enfold Child”.
I entered a value of “ehgrid” (without quotes, a string without special characters) at field “Custom Css Class”.
And I referenced it at custom.css by

.ehgrid .av-masonry-entry.av-masonry-item-with-image {
	min-height: 370px;
	min-width: 150px;
}

As a result the pages with masonry galleries and option “Flexible Masonry” work again as expected, they are now excluded of the new stuff. But my gallery with “Perfect Grid” doesnt’t follow the new mechanism, it falls down to the old problem of unsufficient heights of the pictures.

My assumption is, there might be a small syntax error in the CSS.
Josue, can you please prove the CSS code of your last posting to be free of any syntax error?
Is a leading dot needed or not at the term “av-masonry-entry.av-masonry-item-with-image”?
Your first CSS code snippet had one, the second one not.
I tried a lot of combinations, but up to now, none of them works as expected.

Cheers,

Eckhard

• This reply was modified 9 years, 6 months ago by Eckhard. Reason: reduced redundanr fomulation

http://mg-hasenlauf.de/pfe/2012-portraets/

Sorry, this was my fault.
The page had a restricted access and my intended removal of access limitation was uncomplete.
Now it should work.
Please try a reload of the page.

Regards,

Eckhard

• This reply was modified 9 years, 6 months ago by Eckhard. Reason: typo

Dear Josue,

thanks a lot for going in detail of this problem and providing a working solution!
You are the hero of the day!
But, please, let me know: Where did you make a change?
Where is the mentioned “Color Section”?
Thanks a lot for your investigations, your help and, in advance, for your reply!

Cheers,

Eckhard

Dear Josue,

again, thanks a lot for your efforts!
However, up to now I was somehow “blind” to this part “Color Section”, I didn’t realize it to be present and for what it might be useful.

And, let you and your support team know, I’m going more and more to recommend “Enfold” to other WordPress users to be a theme with an exceptional support.
I wish you and your team all the best and success in any kind!

Cheers,

Eckhard

Dear Josue (or any other member of the fabulous Enfold support team),

I still have problems with my portrait gallery.

“Perfect Grid” seems to be the best option for my case, but I couldn’t find a way to let the thumbnails be shown without being clipped (in both dimensions, width and height). I tried a lot of settings of “min-height” (and other settings like max-hight, min-width, height and width), without any success. I couldn’t get rid of the clipping.

If I use “Flexible Masonry”, the thumbnails are not clipped! But I got problems with the sort order, again with trying a lot of settings, without any proper solution.

A last approach was, not to use “Masonry Gallery”. Instead I tried “Gallery”. This looks fine, but I got sporadic gaps.

To illustrate my tries, I created a test page. It’s passwort protected, please use this password: enfold

My main questions are:
1. Is a way known, to use “Masonry Gallery” with “Perfect Grid” without clipping the thumbnails (like “Flexible Masonry” does)?
2. What can be done to use “Gallery” without the sporadic gaps?

Kind regards,

Eckhard

• This reply was modified 9 years, 3 months ago by Eckhard.

Dear Josue,

again: You are the hero of my day!
Thanks a lot for your suggestion. It fits my needs and works as expected!
In my case I will work with “Gallery” instead of “Masonry Gallery”. Due to your proposal, the gaps are gone!
Did I miss something?
Yes: THANKS A LOT!

Kind regards,

Eckhard

Dear Josue,

unfortunately this theme isn’t solved yet.

I investigated this item with different screen resolutions by multiple devices and by resizing browser windows to different sizes. I checked different devices and browsers at different operating systems – with low and high screen resolutions.

The results of my studies are extremely frustrating and I don’t know, how to proceed.

To summarize my experiences: A specific value of “min-height” (like “360px”) works fine with a specific screen resolution.
Using a bigger screen resolution, this value is to low,
Using a lower screen resolution, this value is to high.
There isn’t any valid value of “min-height” to solve the problems at any screen resolution.
It seems not to be a matter of “isn’t”, it’s a matter of “can’t”: It can’t be set a value of “min-height” to be “right”.

The problems of both kinds of galleries, “Masonry Gallery” and “Gallery” are still existent at several screen resolutions.
In other words: The “solution” to define a specific value of “min-height” doesn’t solve the problems in general.
The “solution” seems to be a workaround for specific screen solutions. It’s not a solution for the wide spread screen solutions. It’s a violation of the intention to be “responsive”.
My conclusion is: None of both galleries, “Masonry Gallery” and “Gallery” fulfills the “responsive” concept without errors. They are “responsive” in limited ways, but they are buggy.
In both cases, the advice to use “min-height”, leads to allegedly “solutions”. But these aren’t solutions, They are workarounds, which work only with a subset of multiple screen resolutions.

I highly appreciate the value of the integration of multiple puzzle pieces, like “Enfold” does. Probably it’s a extreme challenging task.
Please let me know, (a) if another kind of solution is avalible or (b) if I can help you to get rid of the bugs.

Kind regards,

Eckhard