Image preloading state

[piperhaywood]

eFlux has a neat loading pattern that @GemCopeland is interested in:

We discussed the approach used on e-flux, which loads a simple ASCII pattern first before loading the images. They have a separate source for this patterned background.

Medium as well. Medium loads a tiny thumbnail which they scale up and blur with CSS, replacing with the large image when it’s loaded.

We’ll probably go down the eFlux route due to #12.

Current possibilities include small tiled background images, CSS patterns, and gradient backgrounds. The last is probably the one we’re most excited about currently. Would probably use the two main site colours initially and as an enhancement, allow @GemCopeland to choose the colours on an image-by-image basis.

Any of this functionality would probably require a slightly modified Markdown parser since at minimum, we would need the output to be something like:

<img class="lazyload" alt="This is the alt" data-src="https://gemmacope.land/image.jpg" width="300" height="200">

Perhaps consider the way that Kirby handles images in Kirbytext (read more). The syntax for the above would be:

(image: https://gemmacope.land/image.jpg alt: This is the alt width: 300 height: 200 imgclass: lazyload)

Of course, Markdown does support HTML markup so perhaps it’s worth keeping that in mind for the initial version.

[GemCopeland]

Going to go with a purple gradient to begin with, potentially moving as it loads. Gemma to look at how this would animate.

Going to go with the Kirbytext approach to images.

[piperhaywood]

@GemCopeland Let’s review this together, want to be sure I understand what you’re going for from the designs!

[piperhaywood]

@GemCopeland to choose a bunch of unicode symbols for use in bg of loading images. Once chosen, pass issue back to @piperhaywood so that I can implement them in the global.json file

[piperhaywood]

Related to #15 and #17

[GemCopeland]

Selected symbols for preloader patterns:

♢ ⬡ ⬦ ✢ ✣ ✤ ✦ ✧ ✲ ✶ ✺ ✻ ✽ ✿ ❉ ❊ ⬡ ⬢ ⬔ ⬕ ⟁ ⧖