• A
    arminunruh

    Hey Paul, I'm very sorry for the late answer. Could you send me a link to where you have the problem?

    Please send it to: info@laygridder.com

    posted in General Discussion read more
  • A
    arminunruh

    I realize this is a little tricky and I'm sure it is better if I create a function for this in an update of Lay Theme.
    That function can give you the JSON for an element, that would be practical.

    posted in General Discussion read more
  • A
    arminunruh

    Hello, sorry for the late reply.
    Please take a look at the first part of my answer.

    http://laygridderforum.com:4567/topic/53/post-navigation/2

    It shows how to retrieve the json of a page. You can traverse that json and find your stack element and all the infos you need in that JSON.

    posted in General Discussion read more
  • A
    arminunruh

    Oh can you update please? Then it should work again.

    posted in Bug Reports read more
  • A
    arminunruh

    Ah, interesting.

    Well, you would need to go through the JSON of the page's gridder and check the order of the thumbnails.

    Try this in your php:

    // $id has to be the id of the page you are getting the gridder json from
    $gridder_json = get_post_meta( $id, '_gridder_json', true );
    // if you need the gridder json of a term do: $gridder_json = get_term_meta( $id, '_gridder_json', true );
    
    // now turn the gridder json into an object:
    $obj = json_decode($gridder_json);
    
    // now print the json object into your error.log file. Read more about this here: https://codex.wordpress.org/Debugging_in_WordPress
    // to print to your debug.log you need to add this to your wp-config:
    // define( 'WP_DEBUG', true );
    // define( 'WP_DEBUG_LOG', true );
    
    error_log(print_r($obj, true));
    

    Now in your debug.log you can look at the json structure and traverse through it to find out the order of your thumbnails.

    The above can be tricky if you don't have the experience, but it is a great learning opportunity.

    You could also use the post order of the post overview:
    0_1540899966886_Screen Shot 2018-10-30 at 12.45.45.png

    Use a plugin like "Post Order" https://wordpress.org/plugins/intuitive-custom-post-order/

    And then for finding out the next post do a wp_query using orderby => menu_order
    https://codex.wordpress.org/Class_Reference/WP_Query

    like:

    // get all posts of post type "post"
    $args = array(
    	'posts_per_page' => -1,
    	'orderby' => 'menu_order',
    	'post_type' => 'post'
    );
    $all_posts_query = new WP_Query( $args );
    if($all_posts_query->have_posts()){
    	foreach ($all_posts_query->posts as $post){
    		// do something with $post->ID
    	}
    }
    

    posted in General Discussion read more
  • A
    arminunruh

    LayGridder and Gutenberg are two different ways to create layouts and they can work side by side.

    posted in General Discussion read more
  • A
    arminunruh

    hey hb!

    Sorry about this, please update laygridder and then it works again :).

    posted in General Discussion read more
  • A
    arminunruh

    Hey!
    Ohh :// Hmm this doesn't seem to work in a stack element.
    A workaround could be to make an image that contains these two images.

    posted in General Discussion read more
  • A
    arminunruh

    Hey with the new version 1.1.0 this is now fixed!

    posted in Bug Reports read more
  • A
    arminunruh

    Hey david, sorry for the wait.

    Its not possible ://

    posted in General Discussion read more
  • A
    arminunruh

    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.

    posted in Bug Reports read more
  • A
    arminunruh

    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?

    posted in General Discussion read more
  • A
    arminunruh

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

    posted in General Discussion read more
  • A
    arminunruh

    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

    posted in Feature Requests read more
  • A
    arminunruh

    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?

    posted in General Discussion read more
  • A
    arminunruh

    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.

    0_1528897650800_Untitled-1.jpg

    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.
    0_1528898566049_Untitled-2.jpg

    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.
    0_1528899540744_Untitled-3.jpg

    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.

    posted in General Discussion read more
  • A
    arminunruh

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

    posted in Bug Reports read more
  • A
    arminunruh

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

    posted in Bug Reports read more
  • A
    arminunruh

    Hey rm!
    Sorry for the late reply.

    Oh there are no plans for that yet!
    Personally I like this lightbox

    http://dimsemenov.com/plugins/magnific-popup/documentation.html

    posted in Feature Requests read more
  • A
    arminunruh

    Omg sorry for the late reply, we were on holidays and before I didn't look at the forum often enough 😞 😕

    I sent u an email!

    posted in General Discussion read more

Looks like your connection to LayGridder Forum was lost, please wait while we try to reconnect.