Custom Editor Image Block?

I am very happy with the editor, but want to customize my image block that is inserted by the editor.

For example:

  • a good practice on images is to include the image DIMENSIONS in either size or height/width tags. in jekyll i use a plugin, but the editor block doesn’t include that plugin!
  • another good practice is LAZY LOADING images. I follow css tricks suggestions, but its hard to do this with the netlify editor.

My image blocks look like:

<img
  data-src="{{post.thumbnail}}"
  src="/ajax-loader.gif"
  size="{% imagesize post.thumbnail:size %}"
  class="card-img lazy"
  alt="{{post.title}}"
/>

and i have a jeklly component which can be utilized like:

{% include lazyimg.html 
  src={{post.thumbnail}}
  class="card-img"
  alt={{post.title}} 
%}

How can I get the editor image widget to render something that is a little more customized?

My thought is to add another component with HIDDEN src and size attributes. but the regex is gnarly to get this to render back into the editor.

Another bonus would be a simpler playground for creating these widgets!!!

Hi @blairanderson, you could use a custom editor component:
https://www.netlifycms.org/docs/custom-widgets/#registereditorcomponent

and use the exiting image block as a reference: