Updates render hook, partials, and shortcodes

[h-enk]

Summary

Brief explanation of the proposed changes.

• Simplifies setup, making it way more robust
• Drops aFarkas/lazysizes support — no longer really that relevant
• Drops Image Overlay — simplifies code significantly (adding a watermark can be achieved easier in another way)
• Adds global defaults (see first example below)
• Adds partial options + shortcode options (see second example below)
• Adds .gif support to render hook

Basic example

Include a basic example, screenshots, or links.

# Images (@hyas/images)
[hyas_images]
  [hyas_images.defaults]
    decoding = "async" # sync, async, or auto (default)
    fetchpriority = "auto" # high, low, or auto (default) 
    loading = "lazy" # eager or lazy (default)
    widths = [480, 576, 768, 1025, 1200, 1440] # [640, 768, 1024, 1366, 1600, 1920] for example
    sizes = "75vw" # 100vw (default), 75vw, or auto for example
    process = "" # "fill 1680x720" for example

{{- /*
Renders an HTML picture element, in multiple formats and sizes.

@param {string} [src] The path to the image: a page resource, a global resource, or a remote resource.
@param {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
@param {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
@param {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
@param {string} [process] = "" # "fill 1680x720" for example
@param {string} [decoding] The img element's decoding attribute.
@param {string} [fetchpriority] The img element's fetchpriority attribute.
@param {string} [loading] The img element's loading attribute.
@param {string} [alt] The img element's alt attribute.
@param {string} [title] The img element's title attribute.
@param {string} [class] The img element's class attribute.

@returns {template.HTML}

@example (required args only)

  {{< picture src="images/zion-national-park.jpg" >}}

@example (all args)

  {{< picture
    src="images/bryce-canyon-national-park.jpg"
    width=768
    sizes="75w"
    formats="webp, jpeg"
    process="fill 1680x720"
    decoding="async"
    fetchpriority="auto"
    loading="eager"
    alt="Bryce Canyon National Park"
    title="A beautiful day in Bryce Canyon National Park"
    class="foo"
  >}}

*/}}

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

• Issues

Checks

• Read Create a Pull Request
• Supports all screen sizes (if relevant)
• Supports both light and dark mode (if relevant)
• Passes npm run test