Closes #3590: Change News preview layouts

[danahertzberg]

Description

News preview displays were changed to have the images on the left. With this, another view display was added so the mockups could be recreated more accurately.

Release notes

If this change requires release notes: provide a summary of changes, how to use this change, and any related links. This content will be pasted in the release notes. Use markdown format to ensure proper pasting of information.

Make sure to add the release notes label to this PR.

### Visual changes to News items
AZ News content type displays are changed to have the image on the left instead of right of the content.

AZ News view displays have been changed. The former "Small Row View" display has changed its name to "Sidebar Row View". A new view display called "Small Row View" has been added to show the new "Small Row" display of AZ News content.

Related issues

Closes #3590

How to test

1. View relocated images (to left side) AZ News view displays
   • Feature View
   • Paged Row View
   • Small Row View
   • Recent News Marquee
   • Sidebar Row View
2. Ensure the renamed "Sidebar news view" works as expected via the View paragraph type
3. Ensure the new "Small row view" works as expected
   • This should have a rendered card style image, title, and link only
4. This would benefit from multidev testing on sites without Demo content to ensure new views render accurately

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

• Patch release changes
  • Bug fix
  • Accessibility, performance, or security improvement
  • Critical institutional link or brand change
  • Adding experimental module
  • Update experimental module
• Minor release changes
  • New feature
  • Breaking or visual change to existing behavior
  • Upgrade experimental module to stable
  • Enable existing module by default or database update
  • Non-critical brand change
  • New internal API or API improvement with backwards compatibility
  • Risky or disruptive cleanup to comply with coding standards
  • High-risk or disruptive change (requires upgrade path, risks regression, etc.)
• Other or unknown
  • Other or unknown

Drupal core

• Patch release changes
  • Security update
  • Patch level release (non-security bug-fix release)
  • Patch removal that's no longer necessary
• Minor release changes
  • Major or minor level update
• Other or unknown
  • Other or unknown

Drupal contrib projects

• Patch release changes
  • Security update
  • Patch or minor level update
  • Add new module
  • Patch removal that's no longer necessary
• Minor release changes
  • Major level update
• Other or unknown
  • Other or unknown

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• My change requires release notes.

[danahertzberg]

To do:

• Make new thumbnail image style to use with these changes
• Update all content type displays
• Ensure view displays are updated appropriately for finder and AZ News
• Use drush command for file export drush az-core-distribution-config

[danahertzberg]

Feedback needed from central marketing

• Does brand allow for selection of left vs right image?
• What accessibility concerns come with each option?

https://uarizona.slack.com/archives/C0SAW6H4J/p1723657513296119

[danahertzberg]

" " or in the alt text for images marks them as decorative. Use this here.

Eliminating alt text altogether, is problematic since a screen reader will read out the file name if no alt text exists.
https://www.w3.org/WAI/tutorials/images/decorative/

[elyssanaval]

@danahertzberg I wonder if it's possible to add a help text in the field to let content editors know about the "" option. Currently, it is "required" to add alt text.

An empty space results in an error.

[danahertzberg]

Needs testing on a multidev to ensure double thumbnail issue is resolved

[ewlyman]

I think this display overall is successful. One item needs to be updated:
The original Small Row View and new Sidebar Row View both have the block name "Sidebar News Block" --I found this confusing and perhaps sitebuilders would as well.

Brian has already brought this up, but vertical alignment of text and thumbnails is irregular across the different views, and in a couple of cases, the same view at different view sizes. Please refer to screenshots collected at Brian has already brought this up, but vertical alignment of text and thumbnails is irregular across the different views, and in a couple of cases, the same view at different view sizes. Please refer to screenshots collected at https://arizona.box.com/s/9t4zdg24k0v24138nh8811jp4eb1gaqy

[ewlyman]

Suggested change

	classes: 'col d-flex flex-column my-auto pb-3'
	classes: 'col d-flex flex-column mt-0 mb-auto pb-3'

[ewlyman]

Aligns text with top of thumbnail.

[danahertzberg]

This is a request from central marketing to have it aligned to the center of the image since it does not encompass other content beyond the title.

[danahertzberg]

Brian has already brought this up, but vertical alignment of text and thumbnails is irregular across the different views, and in a couple of cases, the same view at different view sizes. Please refer to screenshots in Box

I agree with the irregularity happening at different viewport sizes. I appreciate the screenshots to further define the problem. I would like to see this as a separate GH issue since those issues existed before the changes were made here. I also anticipate larger changes to happen in the near future, so we'll have to see how it all plays out.

[ewlyman]

Approving, per discussion in AZ Digital meeting.