We've gone back and forth on what text should be shown next to each image in the Detail View and Visual TOC Item components.

After conferring with @JScherer-WMF and @ovasileva, here is the final set of rules we need to apply to determine which text appears next to images in different parts of the ImageBrowsing UI:

Detail View

• Detail view images never display paragraph text, regardless of whether we have it or not
• If we have an image caption, show that
• If we lack a caption but have alt text, show that
• If we lack either of those things, show nothing

VTOC items

• VTOC items should show the nearest paragraph text, EXCEPT:
  • if the image is in an infobox (.infobox class on the container), don't show any paragraph text
  • if the image is in a gallery (.gallery class on the container), don't show any paragraph text
• VTOC items without paragraph text (including for the excluded templates defined above) will show caption text if available
• VTOC items that lack both paragraph text and caption text can show alt text, if available
• VTOC items that lack all of these things show no text (except for the "view in article" button which all items get)

Implementation

• Previously we thought that we'd follow the same rules of priority in terms of what text to show alongside both VTOC and Detail View images, so we defined a Vue.js composable to re-use the logic in two different components. That file will need to be removed, and instead we'll probably want to use a unique computed property in each component where we need text that can have different rules
• Links within caption / paragraph text still need to be instrumented so we can track clicks on them (cc @Marco and @KSarabia-WMF who are working on this)
• In the near future we will also introduce another images from other wikis – these images can appear in both the detail view as well as the VTOC. These remote images will need to follow different rules, which are not yet 100% defined; this is beyond the scope of particular task to figure out.
• We probably need to define an open-ended list of excluded CSS classes based on Wiki templates that allow multiple images to appear together (infobox, gallery, anything else?) – that way we can easily update our UI in the future if we discover other templates which cause repeated or unexpected text content to appear alongside images

QA Process

• We will need to test how this interacts with real on-wiki content. I'd recommend staging the patch for this task in PatchDemo, proxying articles from wikipedia, and checking a subset of the top 100 wiki articles for anything that looks unusual.