• 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
  • A
    arminunruh

    Hey silvan,

    Good point!

    This is because the textstyles feature is being used and the "Default" textstyle is used by default for the tinymce texts.

    You're right, this should be optional. I'm writing it down!

    posted in Bug Reports read more
  • A
    arminunruh

    Ok thanks for the heads-up we will make the grid not show up in the frontend, if it is empty for the next update!
    Sorry for the late reply.
    Have a great day!

    posted in Feature Requests read more
  • A
    arminunruh

    Sorry for the late reply!

    Ah yea that's a clever feature! We will write it down.

    posted in Feature Requests read more
  • A
    arminunruh

    Hey Silvan, whoops sorry for the late reply!

    We will fix this!

    posted in Bug Reports read more
  • A
    arminunruh

    If you want to change the anchor tag of an image element, that is linked, this is not possible right now.
    Because the filter lg_frontend_img only filters the image, not the surrounding anchor tag markup.

    Let me know your exact use case and we can create a new filter!

    posted in Feature Requests read more
  • A
    arminunruh

    Hey do you mean the <a> tags for image links or post thumbnail links?

    There is no specific filter for <a> tags only, but you could completely replace the post thumbnail markup with your own markup.
    For post thumbnail links you can use the filter:
    lg_frontend_postthumbnail

    The following code is just an example:

    add_filter('lg_frontend_postthumbnail', 'my_theme_lg_frontend_postthumbnail', 10, 3);
    
    function my_theme_lg_frontend_postthumbnail($thumbnail, $element, $obj)){
    
    				$thumbnail = "";
    				$attid = get_post_thumbnail_id($element->postid);
    				$alt = get_post_meta($attid, '_wp_attachment_image_alt', true);
    				$srcset = wp_get_attachment_image_srcset($attid);
    				$vw = LayGridderFrontend::get_vw($obj, $element->colspan);
    				// is viewport bigger than breakpoint? use $vw as "sizes", otherwise use 100vw
    				$sizes = '(min-width: '.(LayGridderOptions::$phone_breakpoint+1).'px) '.$vw.'vw, 100vw';
    				$url = wp_get_attachment_url($attid);
    
    				$is_gif = substr($url, -4) == ".gif" ? true : false;
    
    				$thumbnail .= 
    				'<a href="'.get_permalink($element->postid).'" data-id="'.$element->postid.'" data-slug="'.get_post_field('post_name', $element->postid).'" data-title="'.htmlentities(get_the_title($element->postid)).'">
    					<div class="lg-placeholder" style="padding-bottom:'.($element->ar*100).'%;">';
    				if($is_gif){
    					$thumbnail .= '<img src="'.$url.'" alt="'.$alt.'">';
    				}else{
    					$thumbnail .= '<img srcset="'.$srcset.'" sizes="'.$sizes.'" src="'.$url.'" alt="'.$alt.'">';
    				}
    				$thumbnail .= 
    					'</div>
    				</a>';
    
    				$thumbnail .= 
    				'<div class="lg-caption lg-textformat-parent"><p>'.get_the_title($element->postid).'</p></div>';
    
    return $thumbnail;
    
    }

    posted in Feature Requests read more

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