zoralabPICTURE Technical Specification - ZORALab's Hestia

Main Purpose

This package's primary purpose is to provide user interface (UI) styling specifically for picture values. In web UI, it is shown as follows:

Compliant with hestiaMEDIA Data Structure

While this package offers picture UI styling, its data structure rendering (e.g. HTML) is compliant with hestiaMEDIA package where all 3 main media types: picture, video, and audio are actually sharing the same data structure as directed by W3C. When performing Web rendering, you are always encouraged to use hestiaMEDIA package instead.

Legacy Recording

This package was known as picture_hestiaUI before ZORALab's Hestia v1.2.0. The transformation was due to someone attempting to steal the copyrights and makes way for programming package's documentation restructuring.

Designers

This component was designed by the following creators:

Dependencies

This component has the following dependencies (arranged in the order from left-top to right-bottom):

HTML

For HTML, ZORALab's Hestia employs the W3C native syntax for simplicity and maximum compatibility sakes. ZORALab's Hestia recommends the following HTML code structure for this component.

Minimum HTML

The minimum required HTML codes (please use max-height to control auto layout responsiveness adjustment for maximum dimension) are shown below:

<picture style='max-height: 630px;'>
	<!-- modern format   -->
	<source srcset="/URL/to/image-1200x630.avif 1x,
			/URL/to/image-2400x1260.avif 2x,
			/URL/to/image-3600x1890.avif 3x"
		type="image/avif"
		width="1200" height="630"
		loading="lazy"
		media"(max-width: ...)">


	<!-- fallback format -->
	<source srcset="/URL/to/image-1200x630.webp 1x,
			/URL/to/image-2400x1260.webp 2x,
			/URL/to/image-3600x1890.webp 3x"
		type="image/webp"
		width="1200" height="630"
		loading="lazy"
		media"(max-width: ...)">

	...

	<!-- last resort     -->
	<source srcset="/URL/to/image-1200x630.jpg 1x,
			/URL/to/image-2400x1260.jpg 2x,
			/URL/to/image-3600x1890.jpg 3x"
		type="image/jpeg"
		width="1200" height="630"
		loading="lazy"
		media"all">
	<img alt="..." src="/URL/to/image-1200x630.jpg"
		width="1200" height="630"
		loading="lazy"/>
</picture>

CSS

ZORALab's Hestia heavily rely on CSS to style this component and offering its css variables for customizations. Below are the list of available CSS variables at your disposal.

Display

Affects the display mode of the rendered component.

VARIABLE     : --picture-display
CSS PROPERTY : display
DEFAULT      : block (>= v1.2.0)

Margin

Affects the margin of the rendered component.

VARIABLE     : --picture-margin
CSS PROPERTY : margin
DEFAULT      : 2rem auto (>= v1.2.0)

Padding

Affects the padding of the rendered component.

VARIABLE     : --picture-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Min-Width

Affects the minimum width of the rendered component.

VARIABLE     : --picture-min-width
CSS PROPERTY : min-width
DEFAULT      : initial (>= v1.2.0)

Width

Affects the width of the rendered component.

VARIABLE     : --picture-width
CSS PROPERTY : width
DEFAULT      : auto (>= v1.2.0)

Max-Width

Affects the maximum width of the rendered component.

VARIABLE     : --picture-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height

Affects the minimum height of the rendered component.

VARIABLE     : --picture-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Height

Affects the height of the rendered component.

VARIABLE     : --picture-height
CSS PROPERTY : height
DEFAULT      : auto (>= v1.2.0)

Max-Height

Affects the maximum height of the rendered component.

VARIABLE     : --picture-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

User Select Capability

Affects the selecting behavior of the rendered component.

VARIABLE     : --picture-user-select
CSS PROPERTY : user-select
DEFAULT      : none (>= v1.2.0)

User Drag Capability

Affects the dragging behavior of the rendered component.

VARIABLE     : --picture-user-drag
CSS PROPERTY : user-drag
DEFAULT      : none (>= v1.2.0)

JavaScript

Fortunately, this component does not use any JavaScript. Relax.

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

{{- $ret := partial "hestiaGUI/zoralabPICTURE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>