feat: PORTAL_BLOG_SHOW_MAIN_IMAGE

[wesleyboar]

Overview

• Implements PORTAL_BLOG_SHOW_AUTO_MAIN_IMAGE (default: False).
  • Default, False, will not render auto main image.
  • The Media placeholder is unaffected.
  • Replaces per-portal custom CSS that hide .blog-visual.
• Auto main image:
  • Use <figure>.
  • Proper alt value.
  • Optional <figcaption>.
• Thumbnail image:
  • Use <figure>.
  • Proper alt value.

Related

• supersedes feat(generic): hide-news-main-image.css Core-CMS-Custom#536
• documented by TACC/Core-CMS-Custom@c8e5234e
• will test via https://github.com/TACC/Core-Portal-Deployments/pull/191
• required by feat: update CMS & clean up CMS settings tup-ui#557

Changes

• added setting PORTAL_BLOG_SHOW_AUTO_MAIN_IMAGE
• added conditional rendering in post_detail.html
• change <div> to <figure> for news images
• added <figcaption> for auto main image
• fixes bug alt="None" in news images

Testing

Note

Tested on new pprd.cfde-cms.tacc.utexas.edu.

#	Setting	Setup	Expected	Tested?
1	False	Article with a "Main image" set	Main image absent	⏸️
2	True	Article with a "Main image" set	Main image present & No duplicate image	⏸️

UI

Skipped. I tested much more than is listed: images would be cumbersome to annotate, and without annotation most comparison images would look very similar; videos would be long and many.

[qodo-code-review]

Review Summary by Qodo

(Agentic_describe updated until commit 1c162b3)

Add configurable auto main image display with semantic figure elements

✨ Enhancement 🐞 Bug fix

Walkthroughs

Description

• Add PORTAL_BLOG_SHOW_AUTO_MAIN_IMAGE setting to control article main image display
• Replace <div> with semantic <figure> elements for blog images
• Fix alt="None" bug by making alt text conditional
• Add optional <figcaption> support for article main images
• Adjust figure margin styling for news feed items

Diagram

flowchart LR
  A["PORTAL_BLOG_SHOW_AUTO_MAIN_IMAGE<br/>Setting Added"] --> B["post_detail.html<br/>Conditional Rendering"]
  B --> C["figure Element<br/>Replaces div"]
  C --> D["Alt Text Fix<br/>Avoid alt=None"]
  C --> E["figcaption<br/>Optional Caption"]
  F["blog_item.html<br/>Thumbnail Images"] --> C
  G["CSS Styling<br/>Figure Margin"] --> C

Loading

File Changes

1. taccsite_cms/settings/settings.py ⚙️ Configuration changes +4/-0

Add blog auto main image configuration setting

• Added PORTAL_BLOG_SHOW_AUTO_MAIN_IMAGE setting with default value False
• Added explanatory comments about designer preference for explicit image addition
• Registered setting in PORTAL_SETTINGS_WHITELIST for template access

taccsite_cms/settings/settings.py

---

2. taccsite_cms/settings/settings_custom.example.py 📝 Documentation +1/-0

Update example settings with new blog configuration

• Added example configuration for PORTAL_BLOG_SHOW_AUTO_MAIN_IMAGE setting

taccsite_cms/settings/settings_custom.example.py

---

3. taccsite_cms/templates/djangocms_blog/includes/blog_item.html ✨ Enhancement +7/-3

Refactor blog item image to use figure element

• Changed <div class="blog-visual"> to <figure class="blog-visual"> for semantic HTML
• Made alt text conditional to prevent alt="None" rendering
• Wrapped closing tag to match new figure element

taccsite_cms/templates/djangocms_blog/includes/blog_item.html

---

View more (2)

4. taccsite_cms/templates/djangocms_blog/post_detail.html ✨ Enhancement +17/-4

Add conditional main image display with figure wrapper

• Added conditional rendering based on PORTAL_BLOG_SHOW_AUTO_MAIN_IMAGE setting
• Changed <div> to <figure> wrapper for main article image
• Made alt text conditional to avoid alt="None" bug
• Added optional <figcaption> element for image captions

taccsite_cms/templates/djangocms_blog/post_detail.html

---

5. taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css Styling +4/-0

Reset figure margin for news feed styling

• Added CSS rule to unset default figure margin-block for news feed items
• Targets figure.blog-visual within news article item containers

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

---

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (6) 📘 Rule violations (0)

1. Default disables blog visuals 🐞 Bug ≡ Correctness

Description

PORTAL_BLOG_SHOW_MAIN_IMAGE defaults to False, and both list/detail templates treat non-True as
“do not render .blog-visual”, so portals that don’t explicitly override the new setting will lose
blog visuals site-wide. This is a behavior regression for any deployment relying on the prior
implicit default (render images when present).

Code

taccsite_cms/settings/settings.py[R320-322]

+# Whether to automatically show article image on the article page
+# FAQ: Designer consistently prefers main image be explicitely added
+PORTAL_BLOG_SHOW_MAIN_IMAGE = False

Evidence

The setting is defined with default False and is used in templates as an early guard that skips
rendering .blog-visual unless the value is True, which means visuals will be suppressed by
default for all portals.

taccsite_cms/settings/settings.py[317-323]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`PORTAL_BLOG_SHOW_MAIN_IMAGE` is introduced with a default of `False`, and templates suppress `.blog-visual` unless the setting is explicitly `True`. This changes behavior globally for any portal that does not define the new setting.
## Issue Context
The templates use `{% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}` as an early-exit, so the default value fully controls whether images/media render.
## Fix Focus Areas
- taccsite_cms/settings/settings.py[317-323]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
## Suggested fix
Set `PORTAL_BLOG_SHOW_MAIN_IMAGE = True` as the default to preserve existing behavior, and let portals opt out by setting it to `False` in `settings_custom.py`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Hides explicit post.media 🐞 Bug ≡ Correctness

Description

In post_detail.html, the new PORTAL_BLOG_SHOW_MAIN_IMAGE guard wraps the branch that renders `{%
render_placeholder post.media %} (used when post.main_image_id` is absent), so setting the flag to
False also suppresses explicitly-authored placeholder media. This contradicts the intent
documented in settings (“main image be explicitly added”) and can remove intended content from posts
without main_image_id.

Code

taccsite_cms/templates/djangocms_blog/post_detail.html[R45-50]

+    {# TACC (setting PORTAL_BLOG_SHOW_MAIN_IMAGE): #}
+    {% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
+        <!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->
+    {% elif not post.main_image_id %}
+    {# /TACC #}
     <div class="blog-visual">{% render_placeholder post.media %}</div>

Evidence

The template’s first branch exits when the setting is false, preventing execution of the `elif not
post.main_image_id branch that renders post.media`; the settings comment indicates the goal is to
avoid automatic main image and prefer explicit media, which this ordering breaks.

taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
taccsite_cms/settings/settings.py[317-323]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`post_detail.html` currently checks `PORTAL_BLOG_SHOW_MAIN_IMAGE` before deciding whether to render either (a) the fallback placeholder media (`post.media`) or (b) the main image. With the flag set to `False`, neither renders — including explicitly-authored placeholder media.
## Issue Context
The code path for `{% render_placeholder post.media %}` is currently inside an `elif` that is unreachable when the flag is `False`.
## Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
- taccsite_cms/settings/settings.py[317-323]
## Suggested fix
Reorder conditionals so the placeholder media renders whenever `post.main_image_id` is missing, and only gate the *main image* rendering on `PORTAL_BLOG_SHOW_MAIN_IMAGE`, e.g.:

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. No-visual keeps media layout 🐞 Bug ≡ Correctness

Description

Blog list items switch to a special “no media” layout only when the article has no .blog-visual
children, but the PR’s CSS hide keeps those children in the DOM. As a result, the no-media layout
rule will not apply when no-visual is enabled, likely leaving empty media grid space/misaligned
list items.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[R82-87]

+/* To conditionally hide certain content */
.app-blog.no-tags .tags,
-.app-blog.no-categories .categories {
+.app-blog.no-categories .categories,
+.app-blog.no-visual .blog-visual {
display: none;
}

Evidence

List items always render .blog-visual with child `` elements, and the PR only hides it with
display:none. The list CSS applies the no-media layout only when :has(.blog-visual > *) is
false, which will not happen when images are merely hidden.

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[69-103]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The feed layout uses `:--news-article-item:not(:has(.blog-visual > *))` to detect when a list item has no media and apply `news-feed__article--no-media`. With `no-visual`, `.blog-visual` is hidden but still contains children, so this detection never triggers.
## Issue Context
The PR hides `.blog-visual` via `display:none`, but does not remove the markup. Existing CSS depends on DOM presence to decide layout.
## Fix Focus Areas
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[69-103]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
## Expected fix
Preferably: stop rendering `.blog-visual` when `PORTAL_BLOG_SHOW_MAIN_IMAGE` is false (template-gated rendering). This will automatically make the `:has(.blog-visual > *)` condition false and enable the correct no-media layout.
If you must keep CSS-only hiding: add an explicit override for no-visual mode to apply the no-media layout mixin (or an equivalent grid/template adjustment) for list items when `.app-blog.no-visual` is present.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

4. Figure margins not reset 🐞 Bug ≡ Correctness ⭐ New

Description

.blog-visual is now rendered as a <figure> in blog_item.html and post_detail.html, but the
CSS margin reset only applies under :--news-article-item. Other contexts that also render these
templates (article page and embedded feeds/plugins) will keep default <figure> margins and can
break the intended .blog-visual layout/spacing.

Code

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[R19-26]

+    {# TACC (use figure wrapper): #}
+    <figure class="blog-visual">
        {% thumbnail post.main_image post.thumbnail_options.size crop=post.thumbnail_options.crop upscale=post.thumbnail_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 }}" />
-    </div>
+        {# TACC (make alt text conditional to avoid `alt="None"`): #}
+        <img src="{{ thumb.url }}" alt="{% if post.main_image.default_alt_text %}{{ post.main_image.default_alt_text }}{% endif %}" width="{{ thumb.width }}" height="{{ thumb.height }}" />
+        {# /TACC #}
+    </figure>
+    {# /TACC #}

Evidence

The templates now emit <figure class="blog-visual"> in multiple contexts, but the only
figure-margin override is scoped to :--news-article-item, so embedded feeds/plugins and the post
detail page do not receive the reset and may render with default figure margins.

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-26]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-62]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[127-146]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.selectors.css[3-16]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css[62-99]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css[53-101]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The PR changes blog visuals from `<div class="blog-visual">` to `<figure class="blog-visual">`, but only the news-feed item stylesheet resets figure margins (and only in the `:--news-article-item` context). This leaves other render contexts (article page and embedded feeds/plugins) exposed to default `<figure>` margins, which can alter spacing and float/grid layouts.

## Issue Context
- `blog_item.html` is used in the blog list page and in plugin templates (e.g. authors posts), so its new `<figure>` wrapper will appear outside `:--news-article-item`.
- `post_detail.html` also uses `<figure class="blog-visual">`, but `django.cms.blog.app.page.css` contains no `figure.blog-visual` margin reset.

## Fix Focus Areas
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[143-146]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css[62-98]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css[95-101]

### Suggested change
Add a margin reset that applies wherever `.blog-visual` is a figure, e.g.:
- Prefer `margin: 0;` (covers both axes) on `figure.blog-visual`.
- Apply it for page + embed contexts too (or once at a shared scope like `.app-blog figure.blog-visual { margin: 0; }`).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

5. Production HTML debug comments 🐞 Bug ⚙ Maintainability

Description

When PORTAL_BLOG_SHOW_MAIN_IMAGE is disabled, the templates emit an HTML comment into the rendered
page, adding unnecessary markup and exposing internal configuration names to clients. This occurs on
blog list items and blog detail pages whenever the flag evaluates false.

Code

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[R18-22]

+    {# TACC (setting PORTAL_BLOG_SHOW_MAIN_IMAGE): #}
+    {% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
+        <!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->
+    {% elif image and post.main_image %}
+    {# /TACC #}

Evidence

Both templates explicitly output an HTML comment in the branch where
settings.PORTAL_BLOG_SHOW_MAIN_IMAGE is false, meaning the comment will be present in the
client-delivered HTML whenever the flag is disabled.

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[18-22]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-48]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Templates render HTML comments (`<!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->`) when the feature flag is off. These comments ship to production HTML and provide no user value.
### Issue Context
The comment is emitted in both the blog list item template and the blog detail template under the `if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE` branch.
### Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[18-22]
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-48]
### Suggested fix
- Remove the HTML comment lines entirely, leaving the branch empty.
- If you want to keep a hint for developers, guard it behind `settings.DEBUG` (note: `DEBUG` is exported via `SETTINGS_EXPORT`), e.g.:
- `{% if settings.DEBUG %}<!-- ... -->{% endif %}`

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

6. Hidden images still download 🐞 Bug ➹ Performance

Description

The new no-visual mode hides .blog-visual with CSS but still renders the <img> tags in templates, so
browsers will still request/download the main/preview images. This increases bandwidth and can hurt
page performance (e.g., LCP) even though the image is not visible.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[R82-87]

+/* To conditionally hide certain content */
.app-blog.no-tags .tags,
-.app-blog.no-categories .categories {
+.app-blog.no-categories .categories,
+.app-blog.no-visual .blog-visual {
display: none;
}

Evidence

The PR adds a no-visual class and a CSS rule that hides .blog-visual, but .blog-visual still
contains `` in both the detail and list-item templates, meaning the browser will still fetch those
image URLs.

taccsite_cms/templates/djangocms_blog/base.html[31-37]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-52]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`PORTAL_BLOG_SHOW_MAIN_IMAGE=False` currently only applies `display:none` to `.blog-visual`, leaving `<img>` elements in the DOM and still downloading their resources.
## Issue Context
The templates always render a `.blog-visual` container with thumbnails/media, and the PR change hides it only via CSS.
## Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-52]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
- taccsite_cms/templates/djangocms_blog/base.html[31-37]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
## Expected fix
Wrap the `.blog-visual` rendering blocks in `{% if settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}...{% endif %}` (or a more nuanced condition if some media should still show), so the element is not rendered when disabled. Then either remove the CSS hide rule or keep it as a defensive fallback.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Previous review results

Review updated until commit 1c162b3

Results up to commit 1813b38

🐞 Bugs (5) 📘 Rule violations (0)

1. Default disables blog visuals 🐞 Bug ≡ Correctness

Description

PORTAL_BLOG_SHOW_MAIN_IMAGE defaults to False, and both list/detail templates treat non-True as
“do not render .blog-visual”, so portals that don’t explicitly override the new setting will lose
blog visuals site-wide. This is a behavior regression for any deployment relying on the prior
implicit default (render images when present).

Code

taccsite_cms/settings/settings.py[R320-322]

+# Whether to automatically show article image on the article page
+# FAQ: Designer consistently prefers main image be explicitely added
+PORTAL_BLOG_SHOW_MAIN_IMAGE = False

Evidence

The setting is defined with default False and is used in templates as an early guard that skips
rendering .blog-visual unless the value is True, which means visuals will be suppressed by
default for all portals.

taccsite_cms/settings/settings.py[317-323]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`PORTAL_BLOG_SHOW_MAIN_IMAGE` is introduced with a default of `False`, and templates suppress `.blog-visual` unless the setting is explicitly `True`. This changes behavior globally for any portal that does not define the new setting.
## Issue Context
The templates use `{% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}` as an early-exit, so the default value fully controls whether images/media render.
## Fix Focus Areas
- taccsite_cms/settings/settings.py[317-323]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
## Suggested fix
Set `PORTAL_BLOG_SHOW_MAIN_IMAGE = True` as the default to preserve existing behavior, and let portals opt out by setting it to `False` in `settings_custom.py`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Hides explicit post.media 🐞 Bug ≡ Correctness

Description

In post_detail.html, the new PORTAL_BLOG_SHOW_MAIN_IMAGE guard wraps the branch that renders `{%
render_placeholder post.media %} (used when post.main_image_id` is absent), so setting the flag to
False also suppresses explicitly-authored placeholder media. This contradicts the intent
documented in settings (“main image be explicitly added”) and can remove intended content from posts
without main_image_id.

Code

taccsite_cms/templates/djangocms_blog/post_detail.html[R45-50]

+    {# TACC (setting PORTAL_BLOG_SHOW_MAIN_IMAGE): #}
+    {% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
+        <!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->
+    {% elif not post.main_image_id %}
+    {# /TACC #}
      <div class="blog-visual">{% render_placeholder post.media %}</div>

Evidence

The template’s first branch exits when the setting is false, preventing execution of the `elif not
post.main_image_id branch that renders post.media`; the settings comment indicates the goal is to
avoid automatic main image and prefer explicit media, which this ordering breaks.

taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
taccsite_cms/settings/settings.py[317-323]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`post_detail.html` currently checks `PORTAL_BLOG_SHOW_MAIN_IMAGE` before deciding whether to render either (a) the fallback placeholder media (`post.media`) or (b) the main image. With the flag set to `False`, neither renders — including explicitly-authored placeholder media.
## Issue Context
The code path for `{% render_placeholder post.media %}` is currently inside an `elif` that is unreachable when the flag is `False`.
## Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
- taccsite_cms/settings/settings.py[317-323]
## Suggested fix
Reorder conditionals so the placeholder media renders whenever `post.main_image_id` is missing, and only gate the *main image* rendering on `PORTAL_BLOG_SHOW_MAIN_IMAGE`, e.g.:

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. No-visual keeps media layout 🐞 Bug ≡ Correctness

Description

Blog list items switch to a special “no media” layout only when the article has no .blog-visual
children, but the PR’s CSS hide keeps those children in the DOM. As a result, the no-media layout
rule will not apply when no-visual is enabled, likely leaving empty media grid space/misaligned
list items.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[R82-87]

+/* To conditionally hide certain content */
.app-blog.no-tags .tags,
-.app-blog.no-categories .categories {
+.app-blog.no-categories .categories,
+.app-blog.no-visual .blog-visual {
display: none;
}

Evidence

List items always render .blog-visual with child `` elements, and the PR only hides it with
display:none. The list CSS applies the no-media layout only when :has(.blog-visual > *) is
false, which will not happen when images are merely hidden.

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[69-103]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The feed layout uses `:--news-article-item:not(:has(.blog-visual > *))` to detect when a list item has no media and apply `news-feed__article--no-media`. With `no-visual`, `.blog-visual` is hidden but still contains children, so this detection never triggers.
## Issue Context
The PR hides `.blog-visual` via `display:none`, but does not remove the markup. Existing CSS depends on DOM presence to decide layout.
## Fix Focus Areas
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[69-103]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
## Expected fix
Preferably: stop rendering `.blog-visual` when `PORTAL_BLOG_SHOW_MAIN_IMAGE` is false (template-gated rendering). This will automatically make the `:has(.blog-visual > *)` condition false and enable the correct no-media layout.
If you must keep CSS-only hiding: add an explicit override for no-visual mode to apply the no-media layout mixin (or an equivalent grid/template adjustment) for list items when `.app-blog.no-visual` is present.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

4. Production HTML debug comments 🐞 Bug ⚙ Maintainability

Description

When PORTAL_BLOG_SHOW_MAIN_IMAGE is disabled, the templates emit an HTML comment into the rendered
page, adding unnecessary markup and exposing internal configuration names to clients. This occurs on
blog list items and blog detail pages whenever the flag evaluates false.

Code

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[R18-22]

+    {# TACC (setting PORTAL_BLOG_SHOW_MAIN_IMAGE): #}
+    {% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
+        <!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->
+    {% elif image and post.main_image %}
+    {# /TACC #}

Evidence

Both templates explicitly output an HTML comment in the branch where
settings.PORTAL_BLOG_SHOW_MAIN_IMAGE is false, meaning the comment will be present in the
client-delivered HTML whenever the flag is disabled.

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[18-22]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-48]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Templates render HTML comments (`<!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->`) when the feature flag is off. These comments ship to production HTML and provide no user value.
### Issue Context
The comment is emitted in both the blog list item template and the blog detail template under the `if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE` branch.
### Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[18-22]
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-48]
### Suggested fix
- Remove the HTML comment lines entirely, leaving the branch empty.
- If you want to keep a hint for developers, guard it behind `settings.DEBUG` (note: `DEBUG` is exported via `SETTINGS_EXPORT`), e.g.:
- `{% if settings.DEBUG %}<!-- ... -->{% endif %}`

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

5. Hidden images still download 🐞 Bug ➹ Performance

Description

The new no-visual mode hides .blog-visual with CSS but still renders the <img> tags in templates, so
browsers will still request/download the main/preview images. This increases bandwidth and can hurt
page performance (e.g., LCP) even though the image is not visible.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[R82-87]

+/* To conditionally hide certain content */
.app-blog.no-tags .tags,
-.app-blog.no-categories .categories {
+.app-blog.no-categories .categories,
+.app-blog.no-visual .blog-visual {
display: none;
}

Evidence

The PR adds a no-visual class and a CSS rule that hides .blog-visual, but .blog-visual still
contains `` in both the detail and list-item templates, meaning the browser will still fetch those
image URLs.

taccsite_cms/templates/djangocms_blog/base.html[31-37]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-52]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`PORTAL_BLOG_SHOW_MAIN_IMAGE=False` currently only applies `display:none` to `.blog-visual`, leaving `<img>` elements in the DOM and still downloading their resources.
## Issue Context
The templates always render a `.blog-visual` container with thumbnails/media, and the PR change hides it only via CSS.
## Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-52]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
- taccsite_cms/templates/djangocms_blog/base.html[31-37]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
## Expected fix
Wrap the `.blog-visual` rendering blocks in `{% if settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}...{% endif %}` (or a more nuanced condition if some media should still show), so the element is not rendered when disabled. Then either remove the CSS hide rule or keep it as a defensive fallback.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Results up to commit e4d5a3c

🐞 Bugs (5) 📘 Rule violations (0)

1. Default disables blog visuals 🐞 Bug ≡ Correctness

Description

PORTAL_BLOG_SHOW_MAIN_IMAGE defaults to False, and both list/detail templates treat non-True as
“do not render .blog-visual”, so portals that don’t explicitly override the new setting will lose
blog visuals site-wide. This is a behavior regression for any deployment relying on the prior
implicit default (render images when present).

Code

taccsite_cms/settings/settings.py[R320-322]

+# Whether to automatically show article image on the article page
+# FAQ: Designer consistently prefers main image be explicitely added
+PORTAL_BLOG_SHOW_MAIN_IMAGE = False

Evidence

The setting is defined with default False and is used in templates as an early guard that skips
rendering .blog-visual unless the value is True, which means visuals will be suppressed by
default for all portals.

taccsite_cms/settings/settings.py[317-323]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`PORTAL_BLOG_SHOW_MAIN_IMAGE` is introduced with a default of `False`, and templates suppress `.blog-visual` unless the setting is explicitly `True`. This changes behavior globally for any portal that does not define the new setting.
## Issue Context
The templates use `{% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}` as an early-exit, so the default value fully controls whether images/media render.
## Fix Focus Areas
- taccsite_cms/settings/settings.py[317-323]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
## Suggested fix
Set `PORTAL_BLOG_SHOW_MAIN_IMAGE = True` as the default to preserve existing behavior, and let portals opt out by setting it to `False` in `settings_custom.py`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Hides explicit post.media 🐞 Bug ≡ Correctness

Description

In post_detail.html, the new PORTAL_BLOG_SHOW_MAIN_IMAGE guard wraps the branch that renders `{%
render_placeholder post.media %} (used when post.main_image_id` is absent), so setting the flag to
False also suppresses explicitly-authored placeholder media. This contradicts the intent
documented in settings (“main image be explicitly added”) and can remove intended content from posts
without main_image_id.

Code

taccsite_cms/templates/djangocms_blog/post_detail.html[R45-50]

+    {# TACC (setting PORTAL_BLOG_SHOW_MAIN_IMAGE): #}
+    {% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
+        <!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->
+    {% elif not post.main_image_id %}
+    {# /TACC #}
       <div class="blog-visual">{% render_placeholder post.media %}</div>

Evidence

The template’s first branch exits when the setting is false, preventing execution of the `elif not
post.main_image_id branch that renders post.media`; the settings comment indicates the goal is to
avoid automatic main image and prefer explicit media, which this ordering breaks.

taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
taccsite_cms/settings/settings.py[317-323]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`post_detail.html` currently checks `PORTAL_BLOG_SHOW_MAIN_IMAGE` before deciding whether to render either (a) the fallback placeholder media (`post.media`) or (b) the main image. With the flag set to `False`, neither renders — including explicitly-authored placeholder media.
## Issue Context
The code path for `{% render_placeholder post.media %}` is currently inside an `elif` that is unreachable when the flag is `False`.
## Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
- taccsite_cms/settings/settings.py[317-323]
## Suggested fix
Reorder conditionals so the placeholder media renders whenever `post.main_image_id` is missing, and only gate the *main image* rendering on `PORTAL_BLOG_SHOW_MAIN_IMAGE`, e.g.:

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. No-visual keeps media layout 🐞 Bug ≡ Correctness

Description

Blog list items switch to a special “no media” layout only when the article has no .blog-visual
children, but the PR’s CSS hide keeps those children in the DOM. As a result, the no-media layout
rule will not apply when no-visual is enabled, likely leaving empty media grid space/misaligned
list items.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[R82-87]

+/* To conditionally hide certain content */
.app-blog.no-tags .tags,
-.app-blog.no-categories .categories {
+.app-blog.no-categories .categories,
+.app-blog.no-visual .blog-visual {
display: none;
}

Evidence

List items always render .blog-visual with child `` elements, and the PR only hides it with
display:none. The list CSS applies the no-media layout only when :has(.blog-visual > *) is
false, which will not happen when images are merely hidden.

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[69-103]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The feed layout uses `:--news-article-item:not(:has(.blog-visual > *))` to detect when a list item has no media and apply `news-feed__article--no-media`. With `no-visual`, `.blog-visual` is hidden but still contains children, so this detection never triggers.
## Issue Context
The PR hides `.blog-visual` via `display:none`, but does not remove the markup. Existing CSS depends on DOM presence to decide layout.
## Fix Focus Areas
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css[69-103]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
## Expected fix
Preferably: stop rendering `.blog-visual` when `PORTAL_BLOG_SHOW_MAIN_IMAGE` is false (template-gated rendering). This will automatically make the `:has(.blog-visual > *)` condition false and enable the correct no-media layout.
If you must keep CSS-only hiding: add an explicit override for no-visual mode to apply the no-media layout mixin (or an equivalent grid/template adjustment) for list items when `.app-blog.no-visual` is present.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

4. Production HTML debug comments 🐞 Bug ⚙ Maintainability ⭐ New

Description

When PORTAL_BLOG_SHOW_MAIN_IMAGE is disabled, the templates emit an HTML comment into the rendered
page, adding unnecessary markup and exposing internal configuration names to clients. This occurs on
blog list items and blog detail pages whenever the flag evaluates false.

Code

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[R18-22]

+    {# TACC (setting PORTAL_BLOG_SHOW_MAIN_IMAGE): #}
+    {% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
+        <!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->
+    {% elif image and post.main_image %}
+    {# /TACC #}

Evidence

Both templates explicitly output an HTML comment in the branch where
settings.PORTAL_BLOG_SHOW_MAIN_IMAGE is false, meaning the comment will be present in the
client-delivered HTML whenever the flag is disabled.

taccsite_cms/templates/djangocms_blog/includes/blog_item.html[18-22]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-48]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Templates render HTML comments (`<!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->`) when the feature flag is off. These comments ship to production HTML and provide no user value.

### Issue Context
The comment is emitted in both the blog list item template and the blog detail template under the `if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE` branch.

### Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[18-22]
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-48]

### Suggested fix
- Remove the HTML comment lines entirely, leaving the branch empty.
- If you want to keep a hint for developers, guard it behind `settings.DEBUG` (note: `DEBUG` is exported via `SETTINGS_EXPORT`), e.g.:
 - `{% if settings.DEBUG %}<!-- ... -->{% endif %}`

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

5. Hidden images still download 🐞 Bug ➹ Performance

Description

The new no-visual mode hides .blog-visual with CSS but still renders the <img> tags in templates, so
browsers will still request/download the main/preview images. This increases bandwidth and can hurt
page performance (e.g., LCP) even though the image is not visible.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[R82-87]

+/* To conditionally hide certain content */
.app-blog.no-tags .tags,
-.app-blog.no-categories .categories {
+.app-blog.no-categories .categories,
+.app-blog.no-visual .blog-visual {
display: none;
}

Evidence

The PR adds a no-visual class and a CSS rule that hides .blog-visual, but .blog-visual still
contains `` in both the detail and list-item templates, meaning the browser will still fetch those
image URLs.

taccsite_cms/templates/djangocms_blog/base.html[31-37]
taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-52]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`PORTAL_BLOG_SHOW_MAIN_IMAGE=False` currently only applies `display:none` to `.blog-visual`, leaving `<img>` elements in the DOM and still downloading their resources.
## Issue Context
The templates always render a `.blog-visual` container with thumbnails/media, and the PR change hides it only via CSS.
## Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-52]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[17-28]
- taccsite_cms/templates/djangocms_blog/base.html[31-37]
- taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[82-87]
## Expected fix
Wrap the `.blog-visual` rendering blocks in `{% if settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}...{% endif %}` (or a more nuanced condition if some media should still show), so the element is not rendered when disabled. Then either remove the CSS hide rule or keep it as a defensive fallback.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Results up to commit 15d8e12

🐞 Bugs (4) 📘 Rule violations (0)

1. Default disables blog visuals 🐞 Bug ≡ Correctness ⭐ New

Description

PORTAL_BLOG_SHOW_MAIN_IMAGE defaults to False, and both list/detail templates treat non-True as
“do not render .blog-visual”, so portals that don’t explicitly override the new setting will lose
blog visuals site-wide. This is a behavior regression for any deployment relying on the prior
implicit default (render images when present).

Code

taccsite_cms/settings/settings.py[R320-322]

+# Whether to automatically show article image on the article page
+# FAQ: Designer consistently prefers main image be explicitely added
+PORTAL_BLOG_SHOW_MAIN_IMAGE = False

Evidence

The setting is defined with default False and is used in templates as an early guard that skips
rendering .blog-visual unless the value is True, which means visuals will be suppressed by
default for all portals.

taccsite_cms/settings/settings.py[317-323]
taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`PORTAL_BLOG_SHOW_MAIN_IMAGE` is introduced with a default of `False`, and templates suppress `.blog-visual` unless the setting is explicitly `True`. This changes behavior globally for any portal that does not define the new setting.

## Issue Context
The templates use `{% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}` as an early-exit, so the default value fully controls whether images/media render.

## Fix Focus Areas
- taccsite_cms/settings/settings.py[317-323]
- taccsite_cms/templates/djangocms_blog/includes/blog_item.html[16-33]
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]

## Suggested fix
Set `PORTAL_BLOG_SHOW_MAIN_IMAGE = True` as the default to preserve existing behavior, and let portals opt out by setting it to `False` in `settings_custom.py`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Hides explicit post.media 🐞 Bug ≡ Correctness ⭐ New

Description

In post_detail.html, the new PORTAL_BLOG_SHOW_MAIN_IMAGE guard wraps the branch that renders `{%
render_placeholder post.media %} (used when post.main_image_id` is absent), so setting the flag to
False also suppresses explicitly-authored placeholder media. This contradicts the intent
documented in settings (“main image be explicitly added”) and can remove intended content from posts
without main_image_id.

Code

taccsite_cms/templates/djangocms_blog/post_detail.html[R45-50]

+    {# TACC (setting PORTAL_BLOG_SHOW_MAIN_IMAGE): #}
+    {% if not settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
+        <!-- PORTAL_BLOG_SHOW_MAIN_IMAGE is not True -->
+    {% elif not post.main_image_id %}
+    {# /TACC #}
        <div class="blog-visual">{% render_placeholder post.media %}</div>

Evidence

The template’s first branch exits when the setting is false, preventing execution of the `elif not
post.main_image_id branch that renders post.media`; the settings comment indicates the goal is to
avoid automatic main image and prefer explicit media, which this ordering breaks.

taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
taccsite_cms/settings/settings.py[317-323]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`post_detail.html` currently checks `PORTAL_BLOG_SHOW_MAIN_IMAGE` before deciding whether to render either (a) the fallback placeholder media (`post.media`) or (b) the main image. With the flag set to `False`, neither renders — including explicitly-authored placeholder media.

## Issue Context
The code path for `{% render_placeholder post.media %}` is currently inside an `elif` that is unreachable when the flag is `False`.

## Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/post_detail.html[45-56]
- taccsite_cms/settings/settings.py[317-323]

## Suggested fix
Reorder conditionals so the placeholder media renders whenever `post.main_image_id` is missing, and only gate the *main image* rendering on `PORTAL_BLOG_SHOW_MAIN_IMAGE`, e.g.:

```django
{% if not post.main_image_id %}
 <div class="blog-visual">{% render_placeholder post.media %}</div>
{% elif settings.PORTAL_BLOG_SHOW_MAIN_IMAGE %}
 <div class="blog-visual">…thumbnail…</div>
{% endif %}
```

This preserves explicitly-added media while still allowing the “auto main image” to be suppressed.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. No-visual keeps media layout 🐞 Bug ≡ Correctness

Description

Blog list items switch to a special “no media” layout only when the article has no .blog-visual
children, but the PR’s CSS hide keeps those children in the DOM. As a result, the no-media layout
rule will not apply when no-visual is enabled, likely leaving empty media grid space/misaligned
list items.

Code

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css[R82-87]

+/* To conditionally hide certain content */
.app-blog.no-tags .tags,
-.app-blog.no-categories .categories {
+.app-blog.no-categories .categories,
+.app-blog.no-visual .blog-visual {
 display: none;
}

Evidence

List items always render .blog-visual with child `` elements, and the PR only hides it with
display:none. The list CSS applies the no-media layout only when :has(.blog-visual > *) is
false, which will not happen...

[wesleyboar]

/agentic_review

[qodo-code-review]

Persistent review updated to latest commit 15d8e12

[wesleyboar]

/agentic_review

[qodo-code-review]

Persistent review updated to latest commit e4d5a3c

[wesleyboar]

/agentic_review

[qodo-code-review]

Persistent review updated to latest commit 1813b38

[wesleyboar]

Qodo review is mostly stale (1–3, 5). 4 is not a big issue (setting is in public repo) and the comment helps dev; that is what an HTML comment is for.

/ask Qodo, why are your comments based on stale code? Are the force-pushes confusing you?

[qodo-code-review]

Persistent review updated to latest commit 1c162b3

[wesleyboar]

Qodo still reviewing out-of-date work. I reviewed with better AI on local machine as and after we worked. All good.