READYTHEME: Manual Image Load via Code

Do we really want to always load the entire image tag? Let's just load a readytheme image via code and then use the data we get. Probably faster than a readytheme page item anyway.

Quick update. Apparently there are page item "functions" to do this as well: https://docs.miva.com/developer/developer-training/working-with-theme-components/functions/

Load a ReadyTheme image via image code:

<mvt:do file="'/mm5/5.00/modules/component/readytheme.mvc'" name="l.ok" value="readytheme_image_load_code('sfnt-hero-mobile',l.settings:_image)" />

Image data structure:

l.all_settings:_image: 14 elements
:active = 1
:code = sfnt-hero-mobile
:css_class = img-fluid
:image = graphics/00000001/1/RRP-moving-mobile-2.jpg
:image_alt = Premium inkjet photo and art papers
:image_hght = 0
:image_size = 0
:image_wdth = 0
:link_targ = _self
:link_type = U
:name = Storefront Hero Mobile
:original_code = sfnt-hero-mobile

Nifty way to load desktop and mobile and display them properly:

<mvt:do file="'/mm5/5.00/modules/component/readytheme.mvc'" name="l.ok" value="readytheme_image_load_code( 'sfnt-hero', l.settings:hero )" />
<mvt:do file="'/mm5/5.00/modules/component/readytheme.mvc'" name="l.ok" value="readytheme_image_load_code( 'sfnt-hero-mobile', l.settings:hero_mobile )" />

<picture>
  <source media="(min-width: 768px)" srcset="&mvt:hero:image;">
  <img src="&mvt:hero_mobile:image;" 
	   class="&mvt:hero_mobile:css_class;" 
	   fetchpriority="high" 
	   alt="&mvt:hero_mobile:image_alt;">
</picture>