TCCP illustration cleanup, consolidated image alt text

[chosak]

This PR replaces the TCCP landing page illustration on narrow screens.

It also does some cleanup from when the illustration was added in #8260.

It consolidates and relocates our Jinja image_alt_text tag into a new v1.jinja2tags.images module. It also redefines the default Wagtail image tag so that it can optionally take an image dict as its argument instead of always needing to take an Image object.

The Wagtail {% image %} tag takes an image object and generates an tag in HTML. We use this in various Jinja templates for modules that contain images. And it's very useful when you have an image object:

{% set img = image(page.image, "original") %}
<img src="{{ img.url }}">

But sometimes we may want to call one of our templates and render an image but don't actually have an Image object, for example if we want to hardcode the image link elements (as we do currently on the home page and on the TCCP landing page). The above code doesn't work well because the {% image %} tag can't handle something that isn't actually an Image.

This commit thus replaces Wagtail's {% image %} with our own {% image %} that can handle that case; it acts as a passthrough or no-op that simply returns the object that was passed in. That lets you do this:

image_dict = {"url": "cat.png"}

{% set img = image(image_dict, "original") %}
<img src="{{ img.url }}">

How to test this PR

1. ./frontend.sh
2. Run a local server and visit http://localhost:8000/consumer-tools/credit-cards/explore-cards/ on different screen sizes.

Screenshots

Notes and todos

This resolves a TODO comment from 2020.

Checklist

• PR has an informative and human-readable title
• Changes are limited to a single goal (no scope creep)
• Code follows the standards laid out in the CFPB development guidelines

[contolini]

⚾💨 hoooommmeee rrrruuuunnnnn 🏆