• R

    The Default textformat CSS is applied two recurring times in the code.
    It's not breaking or anything, but just "more code for nothing".

    Here's what I found :

    I noticed in the inspector that the same CSS rule was applied two times to the same selector and that they were very close (line 109 and line 114)


    I searched in laygridders files for .lg-textformat-parent > *, ._Default{ and added /* test n° */ to each occurence.


    Result in the rendered HTML :


    After code inspection, it seems like test 1 and test 5 are identical rules that can be both printed depending on those conditions :

    • "test 1" will be printed every time, no matter what.
    • "test 5" will be printed if LayGridderFormatsManager::$hasTabletSettings is false

    I'm pretty sure we can delete the second occurrence ( where I commented /* test 5 */ ) without any consequence except cleaner code.

    laygridder > formatsmanager > formatsmanager.php -- line 486

    I also found this issue on most of the other website featured on laygridder.com.
    The ones I didn't find the issue probably had LayGridderFormatsManager::$hasTabletSettings enabled.

    posted in Bug Reports read more
  • R

    Hi there

    @f-albert-work I'm just seeing your answer now.

    I'm still getting the "made with LayGridder" for each grid i'm displaying on the same page.
    Currently running LayGridder version 1.1.7 (wp says "This plugin is up to date." ).

    Here is the very simple loop i'm using.
    It queries the_laygrid() for each post and I get "made with LayGridder" for each post.

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <a href="<?php the_permalink(); ?>">
                <?php the_laygrid( get_field('project_cover')->ID ); ?>
                <button class="open"><?php the_title(); ?></button>
    <?php endwhile; endif; ?>


    Because there is no workaround, I just removed the <no script> bit from the plugin code as a temporary measure.
    My changes will get erased with the next update.

    posted in Feature Requests read more
  • R


    		// 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 );
    		// get all pages
    		$args = array(
    			'posts_per_page' => -1,
    			'orderby' => 'menu_order',
    			'post_type' => 'page'
    		$pages_query = new WP_Query( $args );
    		// get all posts of custom post types
    		$posts_of_custom_post_types = array();
    		foreach ($custom_post_types as $post_type) {
    			$args = array(
    				'posts_per_page' => -1,
    				'orderby' => 'menu_order',
    				'post_type' => $post_type->name
    			$custom_posts_query = new WP_Query( $args );
    				$posts_of_custom_post_types[$post_type->name] = $custom_posts_query->posts;

    For now I patched every 'post_per_page' => -1 to be 'post_per_page' => 99
    (if there is more I probably don't want to target a specific post)

    But maybe the best option would be to be able to search when there is more than a defined number of posts

    posted in Bug Reports read more
  • R

    Hi !

    LayGridderLocation::get_select_view() is pretty much querying every post on the wp and then inserting it in the DOM as an option for the LayGridder > Options > Location form".

    <option value="1">Non classé</option>
    a few options laters
    <option value="40149">Comment ça marche ?</option>

    With 45k posts the page was just failing to display without error bellow 1024Mo allowed to php memory.

    So I might be testing this on the wrong type of website for layGridder but even with a few hundred that might be problematic.

    posted in Bug Reports read more
  • R

    Hi guys !

    I just wanted to talk about the <no script>Made with Laygridder</noscript>

    I'm all for sharing and giving credits. The only thing is that in my particular situation, I wanted to use layGridder as a cover layout building plugin. Which means that I can call 30 layouts in the same page if I want.

    (exemple : https://pierrerose.studio/projects/ )

    And while it's amazing in the back-end to build my layouts in seconds and pretty cool (with a few tweaks) in the front-end. At first on Google my page was showing as below :

    Pierre Rose Studio
    Work. Artwork. Made with layGridder. Made with layGridder. Made with layGridder. Made with layGridder. Made with layGridder. Made with layGridder. Made with layGridder. Made with layGridder ...

    While I'm still building the website and will definitely need to work on my SEO at some point, my guess is that : this is not the team's expected behaviour.

    And given the fact that it is not instroduced as a wordpress filter/action, and that there is no other implemented way to prevent it from being added 56 times (like include_once 'credits.php'), there is nothing I can do on my side to mitigate the issue (besides editing the plugin files directly or stop using laygridder).

    How important is this feature for layGridder('s team) ? Does it really bring SEO / visibility benefits for the plugin ?
    To be honest I'd actually prefer to add visible credits for the user to see and click than something for google search only (especially in it's current state).

    In my opinion, as a plugin the best fit for that <no script> would be to be printed only once in the page footer on every page that has a gridder or as a desactivable option.

    posted in Feature Requests read more
  • R

    Custom img filter :

    //img Markup with LQ source, data-src and auto-size
    function get_respimg( $attid ) {
        $full_src = wp_get_attachment_url( $attid );
        $alt = get_post_meta($attid, '_wp_attachment_image_alt', true);
        //ignore if gif||svg
        if (substr($full_src, -4) == '.gif' || substr($full_src, -4) == '.svg' ) {
            return '<img src="'.$full_src.'" alt="'.$alt.'">';
        $lowQuality = wp_get_attachment_image_src($attid, 'thumbnail')[0];
        var_dump( $lowQuality );
        echo '<br>';
        $srcset = wp_get_attachment_image_srcset($attid);
        return '<img class="lazyload" data-sizes="auto" src="' . $lowQuality . '" data-srcset="' . $srcset . '" alt="' . $alt . '">';
    //Lazysize layGridder
    function lazyload_images_filter($markup, $element){
        return '<div class="lg-placeholder" style="padding-bottom:' . ($element->h/$element->w*100) . '%;">' . get_respimg($element->attid) . '</div>';
    add_filter( 'lg_frontend_img', 'lazyload_images_filter', 10, 2 );

    Load Lazysize for this to work

    function load_lazysize() {
        wp_enqueue_script( 'lazysizes-js', "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.6/lazysizes.min.js");
    add_action( 'wp_enqueue_scripts', 'load_lazysize' );

    What it does :

    • Loads the thumbnail img as src first (me personnaly I load another image size 25px wide)
    • Enables you to style images depending on loading state (.lazyload, .lazyloading and .lazyloaded) with the effect you desire : blur, opacity, translation
    • Then loads the perfect image size with srcset and data-sizes="auto".
    • If you want non-srcset compatible browser to show non-lowquality img, you can add data-src="$theImageSizePreferToLazyloadInstead"

    posted in General Discussion read more
  • R

    also here is my config for image_sizes in function.php

    update_option( 'thumbnail_size_w', 28 ); 	// 28 (Preload)
    update_option( 'thumbnail_size_h', 0 );
    update_option( 'thumbnail_crop', 0 );
    add_image_size( '_160', 160, 0 );		// 160
    add_image_size( '_265', 265, 0 ); 		// 265
    update_option( 'medium_size_w', 512 ); 		// 512
    update_option( 'medium_size_h', 0 );
    update_option( 'medium_large_size_h', 0 );	// 768 (default width)
    add_image_size( '_1024', 1024, 0 );		// 1024
    add_image_size( '_1280', 1280, 0 );		// 1280 (HD)
    add_image_size( '_1540', 1540, 0 );		// 1540
    add_image_size( '_1920', 1920, 0 );		// 1920 (FULL HD)
    add_image_size( '_2560', 2560, 0 );		// 2560 (WQHD)
    add_image_size( '_3200', 3200, 0 );		// 3200
    add_image_size( '_3840', 3840, 0 );		// 3840 (4k)
    update_option( 'large_size_w', 5120 );		// 5120 (5k)
    update_option( 'large_size_h', 0 );

    posted in General Discussion read more
  • R

    I updated the snippet you can find in the laygridder's developper documentation to add lazysize="auto" for images.
    I would like to enhance it further. But I don't want to spend too much time on it because it doesn't work everywhere in the layGridder.
    Details below code

    //img Markup with LQ source, data-src and auto-size
    function get_respimg( $attid ) {
    	$full_src = wp_get_attachment_url( $attid );
    	$alt = get_post_meta($attid, '_wp_attachment_image_alt', true);
    	//ignore if gif||svg
    	if (substr($attr->sizes->full->url, -4) == '.gif' || '.svg' ) {
    		return '<img src="'.$element->sizes->full->url.'" alt="'.$alt.'">';
    	$lowQuality = wp_get_attachment_image_srcset($attid, 'thumbnail');
    	$srcset = wp_get_attachment_image_srcset($attid);
    		return '<img class="lazyload"
    //Lazysize layGridder
    function lazyload_images_filter($markup, $element){
    	return '<div class="lg-placeholder" style="padding-bottom:'.($element->h/$element->w*100).'%;">'.get_respimg($element->attid).'</div>';
    add_filter( 'lg_frontend_img', 'lazyload_images_filter', 10, 2 );
    function enqueue_lazysizes_js(){
    	wp_enqueue_script( 'lazysizes-js', "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.6/lazysizes.min.js");
    add_action( 'wp_enqueue_scripts', 'enqueue_lazysizes_js' );

    What it does and why:

    • it includes data-size="auto" to always serve you the best fitting image and decrease load time
    • I also included a lowquality initial image source to enhance percieved loading
      (my thumbnails are 28px wide. needs a separate css blur until it is lazyloaded)
    • I splitted the function into "get_respimg()" and lg_frontend_img filter to reuse it in other places.

    What it can't do

    • work on every images in the gridder

    It's a start :
    It only works on images added as elements in the gridder.
    There is at least two other ways to include images in the gridder : background-images and post_thumbnails.
    post_thumbnail has it's own filter so I could add support for this but row background-images doesn't have a filter.
    So I splitted created the resp_img() function separately in hope that we would either get a filter for background-images or a filter for all images. (this way we could also develop custom elements using that filter).

    Idealy I could make it into a little laygridder lazysizes advanced plug-in with better markup/polyfills/compatibility and opt-ins to add blur-effects, config wordpress image sizes, etc.
    But for now i'm stopping there until there is support for background-images.

    posted in General Discussion read more
  • R

    I can see why layTheme and layGridder are different products with different purpose. This is why i'm a customer of both. But some things that could benefit to both are sometimes only developped for one and it is often layGridder's loss.

    Module CROSS Compatibility
    We can create our custom modules for layGridder and this is awesome. But cross-compatibility could really empower this feature. Because layGridder has a small userbase compared to layTheme, there is very little incentive into creating custom modules plugins. With cross-compatiblity, layTheme could see "modules extension plugins", layGridder would see more of them.

    This is very important and already fixed in layTheme (which actually needs it less).

    • layGridder is using fixed sizes sizes="(min-width: 701px) 89.9vw, 100vw"
    • layTheme is using data-sizes="auto"

    Because layGridder is a plugin, we're supposed to be able to set any width we want for the gridder. But if we do, the fixed sizes in the attribute will be false (to calculate the fixed sizes, layGridder always consider the gridder is 100vw large).

    So the gridder on my website is 60vw large and still downloading 4k images which are four times more heavy than necessary.

    Invalid HTML
    Last week I brought up the fact that layGridder is making invalid HTML while layTheme doesn't.
    I had no anwser on the original post but this is kind of important for a plugin :
    any custom javascript using '#id' will fail. The purpose of the layGridder over layTheme is to be able to go custom !

    Because javascript knows that there should not be more than one id="iamtheone" on the same page, when it finds "iamtheone", it stops looking.
    And unique id="" are usefull, even if javascript could pick up more than one.
    If i'm using a smooth scroller (pretty basic) going through id="iamtheone" then "iamthesecond", "thethird", etc.
    If i'm on the page will never scroll for me. Because it is scrolling through the invisible id="" from the hidden desktop layout. That's just an exemple not even my own usecase.

    VW vs %
    Like srcset="" it is also an issue on a gridder that wouldn't be 100% of the viewport width.
    I'm also bringing this back to life. Precents % are better than VW where it can be applied (it's better everywhere but especially in layGridder where the developper may want to use a custom width for the gridder).

    posted in Feature Requests read more
  • R

    I'm seeing this behavious when editing a grid where the row gutter reset itself when I hit the Add Row button.

    The bug :

    • I have a page with gridder enabled on pages. Row Gutter form field is set to 3%.
    • I click the Add Row button
    • A row is added without any Row Gutter above. The Row Gutter form field is emptied (not showing 3% anymore). All other row gutters in the grid stay intact, as they were.
    • Only way to set that row gutter to 3% is to manually go to the Row Gutter form field and set it to 3% again.

    I reckon this is not the expected behavious. While variable Row Gutter within the same grid could be a feature, it seem here that something makes the set row gutter not to be applied to newly added rows.

    Before adding row :

    After adding row (I just set the row bg-color to purple to clearly see that there is no gutter ++ "Row Gutter Field" is now empty) :

    Extra Steps that I can think of to reproduce happening during website configuration :

    I first created the pages and enabled the gridder on pages.
    Then I set the gridder defaults of row gutter to 0% and used once the Apply "Desktop Gridder Defaults" function
    I set the Row Gutter to 3%, added a couple of rows than saved.

    Interesting to note :

    Can reproduce as indefinitely in the same page : add row -> no gutter added -> set Row Gutter to 3% -> expected result -> add row -> no gutter added -> set to 3% -> expected result, etc,..
    If i manually set the Row Gutter to "0%" (same as the "Gridder Defaults" value), when I add a row the Row Gutter field is not emptied and stays set as "0%". Only when I have the Row Gutter set to a different value than default the bug happends.

    My guess :

    When adding a row, instead of checking first if the page has a specific row gutter, it directly fetches the default row gutter defined in "Gridder Defaults".

    posted in Bug Reports read more
  • R

    @rsepierre I just checked. I think laytheme already behaves this way.
    Both mobile and desktop menus are in the DOM (one with display: none;).

    But for the actual Grid, laytheme swaps them completely (not sure if it's from a variable or ajax) so there is only one grid in the DOM at the one time.

    posted in Bug Reports read more
  • R


    I just noticed that the layGridder Plugins throws the desktop layout + phone layout entirely every time.
    Adding a simple "display:none" on the one that should be hidden.

    While I do understand it's probably simpler for transitionning from one layout to another. Isn't it more heavy on both server & device for a small benefit ? (we rarely transition from phone size to computer size).

    Also it is resulting in invalid HTML :
    I set an id="" for an element inside my grid and because the layout is added twice to the DOM (i'm guessing three times if I activate tablet layout), I have two elements with the same id="".
    Which is not valid HTML and in my case breaking some javascript I'm running ( working on a fix for myself ).

    I'm just thinking there could be some fixes.

    • Either fetching the resized layouts from server on breakpoint.
    • Storing the layouts inside a variable just to avoid adding them to the DOM and swapping them on breakpoint (quick fix)

    posted in Bug Reports read more
  • R

    Hi guys,

    I added the SVG MIME support in wordpress to be able to upload them. But when I import them as an image in the gridder it just does nothing (grays out the screen until I click somewhere else). I was wondering if we could get SVG support in the gridder ?

    And while I'm at it, I never dared to ask for multiple source support for video format, especially webm because of the high quality you can get with so lightweight files. Always included the mp4 as a fallback (because it works on every broswer).

    The holy graal would be to also support multiple video resolutions just as with images, but this might be an overkill feature to ask for.

    <video controls> 
       <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
       <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
       <source src="video.mp4" type="video/mp4"> 
       <source src="video.webm" type="video/webm"> 

    posted in Feature Requests read more
  • R


    I would like to suggest the ability to have more than one gridder per post.
    That would enable having more complex designs. With sections unreveable, or queried under certain conditions

    I though of this solution after my previous feature request didn't have much success :

    This would fix my first request, but could also be a fix to :

    (ability to add multiple gridder as "fields" and add conditions)

    (separate gridder thus enabling to set "id" to each one and scrolling to them)

    (different gridders for different languages)

    Whether or not going through ACF, I believe it could probably give users many ideas and possibilities.

    posted in Feature Requests read more
  • R

    I wanted to share this. It is not a bug per se but more of what I see from here as a design limitation that translates in unreliable editing.
    But maybe I don't see the whole picture and it is as good as it gets and the fix i'm suggesting would break more things that it would actually fix.

    It is about the use of "vw" over "%" in some cases.

    First, they are shown as "%" in the back-end, which to me is confusing to see "vw" in the debugger.


    Also I believe "vw" is sadly unreliable because it include the scrollbar in windows, but the viewport limits the content before the scrollbar. Which makes the unit unreliable depending on wheter your page has a scrollbar or not, if the user is using mac or pc. But that's all W3C's problem and that is not (not really) the issue here.

    For layGridder, the use of vw translates in proportion issues :

    If the gridder in our webpage is not full-width : those 56% of space-above in the exemple screenshot can become way out of proportion.

    In the back-end, an element with 56% space above could be the same size as another element, and in the front-end, that first element could have doubled in height.

    More over, in the sole back-end : if you resize your editing window, elements will start to change in proportions, and you will have no idear how it will actually look until you save, refresh, see for yourself on the front-end at a certain window width.

    And while padding-top : 56vw; shows those limitations padding-top : 56% works perfectly in my tests within the gridder, always keeps the same proportions in front and back-end and no matter how you size your gridder in the page.

    This is to me the way to go for layGridder because it needs to integrate into other peoples code as a plugin while layTheme can easely use vw because the whole sctructure evolves around the same system.

    But Pierre, you could easely calculate how many vw is your padding-top: 56% :
    My gridder is 70% of page width so : 70*0,56 = 39.2vw
    So here we are : I just put space-above 39.2 and problem solved !

    That's only assuming my gridder has a width based on "%", not px AND that that % is consistent. It us actually my case but some other layGridder users could alternate between 50, 60, 70, 80% depending on viewport size or even on user action.

    But even for me, because of that W3C spec issues about how vw is calculated :

    • if there is a scrollbar, padding-top:56% will actually be 38vw.
    • If there is no scrollbar : padding-top:56% will be 39,2vw.
      And that difference is specific to my screen resolution and would be again different for someone else.

    So if there is no conflicts in the code, I don't see why we shouldn't use "%" instead of "vw" right away for element space-above, space-below ? And maybe a few other inputs could benefit from this also

    If there is technical conflicts and it's not a 10 seconds fix as I thought :

    I think it would be a very interesting addition to the lay family to offer more control around vertical space.
    Just as we can "use browser height for row height". Maybe we could see a "set row height" option, with the ability to set a row height in "%" of the width (to have a fixed width/height row ratio) or set a custom "vh" height to have more control over how much we see at the same time.
    Maybe could even have the option then to have "sub-rows" instead of "columns" (horizontal grid instead of vertical).

    Testings (here, i'm forcing row height via custom css just to test out. The "green" element is my stack with padding-top: 56vw // 56%) :
    vw :

    % :

    If someone wonders why I want a 56% padding-top on a empty stack element : it's because it results in a 16/9 aspect ratio to show to have every row the same size = the best size for video backgrounds.

    posted in Bug Reports read more
  • R


    Be able to include/exclude specific rows from a post's grid call.

    Exemple as the main display function parameter :

    get_laygrid($id, $type,$rows);

    My usecase

    I am using layGridder for my posts inner content.

    On my "archive/home" page, I would like to fetch the first rows of every post listed to be able to have a "rich thumbnail" that use what we love about LayGridder :
    easely configurable background color, image, video + foreground image, video, html, text.

    To do so I could use something like this :

    $rows = array(
        "fetch_type"  => "include",
        "numbers" => array(1)

    This would only fetch the first layGridder row of my posts.
    I could even lazyload the content of my post later afterwards, on user action for exemple with ajax and something like
    "fetch_type" => "exclude", "numbers" => array(1)"

    We could also manually loop through every row to do all sorts of things if we can get the total number of rows from a post :

    while( $i < $numberofrows ) {
        $rows = array(
            "fetch_type"  => "include",
            "numbers" => array($i)

    Also maybe there is already a way to do any of this. Even less straightforward I would be interested to know about it.

    posted in Feature Requests read more