tbrlpld
commented
1 year ago Quick search for the image template tag:
$ ag "{% image"
network-api/networkapi/wagtailpages/templates/sticky_dropdown.html
33: {% image toc_image fill-320x320 as thumbnail %}
network-api/networkapi/wagtailpages/templates/fragments/chapter_table_of_contents.html
24: {% image toc_image fill-256x256 as thumbnail %}
network-api/networkapi/wagtailpages/templates/fragments/child_table_of_contents.html
29: {% image toc_image fill-256x256 as thumbnail %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_feature_block.html
13: {% image value.image fill-928x400 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/current_events_slider_block.html
19: {% image current_event.value.image fill-445x185 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/group_listing_block.html
14: {% image card.image fill-690x388 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/card_grid_block.html
8: {% image card.image fill-350x197 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text.html
10: {% image value.image fill-100x100-c100 format-jpeg as img %}
23: {% image value.image fill-760x760-c100 format-jpeg as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/figure_block.html
8: {% image value.image fill-890x890-c100 format-jpeg class="tw-w-full" alt=value.alt %}
10: {% image value.image format-jpeg class="tw-w-full" alt=value.alt %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_block.html
5:{% image value.image original as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/session_slider_block.html
20: {% image item.value.image fill-250x140 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/spaces_block.html
18: {% image card.value.image fill-158x158 as img_desktop %}
19: {% image card.value.image fill-290x125 as img_mobile %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/dear_internet_letter_block.html
13: {% image value.image original alt="" loading="lazy" class="mb-4 d-block mx-auto" %}
27: {% image value.author_photo fill-90x90 alt="" loading="lazy" width="45" height="45" class="author-photo mr-3" %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text_mini.html
7: {% image value.image fill-100x100-c100 format-jpeg as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html
20:{% image value.image original as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_image_block.html
17: {% image self.image width-1840 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/youtube_regret_block.html
5: {% image value.image original class="mb-4" alt=value.imageAltText %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_teaser_block.html
17: {% image card.image fill-540x305-c100 format-jpeg as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_block_rounded.html
11: {% image card.image fill-140x140 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/foundation_slider_block.html
19: {% image slide.value.image fill-429x241 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/listing_block.html
8: {% image card.image fill-350x197 as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_teaser_block.html
25: <img src="{% image_url author.author.image "fill-100x100" %}" alt="{{ author.author.name }}" title="{{ author.author.name }}" />
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_double_image_block.html
9: {% image self.image_1 fill-445x324 as img1 %}
22: {% image self.image_2 fill-445x324 as img2 %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/looping_video_block.html
3:{% image page.hero_image original as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/research_landing_page.html
7: {% image page.banner_image original as hero_img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_authors_intros.html
11: <img src="{% image_url author.image "fill-100x100" %}" alt="{{ author.name }}" title="{{ author.name }}" />
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_index_feature.html
42: {% image blog_page.localized.specific.get_meta_image fill-1200x628 class='tw-h-full tw-w-full tw-object-contain tw-object-top' %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/publication_hero.html
7: {% image page.hero_image fill-1400x675 as bg_img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/spotlight_posts.html
9: <div class="spotlight-banner d-flex align-items-end full-bleed-xs p-3 p-md-4" style="background-image: linear-gradient(180deg, rgba(238,238,238,0) 14%, #000000 100%), url({% image_url page.spotlight_image "width-540" %});">
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/generic_card.html
21: {% image page.localized.specific.get_meta_image fill-1200x628 %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/quote.html
14: <source media="(min-width: 992px)" srcset="{% image_url quote_image "width-540" %}, {% image_url quote_image "width-1080" %} 2x" alt="{{ alt_text }}">
15: <source media="(min-width: 768px)" srcset="{% image_url quote_image "width-210" %}, {% image_url quote_image "width-420" %} 2x" alt="{{ alt_text }}">
16: <source srcset="{% image_url quote_image "width-510" %}, {% image_url quote_image "width-1020" %} 2x" alt="{{ alt_text }}">
18: <img src="{% image_url quote_image "width-540" %}" class="wagtail-image w-100" srcset="{% image_url quote_image "width-510" %} 510w, {% image_url quote_image "width-210" %} 210w, {% image_url quote_image "width-540" %} 540w" alt="{{ alt_text }}"/>
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_page_heroguts.html
2:{% image page.hero_image original as img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/focus_area.html
4: {% image area.interest_icon width-100 class="icon flex-shrink-0 mb-3 mb-sm-0 mb-lg-3 mr-sm-5 align-self-start" alt=area.interest_icon.title %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/research_detail_card.html
6: {% image research_detail_page.cover_image fill-224x224 as square_image %}
8: {% image research_detail_page.cover_image fill-576x224 class="tw-w-full small:tw-w-[112px]" %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/take_action.html
16: <img src="{% image_url item.image "fill-350x130" %}" class="card-img-top" alt="{{ img.alt }}" aria-label="{{ item.text }}">
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/partner.html
4:<div class="bg-secondary partner-section tw-dark" style='background-image: url("{% image_url page.partner_background_image "fill-1200x600" %}");'>
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/news_you_can_use.html
32: <img src="{% image_url first.get_meta_image "fill-1000x500" %}" alt="{{ first.title }}">
65: <img src="{% image_url localized.get_meta_image "fill-700x394" %}" alt="" class="embed-responsive-item">
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/research_hero_guts.html
6: style="background-image: url('{% image_url banner_image "width-4032" %}')"
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/research_author_card.html
8: {% image author_profile.image fill-182x182 as profile_img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/custom_hero.html
4:{% image page.hero_image fill-1400x675 as bg_img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/primary_heroguts.html
9: <source media="(min-width: 1200px)" srcset="{% image_url banner "fill-4032x480" %}">
10: <source media="(min-width: 992px)" srcset="{% image_url banner "fill-2400x480" %}">
11: <source media="(min-width: 768px)" srcset="{% image_url banner "fill-1984x480" %}">
12: <source media="(min-width: 576px)" srcset="{% image_url banner "fill-1536x390" %}">
14: <img src="{% image_url banner "fill-1536x390" %}" alt="">
18: <source media="(min-width: 1200px)" srcset="{% image_url banner "fill-4032x1152" %}">
19: <source media="(min-width: 992px)" srcset="{% image_url banner "fill-2400x686" %}">
20: <source media="(min-width: 768px)" srcset="{% image_url banner "fill-1984x567" %}">
21: <source media="(min-width: 576px)" srcset="{% image_url banner "fill-1536x439" %}">
23: <img src="{% image_url banner "fill-1536x439" %}" alt="">
network-api/networkapi/wagtailpages/templates/wagtailpages/blog_author_index_page.html
22: {% image author_profile.image fill-182x182 as profile_img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/blog_author_detail_page.html
28: {% image author.image fill-256x256 as img_1x %}
29: {% image author.image fill-512x512 as img_2x %}
network-api/networkapi/wagtailpages/templates/wagtailpages/research_author_detail_page.html
27: {% image author_profile.image fill-256x256 as img_1x %}
28: {% image author_profile.image fill-512x512 as img_2x %}
network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-large.html
5: {% image image fill-1080x600-c100 format-jpeg as hero %}
8: {% image image fill-600x600-c100 format-jpeg as hero2 %}
network-api/networkapi/wagtailpages/templates/wagtailpages/tags/picture_ratios.html
6: {% image unoptimized_image fill-540x304-c0 as image_large %}
7: {% image unoptimized_image fill-1080x608-c0 as image_large_2x %}
10: {% image unoptimized_image fill-480x270-c0 as image_medium %}
11: {% image unoptimized_image fill-960x520-c0 as image_medium_2x %}
14: {% image unoptimized_image fill-320x180-c0 as image_small %}
15: {% image unoptimized_image fill-640x360-c0 as image_small_2x %}
network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page2.html
8:{% image page.ctaHero format-jpeg as big_hero %}
60: {% image cta.hero width-320 as temp %}
network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-cta.html
27: {% image image format-png as hero %}
network-api/networkapi/wagtailpages/templates/wagtailpages/static/initiatives_page.html
7:{% image page.primaryHero fill-2400x700-c100 format-jpeg as big_hero %}
53: {% image section.sectionImage fill-1600x1600-c100 format-jpeg as container_img %}
network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube_regrets_base.html
27: {% image image.value.image width-500 class="mb-3" alt=image.value.altText %}
network-api/networkapi/wagtailpages/templates/wagtailpages/research_detail_page.html
24: {% image page.cover_image fill-259x344 as img %}
network-api/networkapi/wagtailpages/templates/publication_child_menu.html
28: {% image toc_image fill-320x320 as thumbnail %}
network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
17: {% image slide.image fill-1600x900 as img %}
network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
18: {% image block.value.thumbnail fill-1200x600 as img %}
network-api/networkapi/mozfest/templates/fragments/hero/normal.html
6: {% image banner fill-4032x1152 as image_xl %}
7: {% image banner fill-2400x686 as image_lg %}
8: {% image banner fill-1984x567 as image_md %}
9: {% image banner fill-1536x439 as image_sm %}
15: {% image banner fill-1008x288 alt="" %}
network-api/networkapi/wagtailcustomization/image_url_tag_urls.py
5:Typically with Wagtail we use an {% image img.object fill-XXXxYYY %} template tag
20:Blocking image rendition example: {% image product.image fill-250x250 %}
21:Non-block image rendition example: {% image_url product.image 'fill-250x250' %}
network-api/networkapi/templates/fragments/profile_images_stack.html
8: <img src="{% image_url profile.image "fill-100x100" %}" alt="{{ profile.name }}" title="{{ profile.name }}" />
network-api/networkapi/templates/fragments/buyersguide/article_card_vertical.html
9: {% image page.localized.get_meta_image fill-768x432 class="tw-object-cover tw-w-[384px] tw-aspect-video" %}
network-api/networkapi/templates/fragments/buyersguide/featured_article.html
15: {% image search_image width-650 as img1x %}
16: {% image search_image width-1350 as img2x %}
17: {% image search_image width-1950 as img3x %}
network-api/networkapi/templates/fragments/buyersguide/related_product.html
6: {% image related_product.image width-600 as img %}
network-api/networkapi/templates/fragments/buyersguide/article_listing_compact.html
21: {% image article.get_meta_image fill-156x156 as img %}
network-api/networkapi/templates/fragments/buyersguide/article_card_horizontal.html
5: {% image page.localized.get_meta_image fill-512x288 class="tw-hidden medium:tw-block tw-w-[256px] tw-aspect-video tw-object-cover" %}
6: {% image page.localized.get_meta_image fill-160x160 class="tw-block medium:tw-hidden tw-w-[80px] tw-aspect-square tw-rounded-2xl tw-object-cover" %}
network-api/networkapi/templates/fragments/buyersguide/call_to_action_box.html
11: {% image icon height-112 as img %}
network-api/networkapi/templates/fragments/buyersguide/item.html
33: {% image product.image fill-360x360 as img_1x %}
34: {% image product.image fill-720x720 as img_2x %}
39: {% image product.image fill-600x600 as img %}
network-api/networkapi/templates/pages/buyersguide/article_page.html
7: {% image page.hero_image original as img %}
63: src="{% image_url author_profile.image "fill-75x75" %}"
64: srcset="{% image_url author_profile.image "fill-150x150" %} 2x, {% image_url author_profile.image "fill-225x225" %} 3x"
network-api/networkapi/templates/pages/buyersguide/product_page.html
17: {% image page.search_image original as search_image %}
40: {% image product.image width-250 as img %}There may be other images elsewhere. We need to find out which of these need to be made responsive for high res displays.
kristinashu
Related Issues: #9901
As mentioned in ticket #9901, there are some places on the site where rendered images appear blurry or "washed out" even if the image uploaded is of a high resolution.
We should probably take a look at the code base for any images that need to be updated, and update them using a similar solution like the one used in #9765
Acceptance Criteria:
Dev:
┆Issue is synchronized with this Jira Story