Media Component
What is a media component ?
A staple of almost any corporate website, the media component is a construct that uses an image and some text to get a point across. Or as Chris Coyier would say: "... image thingy on the left, heading and text on the right."
Read more about this in the CSS-Tricks article The Media Object, A Bunch of Ways
In this implementation the "image thingy" can be:
- an image
- a video
- an animated Lottie svg
- an icon
- an audio player
Media component with an icon
In this example the order of image and text have been reversed, instead of an image an icon is shown.
Icons are stored in svg code and injected into the Nunjucks templates via its name.
Media component with a video
This media component is located under the "fold" to test progressive image loading.
The site uses cloudinary.io to store all images. Cloudinary's on-the-fly image transformations allow for a very effective progressive image, with lazy load, implementation. A low resolution copy of the image is loaded first and when the image enters the viewport it is updated with an image that is properly sized for the available space.
Here is a very interesting talk by Jose Perez about Progressive Image Rendering.
Media component with an audio player
Here is an example of an audio player with a nice image background.
Here is an example of a Lottie animation
Animated svg in Lottie format. Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. The top 500 apps on the App store now use Lottie to engage users and enhance conversions.