Lazy load, placeholders, ToC and Gutenberg problem

  • Resolved mati08

    (@mati08)


    4 years, 10 months ago

    I have a problem with lazy load, image placeholders, Gutenberg WP Editor, and anchors to the post sections (Table of Content).

    In all posts, I have a Table of Content that links to the headers and sections of my post (h1, h2). But if I turn on lazy load, the links not working correctly and they scrolled to the random position of my post. Smooth scroll in CSS doesn’t help. All because of the images that have not yet been loaded.

    The solution to the problem should be image placeholders that have height just like images in my posts, but Gutenberg in Image block doesn’t add width and height parameter to img. Even if I choose image dimensions in WordPress editor, the image is responsive (have scrset). That’s OK, but I think because of that, the lazy load can’t generate a placeholder. So, links in my ToC linked to a random place of my post.

    How to solve this problem?
    Force Gutenberg somehow to auto add width/height to all images code? Or do something in lazy load code?

    I hope for your help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    Hello there @mati08

    That’s an interesting question, I’m pinging Smush lead developer on this and we’ll get back to you as soon as possible. ??

    Warm regards,
    Dimitris

    Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    Hey there @mati08

    Some possible workarounds could be:
    1. Use some custom CSS to force some width/height on images.
    2. Exclude the first image from lazy loading. If there’s no distinctive class for the first image, you can target it by it’s URL through a PHP snippet in functions.php of your child-theme:

    add_filter( 'smush_skip_image_from_lazy_load', function( $status, $src, $image ) {
	if ( 'https://example.com/wp-content/uploads/2020/05/test.jpg' === $src ) {
		$status = true;
	}
	return $status;
}, 10, 3 );

    Warm regards,
    Dimitris

    Thread Starter mati08

    (@mati08)

    @wpmudev-support6 thank you but this is unfortunately doesn’t resolve my problem ??

    I have many posts, and many images and photos (added by Gutenberg) in every post in my WP. And I have redactors who added new content (with images) from Gutenberg.

    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    Hello @mati08

    I trust you’re doing well!

    I apologize for the delay in this thread. Please try the following, assign a unique CSS class to the image’s block in Gutenberg and set width and height with CSS code, for example:

    .image {
width:300px;
height:180px;
}

    If this will work, please consider adding the same CSS class to images on posts.

    I hope this helps!

    Cheers,
    Nastia

    Thread Starter mati08

    (@mati08)

    Thanks, but it’s not solved my problem unfortunately. I have hundreds of posts in my WordPress and many images on every of them. And every image has different size ??

    Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    Is there a URL that you could share with us, so we can better check these images/galleries?
    Please advise!

    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    Hello @mati08

    I hope you are doing well!

    We haven’t heard back from you for a while now so we’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

    Kind regards,
    Nastia

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Lazy load, placeholders, ToC and Gutenberg problem’ is closed to new replies.