Skip to content

wip: feat(Tiered List): add media (images/videos) to the Tiered List pattern #5503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
muhammad-ali-pk wants to merge 9 commits into
base: main
Choose a base branch
from
Open

wip: feat(Tiered List): add media (images/videos) to the Tiered List pattern #5503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7eb67de
feat: add image to tiered list (full width or default)
muhammad-ali-pk Apr 21, 2025
23bebb0
Addressed review comments
muhammad-ali-pk Apr 22, 2025
0722717
All images within tiered lists to have p-image-container--cinematic a…
muhammad-ali-pk Apr 23, 2025
5d37f7b
resolve rebases
jmuzina Jun 9, 2025
938d051
Add default/full-width/video use case, many examples for test coverag…
jmuzina Jun 9, 2025
1aca751
tweak docs
jmuzina Jun 9, 2025
2696872
Tweak tiered list example titles
jmuzina Jun 9, 2025
f428294
wip
jmuzina Jun 26, 2025
2f32fec
initial update to test that the _attrs update is working
jmuzina Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions releases.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
- version: 4.25.0
features:
- component: Tiered list
url: /docs/patterns/tiered-list
status: Updated
notes: We've added support for <a href="/docs/patterns/tiered-list#with-media-new">embedding images or videos</a> to the tiered list pattern.
- component: CTA Block
url: /docs/patterns/cta-block
status: Updated
Expand Down
2 changes: 1 addition & 1 deletion requirements.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
canonicalwebteam.flask-base==2.5.0
canonicalwebteam.templatefinder==1.0.0
canonicalwebteam.search==2.1.1
canonicalwebteam.image-template==1.5.0
canonicalwebteam.image-template==1.6.0
mistune==0.8.4
pyyaml==6.0.2
121 changes: 113 additions & 8 deletions templates/_macros/vf_tiered-list.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
# desktop vs. 50/50 split between title/description
# is_list_full_width_on_tablet: whether list title/description each have their
# own row on tablet vs. 50/50 split between title/description
# is_media_full_width: whether the media is full width
# media_placement: where the image is placed relative to the description. Options are "after_description" or "before_description".
# img_attrs: attributes for the image element, e.g. src, alt, class
# video_attrs: attributes for the video element, e.g. src, class
# Slots
# title: top-level title element
# description: top-level description element
Expand All @@ -11,18 +15,90 @@
# cta: CTA block element
{% macro vf_tiered_list(
is_description_full_width_on_desktop=true,
is_list_full_width_on_tablet=true) -%}
is_list_full_width_on_tablet=true,
is_media_full_width=false,
media_placement="after_description",
img_attrs={},
video_attrs={}
) -%}
{%- set title_content = caller('title') -%}
{%- set description_content = caller('description') -%}
{%- set has_description = description_content|trim|length > 0 -%}
{%- set cta_content = caller('cta') -%}
{%- set has_cta = cta_content|trim|length > 0 -%}
{%- set has_image = img_attrs['src']|trim|length > 0 -%}
{%- set has_video = video_attrs['src']|trim|length > 0 -%}
{%- set has_media = has_image or has_video -%}

{% if media_placement not in ["before_description", "after_description"] %}
{% set media_placement = "after_description" %}
{% endif %}

{% set image_aspect_ratio = "16-9" %}
{% if is_media_full_width and not is_video %}
{% set image_aspect_ratio = "cinematic" %}
{% endif %}

{% macro _wrapped_media() %}
{%- if has_media -%}
{%- if has_video -%}
<div class="p-section--shallow">
{#- u-embedded-media applies 16:9 aspect ratio via padding. -#}
<div class="u-embedded-media">
<iframe class="u-embedded-media__element {{ video_attrs['class'] }}"
{% for attr, value in video_attrs.items() %}
{% if attr != "class" %}
{{- attr }}="{{ value }}"
{% endif %}
{% endfor %}
></iframe>
</div>
</div>
{%- elif has_image -%}
<div class="p-section--shallow">
<div class="p-image-container--{{ image_aspect_ratio }} is-cover">
<img
{#- Forward classes from the img_attrs. This is optional, on a per-pattern basis. #}
class="p-image-container__image {{ img_attrs['class'] }}"
{% for attr, value in img_attrs.items() %}
{% if attr != "class" %}
{{- attr }}="{{ value }}"
{% endif %}
{% endfor %}
>
</div>
</div>
{%- endif -%}
{%- endif -%}
{% endmacro %}

{% macro _full_width_media_row() %}
{%- if has_media and is_media_full_width -%}
<div class="row">
<div class="col">
{{- _wrapped_media() -}}
</div>
</div>
{%- endif -%}
{% endmacro %}

{%- if title_content|trim|length == 0 -%}
{%- set title_content = "<h2>Tiered List</h2>" -%}
{%- endif -%}

{%- if description_content|trim|length == 0 -%}
{%- set description_content = "<p>This is a tiered list.</p>" -%}
{%- endif -%}

{%- if cta_content|trim|length == 0 -%}
{%- set cta_content = "<p>No CTA provided.</p>" -%}
{%- endif -%}

<div class="p-section u-fixed-width">
<hr class="p-rule">

{% if has_description == true -%}
{%- if is_description_full_width_on_desktop == true -%}
{% if has_description -%}
{%- if is_description_full_width_on_desktop -%}
<div class="u-fixed-width">
<div class="p-section--shallow">
{{ title_content }}
Expand All @@ -31,10 +107,18 @@

<div class="row">
<div class="col-6 col-start-large-7">
{#- Non-full-width media before description -#}
{% if has_media and media_placement == "before_description" and not is_media_full_width %}
{{- _wrapped_media() -}}
{% endif %}
{{ description_content }}
{#- Non-full-width media after description -#}
{% if has_media and media_placement == "after_description" and not is_media_full_width %}
{{- _wrapped_media() -}}
{% endif %}
</div>
</div>
{%- else -%}
{%- else -%} {#- (50/50 desktop layout) -#}
<div class="row">
<div class="col-6">
<div class="p-section--shallow">
Expand All @@ -43,18 +127,39 @@
</div>

<div class="col-6">
{#- Non-full-width media before description -#}
{%- if has_media and media_placement == "before_description" and not is_media_full_width -%}
{{- _wrapped_media() -}}
{%- endif -%}
{{ description_content }}
{#- Non-full-width media after description -#}
{%- if has_media and media_placement == "after_description" and not is_media_full_width -%}
{{- _wrapped_media() -}}
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- else -%}
<div class="u-fixed-width">
<div class="p-section--shallow">
{{ title_content }}
{%- else -%} {#- No description (has_description is false) -#}
<div class="row">
{#- No description; the non-full-width media goes directly adjacent to the title -#}
<div class="{% if not has_media or is_media_full_width %}col{% else %}col-6{% endif %}">
<div class="p-section--shallow">
{{ title_content }}
</div>
</div>
{% if has_media and not is_media_full_width %}
<div class="col-6 col-start-large-7">
{{- _wrapped_media() -}}
</div>
{% endif %}
</div>
{%- endif %}

{#- Always render full-width media in its own row, after the main title/description/no-description blocks -#}
{% if has_media and is_media_full_width %}
{{- _full_width_media_row() -}}
{% endif %}

{#-
When there is a CTA, we use shallow spacing to space the list away from the CTA.
When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space.
Expand Down
93 changes: 93 additions & 0 deletions ...-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
{% extends "_layouts/examples.html" %}
{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}

{% block title %}Tiered list / 50/50 on desktop with description CTA / With default width image before description{% endblock %}

{% block standalone_css %}patterns_all{% endblock %}

{% block content %}
{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, media_placement="before_description") -%}
{%- if slot == 'title' -%}
<h2>H2 - up to two lines; ideally one.</h2>
{%- endif -%}

{%- if slot == "image" -%}
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
{%- endif -%}

{%- if slot == 'description' -%}
<p>A <a href="#">private cloud</a> provides organisations with on-demand
compute, storage and other resources that can be accessed over the network
and that are reserved exclusively for them - either in their own data centre
or via a 3rd party.</p>

<!-- Optional CTA block -->
<div class="p-cta-block">
<a href="#">Link to blog post &rsaquo;</a>
</div>
{%- endif -%}

{%- if slot == 'list_item_title_1' -%}
<h3 class="p-heading--5">Rich portfolio of products</h3>
{%- endif -%}

{%- if slot == 'list_item_description_1' -%}
<p>Resell the full range of Canonical’s portfolio of private and public
cloud products: OpenStack, Kubernetes, IoT, support, security and
compliance for Ubuntu.</p>
{%- endif -%}

{%- if slot == 'list_item_title_2' -%}
<h3 class="p-heading--5">Sales enablement</h3>
{%- endif -%}

{%- if slot == 'list_item_description_2' -%}
<p>Canonical can help train your field sales and presales teams and
provide you with sales collateral and permission to use the Canonical
and Ubuntu trademarks in your own materials.</p>
{%- endif -%}

{%- if slot == 'list_item_title_3' -%}
<h3 class="p-heading--5">Access to Canonical partner portal</h3>
{%- endif -%}

{%- if slot == 'list_item_description_3' -%}
<p>We host a partner portal with product and solutions collaterals, agreed
pricing, incentives and a deal registration system.</p>
{%- endif -%}

{%- if slot == 'list_item_title_4' -%}
<h3 class="p-heading--5">Training and certification</h3>
{%- endif -%}

{%- if slot == 'list_item_description_4' -%}
<p>Gain access to technology that is the foundation for digital
transformation and expand your business through marketing support and
alignment with a trusted brand</p>
{%- endif -%}

{%- if slot == 'list_item_title_5' -%}
<h3 class="p-heading--5">Technical enablement</h3>
{%- endif -%}

{%- if slot == 'list_item_description_5' -%}
<p>We provide in-depth technical training for your customer engineering
teams with access to technical resources for your labs and customer
engagements.</p>
{%- endif -%}

{%- if slot == 'list_item_title_6' -%}
<h3 class="p-heading--5">Go to market with Canonical</h3>
{%- endif -%}

{%- if slot == 'list_item_description_6' -%}
<p>Working with our dedicated partner team, get new joint marketing
opportunities and lead generation.</p>
{%- endif -%}

{%- if slot == 'cta' -%}
<a href="#" class="p-button">Learn more</a>
<a href="#">Contact us &rsaquo;</a>
{%- endif -%}
{%- endcall -%}
{% endblock %}
93 changes: 93 additions & 0 deletions ...les/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
{% extends "_layouts/examples.html" %}
{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}

{% block title %}Tiered list / 50/50 on desktop with description CTA / With default width image{% endblock %}

{% block standalone_css %}patterns_all{% endblock %}

{% block content %}
{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true) -%}
{%- if slot == 'title' -%}
<h2>H2 - up to two lines; ideally one.</h2>
{%- endif -%}

{%- if slot == "image" -%}
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
{%- endif -%}

{%- if slot == 'description' -%}
<p>A <a href="#">private cloud</a> provides organisations with on-demand
compute, storage and other resources that can be accessed over the network
and that are reserved exclusively for them - either in their own data centre
or via a 3rd party.</p>

<!-- Optional CTA block -->
<div class="p-cta-block">
<a href="#">Link to blog post &rsaquo;</a>
</div>
{%- endif -%}

{%- if slot == 'list_item_title_1' -%}
<h3 class="p-heading--5">Rich portfolio of products</h3>
{%- endif -%}

{%- if slot == 'list_item_description_1' -%}
<p>Resell the full range of Canonical’s portfolio of private and public
cloud products: OpenStack, Kubernetes, IoT, support, security and
compliance for Ubuntu.</p>
{%- endif -%}

{%- if slot == 'list_item_title_2' -%}
<h3 class="p-heading--5">Sales enablement</h3>
{%- endif -%}

{%- if slot == 'list_item_description_2' -%}
<p>Canonical can help train your field sales and presales teams and
provide you with sales collateral and permission to use the Canonical
and Ubuntu trademarks in your own materials.</p>
{%- endif -%}

{%- if slot == 'list_item_title_3' -%}
<h3 class="p-heading--5">Access to Canonical partner portal</h3>
{%- endif -%}

{%- if slot == 'list_item_description_3' -%}
<p>We host a partner portal with product and solutions collaterals, agreed
pricing, incentives and a deal registration system.</p>
{%- endif -%}

{%- if slot == 'list_item_title_4' -%}
<h3 class="p-heading--5">Training and certification</h3>
{%- endif -%}

{%- if slot == 'list_item_description_4' -%}
<p>Gain access to technology that is the foundation for digital
transformation and expand your business through marketing support and
alignment with a trusted brand</p>
{%- endif -%}

{%- if slot == 'list_item_title_5' -%}
<h3 class="p-heading--5">Technical enablement</h3>
{%- endif -%}

{%- if slot == 'list_item_description_5' -%}
<p>We provide in-depth technical training for your customer engineering
teams with access to technical resources for your labs and customer
engagements.</p>
{%- endif -%}

{%- if slot == 'list_item_title_6' -%}
<h3 class="p-heading--5">Go to market with Canonical</h3>
{%- endif -%}

{%- if slot == 'list_item_description_6' -%}
<p>Working with our dedicated partner team, get new joint marketing
opportunities and lead generation.</p>
{%- endif -%}

{%- if slot == 'cta' -%}
<a href="#" class="p-button">Learn more</a>
<a href="#">Contact us &rsaquo;</a>
{%- endif -%}
{%- endcall -%}
{% endblock %}
Loading