Template:TutorialCard - Revision history

Anthony at 00:24, 3 April 2026

2026-04-03T00:24:44Z

← Older revision		Revision as of 00:24, 3 April 2026
Line 1:		Line 1:
	<templatestyles src="TutorialCard/styles.css"/><div class="tutorial-card-wrap" data-title="{{lc:{{{name\|}}}}}" data-topic="{{lc:{{{topics\|}}}}}" data-difficulty="{{lc:{{{difficulty\|}}}}}" data-tags="{{lc:{{{tags\|}}}}}" data-page="{{urlencode:{{{pagename\|}}}\|WIKI}}"><div class="tutorial-card"><div class="tutorial-card-image">{{#if:{{{image\|}}}\|[[File:{{{image}}}\|200px\|link=]]\|<div class="tutorial-card-image-fallback">[[File:mimetypes-text-x-generic.png\|48px\|link=]]</div>}}</div><div class="tutorial-card-body"><div class="tutorial-card-title">[[{{{pagename\|}}}\|{{{name\|Tutorial}}}]]</div~~><div class="tutorial-card-meta"~~>{{#if:{{{~~topics~~\|}}}\|{{#arraymap:{{{~~topics~~\|}}}\|,\|@@\|<span class="tutorial-card-tag">@@</span>\| ~~}}\|}}{{#if:{{{difficulty\|}}}\|<span class="tutorial-card-difficulty-{{lc:{{{difficulty\|beginner}}}}}">{{{difficulty\|Beginner}~~}}</~~span~~>\|}}~~</div>~~<div class="tutorial-card-stats"><span class="tutorial-card-contributors"></span><span class="tutorial-card-updated"></span></div></div><div class="tutorial-card-description">{{{description\|}}}</div></div></div><noinclude>		<templatestyles src="TutorialCard/styles.css"/><div class="tutorial-card-wrap" data-title="{{lc:{{{name\|}}}}}" data-topic="{{lc:{{{topics\|}}}}}" data-difficulty="{{lc:{{{difficulty\|}}}}}" data-tags="{{lc:{{{tags\|}}}}}" data-page="{{urlencode:{{{pagename\|}}}\|WIKI}}"><div class="tutorial-card"><div class="tutorial-card-image">{{#if:{{{image\|}}}\|[[File:{{{image}}}\|200px\|link=]]\|<div class="tutorial-card-image-fallback">[[File:mimetypes-text-x-generic.png\|48px\|link=]]</div>}}</div><div class="tutorial-card-body"><div class="tutorial-card-title">[[{{{pagename\|}}}\|{{{name\|Tutorial}}}]]</div>{{#if:{{{tags\|}}}\|<div class="tutorial-card-meta">{{#arraymap:{{{tags\|}}}\|,\|@@\|<span class="tutorial-card-tag">@@</span>\| }}</div>\|}}<div class="tutorial-card-stats"><span class="tutorial-card-contributors"></span><span class="tutorial-card-updated"></span></div></div><div class="tutorial-card-description">{{{description\|}}}</div></div></div><noinclude>
	== TutorialCard ==		== TutorialCard ==
	Displays a visual tutorial card used inside collapsible topic sections on the [[Tutorials]] hub. Shows a cover image, tutorial name, topic tag, difficulty badge, contributor stats, and a hover description overlay.		Displays a visual tutorial card used inside collapsible topic sections on the [[Tutorials]] hub. Shows a cover image, tutorial name, topic tag, difficulty badge, contributor stats, and a hover description overlay.

Anthony: Add for Visual Editor Usage.

2026-03-23T08:30:30Z

Add <templatedata> for Visual Editor Usage.

@@ Line 7: / Line 7: @@
 '''⚠️ This template is called automatically by Cargo''' via <code>#cargo_query</code> inside [[Template:TutorialSection]]. You should not need to call it manually. See [[Template:TutorialMeta]] for how tutorials are submitted to the database.
-=== Called by Cargo — example query (inside TutorialSection) ===
+=== Called by Cargo — example query ===
 <pre>
 {{#cargo_query:
@@ Line 30: / Line 30: @@
 ; <code>image</code> : Cover image filename (e.g. <code>MyThumbnail.png</code>).
 ; <code>tags</code> : Space-separated tags used for in-section filtering.
 [[Category:Layout Templates]]
 </noinclude>

Anthony at 01:00, 18 March 2026

2026-03-18T01:00:39Z

New page

<templatestyles src="TutorialCard/styles.css"/><div class="tutorial-card-wrap" data-title="{{lc:{{{name|}}}}}" data-topic="{{lc:{{{topics|}}}}}" data-difficulty="{{lc:{{{difficulty|}}}}}" data-tags="{{lc:{{{tags|}}}}}" data-page="{{urlencode:{{{pagename|}}}|WIKI}}"><div class="tutorial-card"><div class="tutorial-card-image">{{#if:{{{image|}}}|[[File:{{{image}}}|200px|link=]]|<div class="tutorial-card-image-fallback">[[File:mimetypes-text-x-generic.png|48px|link=]]</div>}}</div><div class="tutorial-card-body"><div class="tutorial-card-title">[[{{{pagename|}}}|{{{name|Tutorial}}}]]</div><div class="tutorial-card-meta">{{#if:{{{topics|}}}|{{#arraymap:{{{topics|}}}|,|@@|<span class="tutorial-card-tag">@@</span>| }}|}}{{#if:{{{difficulty|}}}|<span class="tutorial-card-difficulty-{{lc:{{{difficulty|beginner}}}}}">{{{difficulty|Beginner}}}</span>|}}</div><div class="tutorial-card-stats"><span class="tutorial-card-contributors"></span><span class="tutorial-card-updated"></span></div></div><div class="tutorial-card-description">{{{description|}}}</div></div></div><noinclude>
== TutorialCard ==
Displays a visual tutorial card used inside collapsible topic sections on the [[Tutorials]] hub. Shows a cover image, tutorial name, topic tag, difficulty badge, contributor stats, and a hover description overlay.

Styles are loaded from [[Template:TutorialCard/styles.css]].

'''⚠️ This template is called automatically by Cargo''' via <code>#cargo_query</code> inside [[Template:TutorialSection]]. You should not need to call it manually. See [[Template:TutorialMeta]] for how tutorials are submitted to the database.

=== Called by Cargo — example query (inside TutorialSection) ===
<pre>
{{#cargo_query:
tables = Tutorials
| fields = _pageName=pagename, name, topics, difficulty, description, image, tags
| where = topics HOLDS 'Audio'
| order by = Tutorials._pageName
| limit = 500
| format = template
| template = TutorialCard
| named args = yes
| no results text =
}}
</pre>

=== Parameters (passed by Cargo via named args=yes) ===
; <code>pagename</code> : Full page name (aliased from <code>_pageName</code>). Used for the card title link.
; <code>name</code> : Tutorial display name.
; <code>topics</code> : Topic string (e.g. <code>Audio</code>). Shown as an orange tag badge.
; <code>difficulty</code> : Difficulty level. Values: <code>Beginner</code> (green), <code>Intermediate</code> (yellow), <code>Advanced</code> (red).
; <code>description</code> : Short description shown in the hover overlay.
; <code>image</code> : Cover image filename (e.g. <code>MyThumbnail.png</code>).
; <code>tags</code> : Space-separated tags used for in-section filtering.

[[Category:Layout Templates]]
</noinclude>