Change Details

Last sprint, @lwatson investigated whether we can automatically associate article images with relevant paragraphs of text using a keyword-based approach (see T401159). We may continue exploring that, but for the time being we want to pursue the most basic solution for showing images and text side by side in the "visual table of contents" part of the Image Browsing prototype. That means showing the closest paragraph element where a given image has been embedded (even if it means living with some repetition for now). ==== Requirements - Images in the Overlay (vertical scroll UI) are accompanied by paragraph text from the article. The Overlay includes the DetailView (the selected image from the Carousel, also known as the initial horizontal scroll view) and the VisualTableOfContents (a list of image items in the vertical scroll UI below the selected image). - Paragraph text selection: - Use the closest, non-empty paragraph element that is immediately after the image embedded in the article. - For infobox images (typically in the lead section), use the first paragraph of the article. - DetailView: - Paragraph text displays as raw HTML to maintain page preview and citation links. Links are not blue. - Text is truncated with a "show more/show less" button for expand/collapse functionality. - VisualTableOfContents: - Paragraph text displays as raw HTML to maintain page preview and citation links. Links are blue. - Paragraph displays in full (no truncation or collapsible text). - "View in article" button closes the Overlay and scrolls to the image's position in the article. ==== Acceptance criteria - [X] The Visual Table of Contents component is updated to show images and immediately-adjacent paragraph text side by side - [ ] We perform some review/QA of this using a range of different articles and determine if this is sufficient for the prototype or if we need to do something beyond this ==== Open questions - What about infobox images? How should they be handled? -- for now, adjacent paragraph is okay. We'll review this in a follow-up ticket

Last sprint, @lwatson investigated whether we can automatically associate article images with relevant paragraphs of text using a keyword-based approach (see T401159). We may continue exploring that, but for the time being we want to pursue the most basic solution for showing images and text side by side in the "visual table of contents" part of the Image Browsing prototype. That means showing the closest paragraph element where a given image has been embedded (even if it means living with some repetition for now). ==== Requirements - Images in the Overlay (vertical scroll UI) are accompanied by paragraph text from the article. The Overlay includes the DetailView (the selected image from the Carousel, also known as the initial horizontal scroll view) and the VisualTableOfContents (a list of image items in the vertical scroll UI below the selected image). - Paragraph text selection: - Use the closest, non-empty paragraph element that is immediately after the image embedded in the article. - For infobox images (typically in the lead section), use the first paragraph of the article. - DetailView: - Paragraph text displays as raw HTML to maintain page preview and citation links. Links are not blue. - Text is truncated with a "show more/show less" button for expand/collapse functionality. - VisualTableOfContents: - Paragraph text displays as raw HTML to maintain page preview and citation links. Links are blue. - Paragraph displays in full (no truncation or collapsible text). - "View in article" button closes the Overlay and scrolls to the image's position in the article. ==== Acceptance criteria - [X] The Visual Table of Contents component is updated to show images and immediately-adjacent paragraph text side by side ==== Open questions - What about infobox images? How should they be handled? -- for now, adjacent paragraph is okay. We'll review this in a follow-up ticket

Last sprint, @lwatson investigated whether we can automatically associate article images with relevant paragraphs of text using a keyword-based approach (see T401159). We may continue exploring that, but for the time being we want to pursue the most basic solution for showing images and text side by side in the "visual table of contents" part of the Image Browsing prototype. That means showing the closest paragraph element where a given image has been embedded (even if it means living with some repetition for now). ==== Requirements - Images in the Overlay (vertical scroll UI) are accompanied by paragraph text from the article. The Overlay includes the DetailView (the selected image from the Carousel, also known as the initial horizontal scroll view) and the VisualTableOfContents (a list of image items in the vertical scroll UI below the selected image). - Paragraph text selection: - Use the closest, non-empty paragraph element that is immediately after the image embedded in the article. - For infobox images (typically in the lead section), use the first paragraph of the article. - DetailView: - Paragraph text displays as raw HTML to maintain page preview and citation links. Links are not blue. - Text is truncated with a "show more/show less" button for expand/collapse functionality. - VisualTableOfContents: - Paragraph text displays as raw HTML to maintain page preview and citation links. Links are blue. - Paragraph displays in full (no truncation or collapsible text). - "View in article" button closes the Overlay and scrolls to the image's position in the article. ==== Acceptance criteria - [X] The Visual Table of Contents component is updated to show images and immediately-adjacent paragraph text side by side - [ ] We perform some review/QA of this using a range of different articles and determine if this is sufficient for the prototype or if we need to do something beyond this ==== Open questions - What about infobox images? How should they be handled? -- for now, adjacent paragraph is okay. We'll review this in a follow-up ticket