Configure Plan Images and Frontend Presentation
QCMM 2.0.21 lets each Plan use one image consistently on the membership catalog and Plan Details page. The Plan editor controls the image path or URL, alt text, sizing behavior, focal position, background color, and the image/content arrangement used on the Details page.
Use these controls to make imagery support the offer without hiding important content or producing unpredictable crops. The catalog card always remains a card; the left/right/above layout choice applies to the Plan Details presentation and collapses responsively on narrower screens.
Configure the Image
- Edit the Plan and open the Plan Details Page image options.
- Enter a Plan image path or URL. A full HTTP/HTTPS URL is used as entered; a root-relative path remains root-relative; a normal relative path is resolved from the Joomla site root.
- Enter useful Image alt text. If you leave it blank, QCMM falls back to the Plan title and then to a generic membership-plan description.
- Choose the sizing, focal position, optional background color, and Details-page layout, then save the Plan.
- Open both the Plans catalog and Plan Details page to inspect the real frontend result.
Choose Image Sizing
| Option | Current 2.0.21 behavior |
|---|---|
| Automatic | Uses the existing/default image behavior. |
| Fit — show entire image | Uses a contained image so the full artwork remains visible; empty space can show the configured background. |
| Fill / Crop — fill image area | Crops as necessary to fill the image frame; focal position determines which part stays emphasized. |
| Stretch — fill image area | Stretches the source to fill the frame and can distort the original proportions. |
| Original proportions | Removes the fixed card aspect treatment and keeps the image’s natural proportions. |
Choose the Focal Position
QCMM supports center, top, bottom, left, right, top-left, top-right, bottom-left, and bottom-right positioning. This setting matters most with Fill / Crop. Invalid stored values safely fall back to center.
Choose the Plan Details Layout
| Layout | Frontend result |
|---|---|
| Image left / text right | Two-column Details layout with the image at the left on wider screens. |
| Text left / image right | Two-column Details layout with the image at the right on wider screens. |
| Image above text | Stacks the image above the Details content. |
Background and Responsive Behavior
- Image background accepts a normal hexadecimal color. Invalid stored color values fall back to the built-in light background.
- Catalog card images use a responsive frame; Plan Details image frames are constrained rather than allowed to grow without limit.
- Left/right Details layouts collapse to a single column on narrower screens, so do not put critical instructions only into the image itself.
- Administrator-authored rich Overview images also remain responsive within the content area.
Accessibility and Content Guidance
- Use alt text that communicates the image purpose rather than repeating decorative filenames.
- Avoid placing essential pricing, eligibility, or legal text only inside an image; keep decision-critical information in normal Plan content.
- Preview crop behavior at both desktop and mobile widths, especially for logos or artwork with text near an edge.
- If an external image host is used, verify HTTPS availability and long-term ownership before relying on it for a live sales page.
Verify the Result
- Open the public Plans page and confirm the card image is clear and does not overwhelm the title, price, features, or action.
- Open Details and confirm the configured left/right/above layout is correct on desktop.
- Reduce the browser width and confirm the layout stacks cleanly.
- Inspect alt text with browser accessibility tools or by reviewing the rendered image markup.
- Test Fit and Fill / Crop deliberately if the source image has an unusual aspect ratio.
Community Discussion
Want to compare QCMM workflows or discuss how other Joomla site owners use this feature? Visit the QC Memberships & Meetings Community. For private support, account-specific entitlement or billing issues, or bug reports, use the QuantaCade support system.