ADP Wiki:Style Guide: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== | == Adding Images == | ||
Individual images look good when rendered at 360px wide. | |||
<syntaxhighlight lang="wikitext"> | |||
[[File:VolumeI-Cover.jpg|360px]] [[File:VolumeI-Vinyl-Dice-Sardines-Sleeve.jpg|360px]] | |||
</syntaxhighlight> | |||
...outputs... | |||
[[File:VolumeI-Cover.jpg|360px]] [[File:VolumeI-Vinyl-Dice-Sardines-Sleeve.jpg|360px]] | |||
== Adding YouTube videos == | |||
This is done using the installed YouTube widget. Grab the video's code from its YouTube URL. | This is done using the installed YouTube widget. Grab the video's code from its YouTube URL. | ||
Similar to images, we can display videos at 360px wide for a coherent look: | |||
<syntaxhighlight> | <syntaxhighlight lang="wikitext"> | ||
{{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}} | {{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}} | ||
</syntaxhighlight> | </syntaxhighlight> | ||
...outputs... | |||
{{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}} | |||
=== Making YouTube video embeds more responsive === | |||
If we want YouTube video embeds to span the full width of the site's body text container (with a hard limit to stop it getting ridiculous on wide desktop displays), we can use this code instead: | |||
<syntaxhighlight lang="wikitext"> | |||
<div class="wiki-video-responsive"> | |||
{{#widget:YouTube|id=akGGOHwoyL0}} | |||
</div> | |||
</syntaxhighlight> | |||
...outputs... | |||
<div class="wiki-video-responsive"> | |||
{{#widget:YouTube|id=akGGOHwoyL0}} | |||
</div> | |||
Latest revision as of 16:53, 7 November 2026
Adding Images
Individual images look good when rendered at 360px wide.
[[File:VolumeI-Cover.jpg|360px]] [[File:VolumeI-Vinyl-Dice-Sardines-Sleeve.jpg|360px]]
...outputs...
Adding YouTube videos
This is done using the installed YouTube widget. Grab the video's code from its YouTube URL.
Similar to images, we can display videos at 360px wide for a coherent look:
{{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}}
...outputs...
Making YouTube video embeds more responsive
If we want YouTube video embeds to span the full width of the site's body text container (with a hard limit to stop it getting ridiculous on wide desktop displays), we can use this code instead:
<div class="wiki-video-responsive">
{{#widget:YouTube|id=akGGOHwoyL0}}
</div>
...outputs...