Petroff Center Blog
Check out our latest posts discussing topics around the industry.
{%- comment -%}
This component can generate an `img` tag or a `div style="background-..."`.
{%- endcomment -%}
{%- assign is_global_asset = is_global_asset | default: false -%}
{%- if bg -%}
{%- comment -%} Background image {%- endcomment -%}
{%- assign tag_name = tag_name | default: 'div' -%}
{%- assign self_closing = self_closing | default: false -%}
{%- comment -%} We render attrs ourselves and filter out `style`. {%- endcomment -%}
{%- assign attr_list = attrs | to_attrs: list: true -%}
{%- capture additional_attrs -%}
{%- comment -%} Include attributes from context. {%- endcomment -%}
{%- for attr in attr_list -%}
{%- unless attr[0] == 'style' -%}
{{- ' ' -}}
{{- attr[0] -}}
{%- if attr[1].size > 0 -%}
="{{- attr[1] -}}"
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{{- ' ' -}}
style="
{%- comment -%} Render bg styles. Use src if we didn't get an image. {%- endcomment -%}
{%- assign has_bg_image = false -%}
{%- assign has_bg_size = false -%}
{%- assign has_bg_position_x = false -%}
{%- assign has_bg_position_y = false -%}
{%- assign has_bg_repeat = false -%}
{%- for prop in bg -%}
{%- case prop[0] -%}
{%- when 'image' -%}
{%- assign has_bg_image = true -%}
{%- when 'size' -%}
{%- assign has_bg_size = true -%}
{%- when 'position' -%}
{%- assign has_bg_position_x = true -%}
{%- assign has_bg_position_y = true -%}
{%- when 'position-x' -%}
{%- assign has_bg_position_x = true -%}
{%- when 'position-y' -%}
{%- assign has_bg_position_y = true -%}
{%- when 'repeat' -%}
{%- assign has_bg_repeat = true -%}
{%- endcase -%}
background-{{- prop[0] -}}: {{- prop[1] -}};
{%- endfor -%}
{%- unless has_bg_image -%}
background-image: url('{{- src | asset_url: global: is_global_asset -}}');
{%- endunless -%}
{%- unless has_bg_size -%}
background-size: cover;
{%- endunless -%}
{%- unless has_bg_position_x -%}
background-position-x: center;
{%- endunless -%}
{%- unless has_bg_position_y -%}
background-position-y: center;
{%- endunless -%}
{%- unless has_bg_repeat -%}
background-repeat: no-repeat;
{%- endunless -%}
{%- comment -%} Add any styles from the style attribute. {%- endcomment -%}
{{- attrs.style -}}
"
{%- endcapture -%}
{%- comment -%} Remove attrs so we don't render them twice. {%- endcomment -%}
{%- assign attrs = nil -%}
{%- else -%}
{%- comment -%} Normal img tag {%- endcomment -%}
{%- assign tag_name = 'img' -%}
{%- assign self_closing = true -%}
{%- capture additional_attrs -%}
{%- if srcset.size > 0 -%}
{{- ' ' -}}
srcset="{{ srcset }}"
{%- endif -%}
{%- if sizes.size > 0 -%}
{{- ' ' -}}
sizes="{{ sizes }}"
{%- endif -%}
{{- ' ' -}}
alt="{{ alt }}"
{{- ' ' -}}
src="{{ src | asset_url: global: is_global_asset }}"
{%- endcapture -%}
{%- endif -%}
{%- include 'atom/element', tag_name: tag_name, self_closing: self_closing, additional_attrs: additional_attrs -%}{%- comment -%} Remove leading and trailing whitespace from `tag_name`. {%- endcomment -%}
{%- assign tag_name = tag_name | strip -%}
{%- comment -%} Handle the `tag_name: ''` case. {%- endcomment -%}
{%- if tag_name and tag_name.size < 1 -%}
{%- assign tag_name = false -%}
{%- endif -%}
{%- if tag_name -%}
<{{ tag_name }}
{{- attrs | to_attrs -}}
{{- additional_attrs -}}
{%- if self_closing == true -%}
{{- ' /' -}}
{%- endif -%}
>
{%- endif -%}
{%- unless self_closing == true -%}
{%- ifslot -%}
{%- slot -%}
{%- else -%}
{{- inner_html -}}
{%- endifslot -%}
{%- if tag_name -%}
</
{{- tag_name -}}
>
{%- endif -%}
{%- endunless -%}
{%- capture id_attr -%}
{{- item.id -}}
{%- endcapture -%}
{%- if id_attr.size > 0 -%}
{%- capture id_attr -%}
id="{{ item.id }}"
{%- endcapture -%}
{%- endif -%}
{%- assign attrs = item.attrs | merge_props: class: 'card card--post' -%}
{%- if link == false or item.link == nil or item.link.size < 1 or item.link_text == nil or item.link_text.size < 1 -%}
<div {{ id_attr }} {{ attrs | to_attrs }}>
{% else %}
<a {{ id_attr }} {{ attrs | to_attrs }} href="{{ item.link }}">
{% endif %}
{%- unless img == false or item.img == nil -%}
{%- assign _img = item.img -%}
{%- assign img_attrs = _img.attrs | merge_props: class: 'card__image' -%}
{%- include 'atom/img',
alt: _img.alt,
src: _img.src,
srcset: _img.srcset,
sizes: _img.sizes,
attrs: img_attrs,
bg: _img.bg
-%}
{%- endunless -%}
<div class="card__text">
<h3 class="card__title">{{ item.title }}</h3>
<div class="card__details">
{%- unless author == false or item.author == nil or item.author.size < 1 -%}
<span class="card__author">{{ item.author }}</span>
{%- endunless -%}
{%- unless date == false or item.date == nil or item.date.size < 1 -%}
<span class="card__date">{{ item.date }}</span>
{%- endunless -%}
</div>
{%- unless summary == false or item.summary == nil or item.summary.size < 1 -%}
<p class="card__summary">{{ item.summary }}</p>
{%- endunless -%}
{%- unless link == false or item.link == nil or item.link.size < 1 or item.link_text == nil or item.link_text.size < 1 -%}
<div class="btn">{{ item.link_text }}</div>
{%- endunless -%}
</div>
{%- if link == false or item.link == nil or item.link.size < 1 or item.link_text == nil or item.link_text.size < 1 -%}</div>{% else %}</a>{% endif %}