larva objects: o-figure

Available Variants

prototype
Lazy loaded image
Protest art hangs at Hong Kong International Airport. Courtesty Wong Ka Ying
o-figure README

o-figure is designed to support images with a caption and a credit, primarily used within editorial content in the_content in WordPress. pmc-core-v2 contains a filter on the caption shortcode that applies this pattern. Is it also used in for featured images that include credits and captions.

It consists of a figure element around a c-lazy-image and c-figcaption, with an optional link wrapper to make the entire block clickable.

There is an option for adding an inline style for the width on the figure to provide a smooth paint in post content.

The pattern supports Lazy Loading with c-lazy-image.

When to use:

When not to use:

  • For images that cannot stand on their own as content, e.g. a featured image for a post that requires additional post content to be understood.
  • Logo or icons

Future:

Could support non-image figures such as charts, embeds, or quotes.

o-figure Twig The markup file. 
{% if o_figure_link_url %}
	<a href="{{ o_figure_link_url }}" class="o-figure__link {{ o_figure_link_classes }}"
		{% if o_figure_link_target_attr %}
			target="{{ o_figure_link_target_attr }}"
		{% endif %}
		{% if o_figure_link_tabindex_attr %}
			tabindex="{{ o_figure_link_tabindex_attr }}"
		{% endif %}
	>
{% endif %}

<figure class="o-figure {{ modifier_class }} {{ o_figure_classes }} lrv-u-max-width-100p" style="{{ o_figure_width_attr }}">

	{% if c_lazy_image %}
		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
	{% endif %}

	{% if c_figcaption %}
		{% if o_figure_figcaption_outer %}
			<div class="o-figure__figcaption-outer {{ o_figure_figcaption_outer_classes }}">
		{% endif %}

			{% include "@larva/components/c-figcaption/c-figcaption.twig" with c_figcaption %}

		{% if o_figure_figcaption_outer %}
			</div>
		{% endif %}
	{% endif %}

</figure>

{% if o_figure_link_url %}
	</a>
{% endif %}
o-figure JSON The data object for this pattern. 
{
	"c_figcaption": {
		"c_figcaption_classes": "",
		"c_figcaption_caption_markup": "Protest art hangs at Hong Kong International Airport.",
		"c_figcaption_caption_classes": "",
		"c_figcaption_credit_text": "Courtesty Wong Ka Ying",
		"c_figcaption_credit_text_markup": "",
		"c_figcaption_credit_classes": "",
		"c_figcaption_inner": false,
		"c_figcaption_inner_classes": ""
	},
	"c_lazy_image": {
		"c_lazy_image_classes": "",
		"c_lazy_image_link_url": false,
		"c_lazy_image_link_classes": "lrv-a-unstyle-link",
		"c_lazy_image_crop_class": "lrv-a-crop-16x9",
		"c_lazy_image_crop_style_attr": false,
		"c_lazy_image_link_tab_index_attr": false,
		"c_lazy_image_alt_attr": "Lazy loaded image",
		"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
		"c_lazy_image_placeholder_url": "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
		"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
		"c_lazy_image_sizes_attr": "auto",
		"c_lazy_image_img_classes": "lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto",
		"c_lazy_image_height_attr": "",
		"c_lazy_image_width_attr": "",
		"c_lazy_image_in_initial_viewport": false,
		"c_lazy_image_decoding_attr": "async"
	},
	"o_figure_link_tabindex_attr": "",
	"o_figure_link_target_attr": "_self",
	"o_figure_link_url": false,
	"o_figure_classes": "",
	"o_figure_link_classes": "lrv-a-unstyle-link ",
	"o_figure_figcaption_outer": false,
	"o_figure_figcaption_outer_classes": ""
}