Template:CS/products/card: Difference between revisions

Browse history interactively

← Older edit Newer edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 17:04, 26 October 2025

Check out on Etsy

Template: CS/products/card

Minimal promo card: **Image → CTA button**. Fixed width at 300px; media area uses a 2:3 (w:h) portrait frame.

Parameters

Parameter	Required	Default	Notes
`url`	yes*	—	External URL. Required unless `link` is provided.
`link`	no	—	Internal wiki link. If set, it takes precedence over `url`.
`img`	no	—	Image filename (without `File:`). If missing, a neutral placeholder is shown.
`button`	no	`Check out on Etsy`	CTA button text (passed to {{CS button}}).
`align`	no	`left`	One of `left` · `center` · `right`.
`alt`	no	`Product image`	Alt text for accessibility.

Behavior

Image links are created via the file syntax’s link= parameter (internal link preferred over external). If both are empty, the image is non‑clickable.
Card width is fixed at 300px; media area is 450px tall (2:3). The image fills the frame and crops as needed.
CTA uses {{CS button}} with mobile=full and width=100%.

Example

{{CS/products/card
 | url=https://etsy.com/
 | img=AtomicHabits.png
 | button=Check out on Etsy
}}

Troubleshooting

**Anchor showing oddly**: do not add raw <a>; the template sets the image link via link=.
**Image not full width**: pass only the filename (no File: namespace) and no explicit size; CSS handles sizing/cropping.

@@ Line 2: / Line 2: @@
 <templatestyles src="CS/products/card/styles.css"/>
 <div class="capsach-card capsach-align-{{#switch:{{lc:{{{align|left}}}}}|center=center|right=right|#default=left}}">
-  <div class="capsach-card__media">
+<div class="capsach-card__media">
+{{#if:{{{img|}}}|[[File:{{{img}}}|class=capsach-card__img|frameless|alt={{{alt|Product image}}}|link={{{link|{{{url|}}}}}}]]|<div class="capsach-card__placeholder" role="img" aria-label="{{{alt|Product image}}}"></div>}}
-    <span class="capsach-card__ratio"></span>
+</div>
-    <div class="capsach-card__media-inner">
+<div class="capsach-card__cta">{{CS button
-      {{#if:{{{img|}}}
+| url={{{url|}}}
-        | [[File:{{{img}}}|frameless|alt={{{alt|Product image}}}|link={{#if:{{{link|}}}|{{{link}}}|{{{url|}}}}}]]
+| link={{{link|}}}
-        | <div class="capsach-card__placeholder" role="img" aria-label="{{{alt|Product image}}}"></div>
+| text={{{button|Check out on Etsy}}}
-      }}
+| mobile=full
-    </div>
+| width=100%
-  </div>
+| align=left
-  <div class="capsach-card__cta">{{CS button
+}}</div>
-  | url={{{url|}}}
-  | link={{{link|}}}
-  | text={{{button|Check out on Etsy}}}
-  | mobile=full
-  | width=100%
-  | align=left
-  }}</div>
 </div>
 <noinclude>
 {{Documentation}}
 ;Template: CS/products/card
-Promo card with **Image → CTA button**. Title, badge and price have been removed.
+Minimal promo card: **Image → CTA button**. Fixed width at 300px; media area uses a 2:3 (w:h) portrait frame.
 == Parameters ==
@@ Line 43: / Line 37: @@
 == Behavior ==
-* Image links are created via the file syntax’s <code>link=</code> parameter; no raw HTML anchors are used.
+* Image links are created via the file syntax’s <code>link=</code> parameter (internal link preferred over external). If both are empty, the image is non‑clickable.
+* Card width is fixed at 300px; media area is 450px tall (2:3). The image fills the frame and crops as needed.
-* Card is 100% width on mobile and up to 480px on larger screens.
+* CTA uses {{tl|CS button}} with <code>mobile=full</code> and <code>width=100%</code>.
-* Media area enforces a **2:3 (w:h) aspect ratio**; the image fills and crops as needed.
-* If neither <code>link</code> nor <code>url</code> is provided, media is non‑clickable and the CTA renders as a non‑link (per {{tl|CS button}} behavior).
 == Example ==
@@ Line 58: / Line 51: @@
 == Troubleshooting ==
-* **Anchors showing as text**: do not use raw <code>&lt;a&gt;</code> in wikitext. This template uses image <code>link=</code>.
+* **Anchor showing oddly**: do not add raw <code>&lt;a&gt;</code>; the template sets the image link via <code>link=</code>.
-* **Image not full width**: ensure your image param is just the filename (no <code>File:</code>) and do not pass fixed sizes; CSS scales it to the card width.
+* **Image not full width**: pass only the filename (no <code>File:</code> namespace) and no explicit size; CSS handles sizing/cropping.
-* **No image available**: omit <code>img</code> to get the neutral placeholder (still sized 2:3).
 </noinclude>