administrators

Hey with the new version 1.1.0 this is now fixed!

Hey david, sorry for the wait.

Its not possible ://

Hey thanks for reaching out. We discussed this via email already. I think it might have to do something with the demo being bilingual and then when a translation of a text is missing, no text is shown for the language where the translation is missing.

I wrote it down and will take a look.

Hey,

– upload 3 images that look the same but with small difference of height.

I think what you mean is, you want to use your own image sizes that you set with add_image_size for example: https://developer.wordpress.org/reference/functions/add_image_size/

These sizes can be configured to always have certain aspect ratios, and you want your client to be able to choose from these image-"formats" when inserting them?

hey thats a really good idea, i wrote it down. right now that is not possible sry!

Hey!

Not sure if the lightbox plugin is compatible with lazyloading. I think it isn't.

function lightbox_image_element($img, $element, $obj){
$attid = $element->attid;
$full_src = wp_get_attachment_url( $attid );
return '<a class="image-link" href="'.$full_src.'">'.$img.'</a>';
}
add_filter( 'lg_frontend_img', 'lightbox_image_element', 10, 3 );

Then in your javascript:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

Of course you need to include all files of Magnific Popup as described here:
http://dimsemenov.com/plugins/magnific-popup/documentation.html

Ah!

That doesn't work ://

Maybe we can do that in the future, I will write it down as a feature request.

So what you mean is for example a ACF repeater or ACF flexible content field where you can add laygrids?

Hey!

With this CSS, an image will always fit into the browser window's height. Note that this won't work on any website, as this CSS works together with some other LayGridder CSS.

.lg-type-img.lg-col{
  max-height: 100%;
}
.lg-type-img.lg-col .lg-placeholder{
  position: static!important;
}
.lg-type-img.lg-col img{
  object-fit: contain;
}

This some optional CSS. When a row only contains only one image, this one image will always be centered and fit into the browser window's height:

.lg-one-col-row.lg-contains-img .lg-placeholder{
  position: static!important;
}
.lg-one-col-row.lg-contains-img .lg-col{
  position: static!important;
}
.lg-one-col-row.lg-contains-img img{
  object-fit: contain;
}

I added both of these CSS to your stylesheet. Find it at /* CSS by Armin Unruh */
Also I commented out some CSS that you won't need anymore above that in your stylesheet.

You will notice that while this works, your texts do not resize in the same manner as your images and the text will overlap images in some cases.

I see that you only have lots of text in your first row in the example page you sent me. To avoid having that text overlap the images below you could use this CSS:

.lg-grid .lg-row:first-child {
  max-height: calc(100vh - 180px);
  height: auto;
}

Note that your other CSS is

.lg-grid .lg-row {
  height: calc(100vh - 80px);
}

So when I set .lg-grid .lg-row:first-child to height:auto this will prevent the row getting smaller than it's row content.

Also you will notice the image sizes change, but the spaces between your images won't change relative to the image sizes. In example 2 below I mention how to do this theoretically. (Not rlly possible with laygridder).

I had to think about this problem more deeply and wrote down some of my thoughts here:

So the problem is the layouts that can be done with laygridder are entirely browser-width-based. Not browser-height-based.

What you are looking for is a layout that is width and height based at the same time.

The pictures doesn’t fit to the row’s height… They exceed the containers.
And if I overwrite the img’s height with CSS, it breaks the proportion of the picture.

Let's for a minute not think about laygridder, but let's think about how to approach this problem in general:

Simple example. You have an image with an aspect ratio of 4:3.
First image on the left, the browser is wide, image on the right, the browser is narrow.

In the first wide browser, the image has to be "height: 100%",
In the second narrow browser, the image has to be "width: 100%"

There are multiple ways to code this:
JavaScript and CSS:

1. You need to compare the aspect ratio of your browser window to the aspect ratio of the image. If windowAr > imageAr then give image height: 100%; and width: auto;
2. CSS only: Give image max-width: 100%; max-height: 100%; height: 100%; width: 100%; The downside here is the natural size of the image should be larger than your browser window if you want to always have the same space between image and browser edge.
3. CSS only: width: 100%; height: 100%; object-fit: contain;

Second example. You have two images next to each other.

Imagine around these two images is a container (red line). You need to compare the red container's aspect ratio to the browser-window's aspect ratio. Based on that you give the container either width:auto; height: 100%; or width: 100%; height: auto;.

Here is a somewhat similar example to the one before with 2 images that have different aspect ratios.

This is what it should work like if you were to do a layout that is both browser-width and browser-height based.

Lastly, I want to apologize for you having to wait so long for a response. I asked one of my colleagues to do support for laygridder, but he failed to do so. Now I will ask someone else to do the support.

Also you can set your php version to 7 instead of 7.2 I think until this is fixed

Yep sorry, been busy with many other things, looking to fix this soon.