Template:ProjectCard: Difference between revisions

Revision as of 00:16, 3 April 2026

Page Template:ProjectBadges/styles.css has no content.

[[|Project]]

——

ProjectCard

Displays a visual project card used on hub pages. Shows a cover image, project name, status/license badges, creator, optional custom fields, tags, and a hover description overlay. Contributor count and last-edited date are populated by MediaWiki:Gadget-projects.js.

Styles are loaded from Template:ProjectCard/styles.css.

⚠️ This template is called automatically by Cargo via #cargo_query on hub pages. You should not need to call it manually. See Template:ProjectInfobox for how projects are submitted to the database.

Called by Cargo — example query

{{#cargo_query:
  tables   = Projects
| fields   = _pageName=pagename, name, categories, status, license, creator,
             description, image, tags, field1label, field1value,
             field2label, field2value, field3label, field3value, field4label, field4value
| where    = categories HOLDS 'Audio'
| order by = Projects._pageName
| limit    = 500
| format   = template
| template = ProjectCard
| named args = yes
| no results text = <div class="project-hub-empty">No projects yet.</div>
}}

Parameters (passed by Cargo via named args=yes)

pagename: Full page name (aliased from _pageName). Used for the card title link and gadget API calls.
name: Project display name.
status: Project status. Values: Active, Hiatus, Completed, Abandoned.
license: License name shown as a badge (e.g. CC-BY-SA 4.0).
creator: Creator or team name.
description: Short description shown in the hover overlay.
image: Cover image filename (e.g. MyProject.png).
tags: Space-separated tag string.
field1label – field4label: Optional custom field labels.
field1value – field4value: Optional custom field values.

Displays a visual project card. Normally called automatically by Cargo on hub pages — see Template:ProjectInfobox for submitting projects.

Template parameters[Edit template data]
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
Page name	`pagename`	Full wiki page name of the project. Used for the card title link.	Page name	required
Project name	`name`	Display name shown on the card.	String	optional
Status	`status`	Current project status. Affects badge colour. Suggested values `Active` `Hiatus` `Completed` `Abandoned`	String	optional
License	`license`	License name shown as a badge (e.g. CC-BY-SA 4.0).	String	optional
Creator	`creator`	Creator or team name.	String	optional
Description	`description`	Short description shown in the hover overlay. Keep to 1-2 sentences.	Content	optional
Cover image	`image`	Cover image filename without File: prefix (e.g. MyProject.png).	File	optional
Tags	`tags`	Space-separated keywords used for hub filtering.	String	optional
Custom field 1 label	`field1label`	no description	String	optional
Custom field 1 value	`field1value`	no description	String	optional
Custom field 2 label	`field2label`	no description	String	optional
Custom field 2 value	`field2value`	no description	String	optional
Custom field 3 label	`field3label`	no description	String	optional
Custom field 3 value	`field3value`	no description	String	optional
Custom field 4 label	`field4label`	no description	String	optional
Custom field 4 value	`field4value`	no description	String	optional

@@ Line 1: / Line 1: @@
-<templatestyles src="ProjectCard/styles.css"/><div class="project-card-wrap" data-name="{{lc:{{{name|}}}}}" data-status="{{lc:{{{status|}}}}}" data-license="{{lc:{{{license|}}}}}" data-tags="{{lc:{{{tags|}}}}}" data-creator="{{lc:{{{creator|}}}}}" data-extra="{{lc:{{{field1label|}}} {{{field1value|}}} {{{field2label|}}} {{{field2value|}}} {{{field3label|}}} {{{field3value|}}} {{{field4label|}}} {{{field4value|}}}}}" data-page="{{urlencode:{{{pagename|}}}|PATH}}"><div class="project-card"><div class="project-card-image">{{#if:{{{image|}}}|[[File:{{{image}}}|300px|link=]]|<div class="project-card-image-fallback">[[File:places-folder.png|48px|link=]]</div>}}</div><div class="project-card-body"><div class="project-card-title">[[{{{pagename|}}}|{{{name|Project}}}]]</div><div class="project-card-badges">{{#if:{{{status|}}}|<span class="project-badge-status project-badge-status--{{lc:{{{status|active}}}}}">{{ucfirst:{{{status|Active}}}}}</span>|}}{{#if:{{{license|}}}|<span class="project-badge-license">{{{license}}}</span>|}}</div><div class="project-card-creator">{{#if:{{{creator|}}}|<span class="project-card-label">By</span> {{{creator}}}|}}</div>{{#if:{{{field1label|}}}|<div class="project-card-extra">{{{field1label}}}: <strong>{{{field1value|}}}</strong></div>|}}{{#if:{{{field2label|}}}|<div class="project-card-extra">{{{field2label}}}: <strong>{{{field2value|}}}</strong></div>|}}{{#if:{{{field3label|}}}|<div class="project-card-extra">{{{field3label}}}: <strong>{{{field3value|}}}</strong></div>|}}{{#if:{{{field4label|}}}|<div class="project-card-extra">{{{field4label}}}: <strong>{{{field4value|}}}</strong></div>|}}{{#if:{{{tags|}}}|<div class="project-card-tags" data-tags="{{{tags|}}}"></div>|}}<div class="project-card-footer"><span class="project-card-meta-item project-card-contributors" data-page="{{{pagename|}}}">—</span><span class="project-card-meta-item project-card-updated" data-page="{{{pagename|}}}">—</span></div></div><div class="project-card-description">{{{description|}}}</div></div></div><noinclude>
+<templatestyles src="ProjectCard/styles.css"/><templatestyles src="ProjectBadges/styles.css"/><div class="project-card-wrap" data-name="{{lc:{{{name|}}}}}" data-status="{{lc:{{{status|}}}}}" data-license="{{lc:{{{license|}}}}}" data-tags="{{lc:{{{tags|}}}}}" data-creator="{{lc:{{{creator|}}}}}" data-extra="{{lc:{{{field1label|}}} {{{field1value|}}} {{{field2label|}}} {{{field2value|}}} {{{field3label|}}} {{{field3value|}}} {{{field4label|}}} {{{field4value|}}}}}" data-page="{{urlencode:{{{pagename|}}}|PATH}}"><div class="project-card"><div class="project-card-image">{{#if:{{{image|}}}|[[File:{{{image}}}|300px|link=]]|<div class="project-card-image-fallback">[[File:places-folder.png|48px|link=]]</div>}}</div><div class="project-card-body"><div class="project-card-title">[[{{{pagename|}}}|{{{name|Project}}}]]</div><div class="project-card-badges">{{#if:{{{status|}}}|<span class="project-badge-status project-badge-status--{{lc:{{{status|active}}}}}">{{ucfirst:{{{status|Active}}}}}</span>|}}{{#if:{{{license|}}}|<span class="project-badge-license">{{{license}}}</span>|}}</div><div class="project-card-creator">{{#if:{{{creator|}}}|<span class="project-card-label">By</span> {{{creator}}}|}}</div>{{#if:{{{field1label|}}}|<div class="project-card-extra">{{{field1label}}}: <strong>{{{field1value|}}}</strong></div>|}}{{#if:{{{field2label|}}}|<div class="project-card-extra">{{{field2label}}}: <strong>{{{field2value|}}}</strong></div>|}}{{#if:{{{field3label|}}}|<div class="project-card-extra">{{{field3label}}}: <strong>{{{field3value|}}}</strong></div>|}}{{#if:{{{field4label|}}}|<div class="project-card-extra">{{{field4label}}}: <strong>{{{field4value|}}}</strong></div>|}}{{#if:{{{tags|}}}|<div class="project-card-tags" data-tags="{{{tags|}}}"></div>|}}<div class="project-card-footer"><span class="project-card-meta-item project-card-contributors" data-page="{{{pagename|}}}">—</span><span class="project-card-meta-item project-card-updated" data-page="{{{pagename|}}}">—</span></div></div><div class="project-card-description">{{{description|}}}</div></div></div><noinclude>
 == ProjectCard ==
 Displays a visual project card used on hub pages. Shows a cover image, project name, status/license badges, creator, optional custom fields, tags, and a hover description overlay. Contributor count and last-edited date are populated by [[MediaWiki:Gadget-projects.js]].