• R
    rsepierre

    @rsepierre
    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
    rsepierre

    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"
    					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 );
    
    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
    rsepierre

    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.

    SRCSET Sizes=AUTO
    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.
    http://laygridderforum.com:4567/topic/68/duplicate-id-invalid-html-because-of-multiple-devices-layouts-in-dom

    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).
    http://laygridderforum.com:4567/topic/57/the-use-of-vw-intsead-of

    posted in Feature Requests read more
  • R
    rsepierre

    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 :
    0_1549543832732_f56e2d83-5ee0-4ee2-9309-ae2b265cbd8d-image.png

    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) :
    0_1549543918780_86f44292-cdc2-4dcb-895a-5421e05593f6-image.png

    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

    @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
    rsepierre

    Hi,

    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
    rsepierre

    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"> 
    </video>
    

    posted in Feature Requests read more
  • R
    rsepierre

    Hi,

    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 :
    (http://laygridderforum.com:4567/topic/56/fetch-custom-loop-for-post-gridder-rows)

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

    http://laygridderforum.com:4567/topic/30/acf-integration
    (ability to add multiple gridder as "fields" and add conditions)

    http://laygridderforum.com:4567/topic/42/add-link-to-gridder-row
    (separate gridder thus enabling to set "id" to each one and scrolling to them)

    http://laygridderforum.com:4567/topic/9/different-images-per-language
    (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
    rsepierre

    Hi,
    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.

    0_1541491885519_9e945cc5-fc6b-4fe9-b72e-6a98a3c6630c-image.png

    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 :
    0_1541497232199_30d750d8-4736-430b-8c99-0c6643ebf267-image.png

    % :
    0_1541497295023_e900e1b1-9b42-4946-ae80-53b4b0ece2d8-image.png

    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

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