def picture()

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)