Images inserted via Gutenberg don't have width & height attribute by default. I'd like to use those for lazy-loading purposes so image is positioned correctly.

Is there a hook or something to add width and height to output? Or should one extend the core block for this?

  • isn't there a lazyload JS plugin doens't need width or height attributes? or isn't this an option? – André Kelling Dec 12 '18 at 15:07
  • @AndréKelling not sure about the other plugins, I'm building my own solution. Also before Gutenberg editor width and height were present on every image by default – Runnick Dec 12 '18 at 15:39

If affordable i would rather switch to a lazyload technique without the need of width and height attributes on images over somehow hacking of the editors image output.

This saves you maintenance problems that may occur in the future with Gutenberg Editor.

i do made good experiences with this plugin https://appelsiini.net/projects/lazyload/


i'm wrong with my assumption. you would need to edit the image output for another plugin anyway. like for my suggested one with data-src to an image.

| improve this answer | |
  • Seems like lazyload plugin from your link also uses width & height: <img class="lazyload" data-src="img/example.jpg" width="765" height="574"> <img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574"> – Runnick Dec 13 '18 at 13:46
  • hmm.. but shouldn't be necessary and work without these attributes. But of course data-src is needed and also not part of your default gutenberg output... i'm wrong here. – André Kelling Dec 13 '18 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.