Template:Boilerplate-ProductPage: Difference between revisions

[checked revision]

← Older edit

VisualWikitext

Latest revision as of 01:38, 22 May 2026

Boilerplate for product pages.

SOJI Electronics

@@ Line 1: / Line 1: @@
 <noinclude>
-== Product Page Template ==
+Boilerplate for product pages.
+[[Category:Boilerplates]]
-Usage on a product page (e.g., page named "LIGO PRO"):
+</noinclude><includeonly><div class="product-page-desc"><section begin="product-desc" />{{Placeholder|Brief description of {{subst:PAGENAME}}}}<section end="product-desc" /></div>
+<div style="display: flex; gap: 24px; align-items: flex-start;">
-{{ProductPage}}
-The template auto-uses the current page name for:
-* All sub-page links (Datasheet, User Guide, etc.)
-* Image filename convention: '''{{PAGENAME}}-Product.png'''
-To set product image: upload your image via [[Special:Upload]] with filename matching
-this pattern (e.g., for page "LIGO PRO", upload as "LIGO PRO-Product.png").
-The template will automatically display it. If not uploaded, a default icon shows
-with a hint to upload.
-To set description: after placing {{ProductPage}} on the page, the yellow placeholder
-hint will show. Replace it by editing the page and adding your description text
-'''above''' the {{ProductPage}} template call.
-{{TemplateData
-|description=Product hub page template. No parameters — auto-uses current page name.
-}}
-[[Category:Templates]]
-</noinclude><includeonly><div style="display: flex; gap: 24px; align-items: flex-start;">
 <div style="flex: 1;">
-{{Placeholder|e.g., Brief description of {{PAGENAME}}: what it is, primary function, key features, target use case. Edit this page to replace this hint with your actual product description (1–2 paragraphs).}}
+* [[{{subst:PAGENAME}} Datasheet|Datasheet]]
+* [[{{subst:PAGENAME}} User Guide|User Guide]]
-* [[{{PAGENAME}} Datasheet|Datasheet]]
+* [[{{subst:PAGENAME}} Certification & Approvals|Certifications & Approvals]]
-* [[{{PAGENAME}} User Guide|User Guide]]
+* [[{{subst:PAGENAME}} Product Change Notifications|Product Change Notifications]]
-* [[{{PAGENAME}} Certification & Approvals|Certifications & Approvals]]
+* [[{{subst:PAGENAME}} Firmware Changelog|Firmware Changelog]]
-* [[{{PAGENAME}} Product Change Notifications|Product Change Notifications]]
+* [[{{subst:PAGENAME}} Promotional Material|Promotional Material]]
-* [[{{PAGENAME}} Firmware Changelog|Firmware Changelog]]
+* [[{{subst:PAGENAME}} Video|Video]]
-* [[{{PAGENAME}} Promotional Material|Promotional Material]]
+* <span class="protocol-link">[[Media:{{#replace:{{subst:PAGENAME}}| |-}}-Protocol.pdf | Protocol]]</span>
-* [[{{PAGENAME}} Video|Video]]
 </div>
 <div style="flex: 0 0 320px;">
-[[File:LIGO-AIR-product-overview.png|320px|center|LIGO AIR]]
+{{#ifexist: File:{{#replace:{{subst:PAGENAME}}| |-}}-Product-overview.png
-<div style="text-align: center; font-size: 0.9em; color: #54595d; margin-top: 4px;">LIGO AIR</div>
+| <div style="width: 320px; height: 320px; border: 1px solid #c8ccd1; border-radius: 8px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+[[File:{{#replace:{{subst:PAGENAME}}| |-}}-Product-overview.png|320px|frameless|{{subst:PAGENAME}}]]
+</div>
+| <div style="width: 320px; height: 320px; border: 2px dashed #c8ccd1; border-radius: 8px; background: #f8f9fa; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; text-align: center; color: #54595d;">
+<div style="font-size: 2.5em; color: #c8ccd1; margin-bottom: 8px;">📷</div>
+<div style="font-weight: bold; font-size: 1em; color: #202122; margin-bottom: 12px;">No image available</div>
+<div style="font-size: 0.85em; line-height: 1.5; margin-bottom: 12px;">
+Please upload an image named:
+<br><code style="background: #eaecf0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; word-break: break-all;">{{#replace:{{subst:PAGENAME}}| |-}}-Product-overview.png</code>
+</div>
+<div style="font-size: 0.8em; color: #72777d; margin-bottom: 12px;">
+Recommended size: '''320 × 320 px''' (1:1 ratio)<br>
+Format: PNG with transparent background
+</div>
+<div style="margin-top: 6px;">
+[[Special:Upload|<span style="background: #0054A6; color: white; padding: 6px 14px; border-radius: 4px; font-size: 0.85em; text-decoration: none; display: inline-block;">⬆ Upload image</span>]]
+</div>
+</div>
+}}
+<div style="text-align: center; font-size: 0.9em; color: #54595d; margin-top: 8px;">{{subst:PAGENAME}}</div>
 </div>
 </div>
 [[Category:Main Page]]
+[[Category:Products]]
 </includeonly>