image block with custom variant

[petheanraj-mitrah]

Description

Image block with custom variant(medium and background color)

Jira

https://jira.corp.adobe.com/browse/DEVSITE-2519

Test URL

https://devsite-2519--adp-devsite-stage--adobedocs.aem.page/test/petheanraj/image

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 227d68a ✅ (latest)

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/test/petheanraj/image
🖥️	/test/petheanraj/image

[github-actions]

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests

📁 test/blocks/code/code.test.js:

❌ Code block > code > data-playground attributes from class
      AssertionError: expected null to equal 'code-session'
        at n.<anonymous> (test/blocks/code/code.test.js:29:63)


📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab-playground.test.js:

❌ Tab block playground metadata > extracts data-playground attributes via decoratePreformattedCode
      AssertionError: expected null to equal 'tab-session'
        at n.<anonymous> (test/blocks/tab/tab-playground.test.js:17:63)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)

Test Coverage Report

Overall Coverage Summary

Metric	Percentage	Coverage
Statements	57.05%	3906/6846
Branches	85.12%	561/659
Functions	52%	130/250
Lines	57.05%	3906/6846

Coverage by File/Directory

File	Statements	Branches	Functions	Lines
blocks/accordion	96.73%	100%	100%	96.73%
blocks/announcement	76.69%	60%	100%	76.69%
blocks/banner	94.28%	62.5%	100%	94.28%
blocks/cards	92.04%	90%	100%	92.04%
blocks/carousel	77.8%	82.35%	71.42%	77.8%
blocks/code	81.81%	60%	100%	81.81%
blocks/columns	62.59%	75%	100%	62.59%
blocks/contributors	84.23%	56%	100%	84.23%
blocks/edition	91.37%	57.14%	100%	91.37%
blocks/fragment	17.03%	100%	0%	17.03%
blocks/image-text	57.5%	55.55%	100%	57.5%
blocks/info	96.87%	100%	100%	96.87%
blocks/info-card	100%	100%	100%	100%
blocks/info-columns	75%	100%	100%	75%
blocks/list	59.09%	85.71%	100%	59.09%
blocks/mini-resource-card	98%	87.5%	100%	98%
blocks/product-card	78.57%	94.11%	100%	78.57%
blocks/profile-card	96.29%	100%	100%	96.29%
blocks/site-hero	93.93%	80%	100%	93.93%
blocks/summary	98.36%	88.88%	100%	98.36%
blocks/tab	93.25%	96.87%	100%	93.25%
blocks/table	100%	84.61%	100%	100%
blocks/text	50%	83.33%	50%	50%
blocks/title	84%	66.66%	100%	84%
components	43.52%	66.66%	53.84%	43.52%
scripts	48.76%	95.23%	42.55%	48.76%

---

Coverage report generated at 2026-08-12T11:40:52.907Z

[davids-ensemble]

A few changes I would want to see implemented:

• let's call it "Standalone Image" instead of just "Image"
• let's require a caption:
  • second row in the table or similar
  • hide the caption by default (display: none)
  • generate and set an id on the caption
  • add aria-labelledby referencing that id value to the image

Main reason for this is to align it with DevDocs' Image Block

In the future, if anyone will require it, we can offer an option to show the caption as well.

[davids-ensemble]

CSS nesting