tr_get_media

tr_get_media is a helper function that makes it easier to render images and SVGs synchronously or asynchronously.

It accepts two arguments:

tr_get_media($media, $async)

• $media can be either a path string to the image/SVG or an associative array containing “src” and “alt” (alt is optional) properties.
• $async – Boolean. Default is false and when omitted renders the image synchronously. When set to true, it renders it asynchronously.

Passing a string as the first argument

{tr_get_media('source.unsplash.com/500x500')}
{* Will render an image from a third-party website. *}

{tr_get_media('image1.png')} 
{* Will render [theme-root]/assets/img/image1.png located in theme assets. *}

{tr_get_media('people/image1.jpg')}
{* Will render [theme-root]/assets/img/people/image1.png located in theme assets.*} 

{tr_get_media('http://localhost/theme_redone/wp-content/uploads/2022/05/African-savanna-elephant.jpg')}
{* Will render the image from the media uploads directory. *}

Passing an associative array as the first argument

{tr_get_media([
  'src' => 'source.unsplash.com/500x500',
  'alt' => 'This is alt text'
])}
{* Will render an image from a third-party website with the alt attribute. *}

The associative array format would work for all the examples above (SVGs, obviously, would not have an alt attribute).

<div 
  class="tr-img-wrap-outer" 
  style="--size-w-original:500;--size-h-original: 333;"
>
  <div class="tr-img-wrap">
    <img 
      class="js-img-lazy" 
      src="" 
      data-img-src="[path-to-the-image.format]" 
      alt="[alt text if provided]"
    />
  </div>
</div>