FP-1410: Shrink Guide Images & Add Links to Open in New Tab

[wesleyboar]

Overview

• Shrink […] Data Transfer guide images consistently on wide screens.
• Link images so they open in new tab. (Add bug fix for it.)

Related

• fixes: FP-1410
• created after work began: FP-1542 (to replace the URLs with ones to locally-available images)

Changes

• delete redundant code
• add <a>'s
• set absolute max-width for images, but otherwise (i.e. mobile) let images grow to fill screen
• shrink one image a little extra
• prevent new bug of really large invisible link

Testing

1. Load these pages¹:
   • https://dev.cep.tacc.utexas.edu/guides/data-transfer-guide/
   • https://dev.cep.tacc.utexas.edu/guides/globus-data-transfer-guide/
2. Scroll to see all images while on wide screen.
3. Scroll to see all images while on narrow screen.
4. No image should be excessively large nor small.²
5. Each image should link to full-size.
6. Report any seemingly related UI bugs.

Screenshots

Data Transfer Guide

576px

AFTER	BEFORE

992px

AFTER	BEFORE

1680px

AFTER	BEFORE

Globus Data Transfer Guide

576px

AFTER	BEFORE

992px

AFTER	BEFORE

1680px

AFTER	BEFORE

Footnotes

1. If testing locally, you'll need to create those two pages. To put content on them, choose the correct page template, which are best to define in the settings_custom.py. Example: ('guides/data_transfer.globus.html', 'Guide: Globus Data Transfer'). ↩

2. At some widths (992px or 576px depending on the page), images are larger than before. That's okay—they were too small on mobile for narrow screens, and Design likes images on mobile to take up all of page width (unless its some intentionally small image). What I did was pick a max size for these guides' images that offered legibility without being too large. At a much wider width, the images are definitely smaller than before. ↩

[wesleyboar]

Comments for reviewers.

[edmondsgarrett]

LGTM! Images are appropriate size for wide & narrow windows, and behave as otherwise described in testing steps.