Docs

[Gunnix]

Dear support team,

I tried the Essential Grid within my X theme based website to provide a masonry boxed form due to visible text below the images while achieving the same height. When using exactly the same picture size e.g. thumbnails of photos at same dimensions, then it works fine. When using different images with all the same height (300px) and different width, then the Essential Grid fails to organise the grid properly. I would like to show the images at their original size (not higher, not smaller) without changing the total grid element height as the text size indeed can vary on smaller screens.

Please have a look at the attachment. The URL is http://www.habitz.ch/wp/en/buecher/reisefuehrer/ with latest WP, themes and plugins as of 26/12. Already tried some CSS tips out of the forum, but without success yet. Thanks in advance.

Gunnar

[Lely]

Hello Gunnar,

Thanks for posting in. Please double check the URL. The link is page not found.

[Gunnix]

Hi,
just realised the hosting provider has an issue. Will let you know once back, potentially with new URL.
Gunnar

[Christopher]

Ok, let us know when it’s available.

[Gunnix]

This reply has been marked as private.

[Christopher]

Hi there,

Images have different dimensions (in width or height) so they get displayed with different height.
Please change ‘Grid layout’ to ‘even’.

Hope it helps.

[Gunnix]

Hi,

done with “even” in the grid settings and “Masonry” in the skin – but then the text below the image is not displayed, only when hovering over. How can I achieve basically the same as it is now in the hover mode?

Gunnar

[Lely]

Hello Gunnar,

We should also select even type of skin to achieve that.

Hope this helps.

[Gunnix]

Hi Lely,
that doesn’t help. I have now both the skin type and the grid layout to even. As a result I can see only the images in 4:3 format without any frame around – which only comes when hovering over. See here: http://www.habitz.ch/wp/en/books/tour-guide-books/.
I would like to achieve a grid with similar image height for each item (can be different width though). This is about showing books which obviously have different X:Y ratios, it is not about photos which can be adjusted with no problem to have some areas cropped.
The worst resolution for me would be to change my book pictures to squared (Amazon has it sometimes), but this will not be nice.
Thanks for your ideas.
Gunnar

[Lely]

Hello Gunnar,

Would you mind providing us with login credentials so we can take a closer look on your settings? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Gunnix]

This reply has been marked as private.

[Christopher]

Hi there,

Please edit skin, select title and set transition to ‘none’ and ‘always visible’. Navigate to ‘Layout Composition’ and under animation tab, set ‘Group Animation’ option to ‘none’.

Hope it helps.

[Gunnix]

Hi,
unfortunately that didn’t help, the issue as such remains.

When I use an even layout together with an even skin such as Washington, the text imported from the pages is not shown (that’s why I thought about a masonry setting/skin). On images with similar height and different width, the Essential Grid takes completely wrong height (much bigger than the pictures themselves) and crops them in an uncontrolled manner regardless the media ratio.

Again my request: achieve exactly the same height for all grid elements as the image itself. It works so well when using images of exactly the same size which is correctly displayed (see http://www.habitz.ch/wp/en/travel/), so why not for images with different width?

Gunnar

[Gunnix]

This reply has been marked as private.

[Rad]

Hi there,

Please check, I changed the media ratio to 4:3, and change the image source size to Entry-Cropped instead of original. Sizes are not equal, but with exception on text content. You should minimize your text length too.

Thanks!

[Author]

Posts