fix: article image alignment and sizing (#1050)

## Overview

> [!IMPORTANT]
> **To Do**
> - [x] Extract ee9838c and b7d7df7 to separate PR.
> - [ ] Update image thumbnail opts of all sites that have News.
> - [ ] Prepare to [offset small main
image](https://github.com/user-attachments/assets/a97471ce-209a-4691-bdcc-5da827207c49)
instead of [just
align](https://github.com/user-attachments/assets/51ef1107-1bb5-40a7-8e07-79b5947a3380).

Fix alignment and size of:

1. main image (on news article page):
    - narrow image, narrow screen
    - full-width image[^1], narrow screen
    - narrow image, wide screen
    - full-width image[^1], wide screen
2. thumbnail image (on news feed page and embed):
    - narrow image, narrow screen
    - full-width image[^1], narrow screen
    - narrow image, wide screen
    - full-width image[^1], wide screen

[^1]: I.e. use a Thumbnail Option with `width` of `0`.

## Related

- [RT
#37827](https://tickets.tacc.utexas.edu/Ticket/Display.html?id=37827)

## Changes

- **renamed** mixins to express what its styles do
    - `news-article-page__media--slim-context` → `…--layout-center`
    - `news-article-page__media--wide-context` → `…--layout-float`
- **changed** mixin `…--layout-center` to be used **only** if main image
thumb. opt. has `0` width
- **fixed** unaligned blog content images
- **deleted** unnecessary code
- **fixed** large article list image from overflowing list
- **fixed** small article list image from not filling item
- **changed** overwritten code to be reminder comment instead
- **moved** mixins `news-article-page__media--…`
    - from `x-news.css`
    - to `django.cms.blog.app.page.css`
- **changed** markup of form to choose news list layout
- **added** thumb. opt. values into HTML (for CSS)
	- `data-width`
	- `data-height`

## Testing

Given an article main image of thumbnail size with **width = 0**:
- On news **article page**, that image should be:
    - as wide as content
- On news **feed page** (and **feed embed**):
    - In **list view**:
        - On a wide screen (1 wide column),
          that image should be **no wider than 50%**.
        - On a narrow screen (1 narrow column),
          that image should **shrink** to fit item.
    - In **grid layout**[^2]:
        - On a wide screen (N narrow columns),
          that image should **shrink** to fit item.
        - On a narrow screen (1 narrow column),
          that image should **shrink** to fit item.

Given an article main image of thumbnail size with **width > 0**:
- On news **article page**, that image should be:
    - no wider than 50% of content
    - right-aligned
- On news **feed page** (and **feed fembed**):
    - In list view:
        - On a wide screen (1 wide column),
          that image width should **define media grid cell width**.
        - On a narrow screen (1 narrow column),
          that image should **grow** to fit item.
    - In grid view:
        - On a wide screen (N narrow columns),
          that image should **grow** to fit item.
        - On a narrow screen (1 narrow column),
          that image should **grow** to fit item.

[^2]: This is a secret layout. Unhide the `#layout-choice-form` element
to reveal the layout options.

## UI

Skipped.

Author: wesleyboar

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css

@@ -81,6 +81,20 @@ Styleguide Components.DjangoCMS.Blog.App.Page
 /* To support vertical layouts at narrow viewports */
 :--news-article-page .blog-visual {
   @mixin news-article-page__media;
+
+  @media (--medium-and-below) {
+    & {
+      @mixin news-article-page__media--layout-center;
+    }
+  }
+  @media (--medium-and-above) {
+    &:has([data-width="0"]) {
+      @mixin news-article-page__media--layout-center;
+    }
+    &:not(:has([data-width="0"])) {
+      @mixin news-article-page__media--layout-float;
+    }
+  }
 }
 
 /* To prevent footer on left side of page */
@@ -175,6 +189,15 @@ Styleguide Components.DjangoCMS.Blog.App.Page
   :--news-article-page .blog-content .align-right,
   :--news-article-page .blog-content .align-left {
     max-width: 100%;
+
+    /* So figure or linked image will center if not aligned */
+    &:is(a, figure) {
+      margin-inline: auto;
+    }
+    &:is(a) {
+      display: block;
+      width: fit-content;
+    }
   }
   :--news-article-page .blog-content .align-right,
   :--news-article-page .blog-content .align-left {

taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css

@@ -104,7 +104,10 @@
 }
 @define-mixin news-feed--as-grid {
   display: grid;
-  grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
+  /* IMPORTANT: Define column widths per instance/usage e.g.
+  grid-template-columns: repeat( N, 1fr );
+  grid-auto-columns: fit-content( NN% );
+  */
 
   gap: var(--global-space--pattern-pad);
 }
@@ -146,8 +149,6 @@
     'media'
     'head'
     'lead';
-  /* To prevent content from overflowing cell */
-  grid-template-columns: minmax(0, 1fr);
   /* To prevent vertical stretch of rows */
   grid-auto-rows: min-content;
 
@@ -158,7 +159,7 @@
     'media head'
     'media lead';
   /* To limit media width */
-  grid-template-columns: minmax(0, 300px) 1fr;
+  grid-template-columns: fit-content(50%) 1fr;
   /* To give 'lead' remaining vert. space (removes gap between head and lead) */
   grid-template-rows: min-content 1fr;
 
@@ -248,7 +249,9 @@
 /* To limit media width to size of media grid area */
 @define-mixin news-feed-article__media--constrain-content {
   & img {
-    /* to prevent overflow if column is narrower than image */
+    /* to prevent narrow image if column is wider than image */
+    width: 100%;
+    /* to prevent image overflow if column is narrower than image */
     max-width: 100%;
     /* to preserve ratio if width is reduced (by max-width: 100%) */
     height: auto;
@@ -366,24 +369,23 @@
 /* Media */
 
 @define-mixin news-article-page__media {
-  @media (--medium-and-below) {
-    @mixin news-article-page__media--slim-context;
-  }
-  @media (--medium-and-above) {
-    @mixin news-article-page__media--wide-context;
-  }
-
   /* To not show empty block (which might have margin) */
   &:empty {
     display: none;
   }
 }
-@define-mixin news-article-page__media--slim-context {
+@define-mixin news-article-page__media--layout-center {
   margin-inline: auto;
   width: fit-content;
 }
-@define-mixin news-article-page__media--wide-context {
+@define-mixin news-article-page__media--layout-float {
   float: right;
   max-width: 50%;
   margin-left: 45px;
+
+  /* TODO: Ask designer whether to offset a floated main image */
+  /* WARNING: Requires Core-Styles @define-mixin offset-content(--…) */
+  /*
+  @extend .o-offset-content--right;
+  */
 }

taccsite_cms/templates/djangocms_blog/post_detail.html

@@ -47,7 +47,7 @@ <h3>{% render_model post "subtitle" %}</h3>
     {% else %}
     <div class="blog-visual">
         {% thumbnail post.main_image post.full_image_options.size crop=post.full_image_options.crop upscale=post.full_image_options.upscale subject_location=post.main_image.subject_location  as thumb %}
-        <img src="{{ thumb.url }}" alt="{{ post.main_image.default_alt_text }}" width="{{ thumb.width }}" height="{{ thumb.height }}" />
+        <img src="{{ thumb.url }}" alt="{{ post.main_image.default_alt_text }}" width="{{ thumb.width }}" height="{{ thumb.height }}" data-width="{{ post.full_image_options.width }}" data-height="{{ post.full_image_options.height }}" />
     </div>
     {% endif %}
     {# TACC (do not let source end spaceless-ness prematurely): #}