Opera Memphis · Graphic artwork · September 28, 2026

Graphic containers,
ratios & recommendations.

Eight promotional-artwork placements across the homepage, seasons, productions, and events. Each entry compares the current frame with its recommended fixed ratio and artwork dimensions.

Recommendations only · site unchangedMinimum artwork width: 2,500pxOne featured image for listings and detail pages

8 containers1 homepage · 3 production · 4 event placements

16:5 homepageWide promotional artwork without a tall hero

16:9 featured artShared across listings, details, and related events

Recommended export guide

Two artwork sizes. Consistent use.

Use one 16:9 featured image for each production or event across its listing cards and detail page. The homepage promotional slider uses a separate, shallower banner.

16:5 · Homepage

16:5

2,500 × 781px rounded
2,560 × 800px for exact-ratio pixels

Keep important headings and actions as live text outside the graphic on phones.

Optional shallower ratio: 16:4.5

16:4.5

2,500 × 703px rounded, or 2,560 × 720px exact. Prefer 16:5 unless a shallower banner is needed.

16:9 · Productions & events

16:9

2,500 × 1,406px rounded
2,560 × 1,440px for exact-ratio pixels

Reuse the same master in every featured-art placement. Social services may crop their previews differently.

Keep the whole graphic visible.A fixed ratio alone will not prevent clipping. Use contain, remove conflicting fixed heights, and request an uncropped image source. Existing square or unusually wide artwork may need empty space inside the frame. Never stretch it.

Recommended height = 2,500 × ratio height ÷ ratio width, rounded to the nearest pixel. The dotted inset illustrates clear space, not a guaranteed crop-safe area.

1 graphic container

Home

01Active

Homepage promotional slider

Home → Hero Slide. Measured 1,420 × 700 on desktop versus 370 × 500 on mobile; background cover crops the sides.

Current frame

No fixed ratio. Minimum heights: 700px desktop, 600px laptop, 550px tablet, 500px mobile.

Recommended frame

16:5 · 2,500 × 781px

Set the artwork frame to 16:5 at every breakpoint and remove the competing minimum heights. Show the whole graphic. Keep the mobile heading and action outside the artwork frame. The same file can serve every device; embedded fine print will still become small. A shallower 16:4.5 option is shown in the export guide.

Container references & evidence

Page 5 / listing 9121 / container 27967ed

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:5

Recommended shape
2,500 × 781px

3 graphic containers

Seasons & productions

02Active

Featured production on a season page

Single Season → Production Featured Card (Horizontal). Desktop artwork frame measured 713 × 410.

Current frame

No fixed ratio. Minimum heights 410 / 390 / 370 / 250px; width changes with the layout.

Recommended frame

16:9 · 2,500 × 1,406px

Replace the variable-height cover background with a 16:9 frame that contains the complete featured artwork. Reuse the same production featured image as the cards and single.

Container references & evidence

Template 8381 / listing 9065 / container aa76c54. Poster f166dbf is hidden at every breakpoint and is not the visible graphic.

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:9

Recommended shape
2,500 × 1,406px

03Active

Production listing cards

Single Season → upcoming and past production grids. Measured 419 × 236 desktop and 356 × 200 mobile.

Current frame

16:9, with cover fitting.

Recommended frame

16:9 · 2,500 × 1,406px

Keep the ratio, but fit the complete graphic. A mismatched 2:1 or square source still loses content when cover is used. Avoid a hard-cropped derivative.

Container references & evidence

Listing 8585 / num-production-poster 4b38482

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:9

Recommended shape
2,500 × 1,406px

04Active

Single production featured artwork

Single Production, shared by production entries. Sample measured 1,320 × 743.

Current frame

16:9, with cover fitting.

Recommended frame

16:9 · 2,500 × 1,406px

Keep 16:9 and use the same source as production listings. Switch to contain for existing art that has another shape. Current Rigoletto artwork is 2:1, so the current cover setting still crops it.

Container references & evidence

Template 5262 / om-prod-hero-poster

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:9

Recommended shape
2,500 × 1,406px

4 graphic containers

Events & calendar

05Active

Calendar list cards

Events → List view. Mobile samples include square and roughly 3:1 art.

Current frame

Desktop ≥768px: fixed 285 × 285px, or 1:1. Mobile: source-native ratio.

Recommended frame

16:9 · 2,500 × 1,406px

Use 16:9 on both desktop and mobile. Contain existing square or very wide graphics until replacement artwork is ready. Do not require a separate event-listing image.

Container references & evidence

Native TEC / .tribe-events-calendar-list__event-featured-image-wrapper; om-events.css

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:9

Recommended shape
2,500 × 1,406px

06Active

Calendar photo cards

Events → Photo view. At 388px width, sample heights were 388px and 129px.

Current frame

No fixed ratio; follows the source image.

Recommended frame

16:9 · 2,500 × 1,406px

Fix each artwork area to 16:9 with contain so differently shaped source files no longer produce inconsistent card heights.

Container references & evidence

Native TEC / .tribe-events-pro-photo__event-featured-image

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:9

Recommended shape
2,500 × 1,406px

07Active

Single event featured artwork

Native event detail page. The Shell Concert sample displayed a square image at 1,008 × 1,008.

Current frame

No fixed ratio; source-native width with automatic height.

Recommended frame

16:9 · 2,500 × 1,406px

Standardize new event graphics to 16:9. Preserve complete existing art inside the frame using contain. Replace low-resolution originals rather than enlarging them.

Container references & evidence

Native TEC / .tribe-events-event-image

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:9

Recommended shape
2,500 × 1,406px

08Active

Related event thumbnails

Related events below event detail pages. Sample square thumbnails measured 318 × 318.

Current frame

No fixed ratio; source-native proportions.

Recommended frame

16:9 · 2,500 × 1,406px

Reuse the single event featured image with a fixed 16:9 frame and contain. Do not use a different artwork export for related listings.

Container references & evidence

Native TEC / .tribe-related-events-thumbnail

Evidence: Source + rendered sample

Raster artwork: minimum 2,500px wide.

16:9

Recommended shape
2,500 × 1,406px

Scope & implementation

Apply the frame and source changes together.

This revision includes only the eight graphic containers selected for review. Current ratios and example measurements come from the September 28 configuration audit and representative desktop/mobile checks. They are not new live-site changes.

Use 16:5 for the homepage promotional slider and 16:9 for the seven production/event placements.
Update frame sizing, image fitting, and thumbnail requests together so an earlier crop does not remove part of the artwork.
Reuse each production or event’s featured image across its listings and detail page. No separate listing export is needed.
Check real artwork on phones, tablets, and desktop before publishing. Keep important wording readable as live text.

Reference: September 25 website check-in transcript, discussion of desktop/mobile graphic clipping and written image specifications. Full source identifiers and measurements remain in the notes under each container.