in bedrock/mozorg/templatetags/misc.py [0:0]
def picture(ctx={}, url=None, sources=[], optional_attributes=None):
alt = ""
attrs = ""
final_sources = []
l10n = False
loading = ""
if optional_attributes:
l10n = optional_attributes.pop("l10n", False)
alt = optional_attributes.pop("alt", "")
# Put `loading` before `src` to avoid a bug in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=1647077)
if "loading" in optional_attributes:
loading = f'loading="{optional_attributes.pop("loading", "")}" '
if optional_attributes:
attrs = " " + " ".join(f'{attr}="{val}"' for attr, val in optional_attributes.items())
# default src
if not url.startswith("https://"):
url = l10n_img(ctx, url) if l10n else static(url)
# sources
for source in sources:
final_srcset = ""
final_sizes = ""
source_media = source.pop("media", False)
source_srcset = source.pop("srcset", False)
source_type = source.pop("type", False)
source_sizes = source.pop("sizes", False)
source_width = source.pop("width", False)
source_height = source.pop("height", False)
# srcset
if source_srcset:
srcset_last_item = list(source_srcset)[-1]
for image, descriptor in source_srcset.items():
postfix = "" if image == srcset_last_item else ","
if not image.startswith("https://"):
image = l10n_img(ctx, image) if l10n else static(image)
if descriptor == "default":
final_srcset = final_srcset + image + postfix
else:
final_srcset = final_srcset + image + " " + descriptor + postfix
# sizes
if source_sizes:
sizes_last_item = list(source_sizes)[-1]
for window_size, img_width in source_sizes.items():
postfix = "" if window_size == sizes_last_item else ","
if window_size == "default":
final_sizes = final_sizes + img_width + postfix
else:
final_sizes = final_sizes + window_size + " " + img_width + postfix
media_markup = f' media="{source_media}"' if source_media else ""
type_markup = f' type="{source_type}"' if source_type else ""
srcset_markup = f' srcset="{final_srcset}"' if final_srcset != "" else ""
sizes_markup = f' sizes="{final_sizes}"' if final_sizes != "" else ""
width_markup = f' width="{source_width}"' if source_width else ""
height_markup = f' height="{source_height}"' if source_height else ""
source_markup = f"<source{media_markup}{type_markup}{srcset_markup}{sizes_markup}{width_markup}{height_markup}>"
final_sources.append(source_markup)
markup = f'<picture>{"".join(final_sources)}<img {loading}src="{url}" alt="{alt}"{attrs}></picture>'
return Markup(markup)