Text-on-image block srcset/admin refactor

[cjyabraham]

Get the text-on-image block to insert the image via srcset so that it performs better on mobile. Also, make the admin ui more user-friendly. Right now it's sometimes not obvious that you can enter text.

[rodmeurer]

Done @cjyabraham

Basically, it will be necessary to remove the old blocks and add them again, as the markup and also the way to save has been changed.

We did it at this event: https://pr-446-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

[cjyabraham]

Thanks. Admin looks good. Can you get it to work responsively like the current version. See how this one responds to narrow browser widths:

[rodmeurer]

@cjyabraham fixed.

[cjyabraham]

Can you make it so that it covers less of the photo? See above photo vs yours below:

We did this deliberately because often we put photos there that we don't want to cover up. If you could try and match the design of the existing version as much as possible it would be good.

[rodmeurer]

Fixed @cjyabraham, let us know if it's ok now. https://pr-446-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

[cjyabraham]

Looks good. Thanks.

[cjyabraham]

Reassigning to myself to deploy and migrate over existing blocks.

[cjyabraham]

@rodmeurer I've merged this but am now seeing that there's still a background-image being set on the container element even though you're dropping the image in with an <img> tag. This is now causing, in some cases, two sizes of the same image to download for the block, such as when you have a mobile-width viewport. Can you take a closer look at this please? You can see it live here. And here is what I'm seeing in dev tools when I have a mobile width:

[rodmeurer]

@cjyabraham we removed the background image that was causing this and now it loads only one image.

https://pr-464-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

[cjyabraham]

Thanks. Deployed.