ADP Wiki:Style Guide: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 3: | Line 3: | ||
Individual images look good when rendered at 360px wide. | Individual images look good when rendered at 360px wide. | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="wikitext"> | ||
[[File:VolumeI-Cover.jpg|360px]] [[File:VolumeI-Vinyl-Dice-Sardines-Sleeve.jpg|360px]] | [[File:VolumeI-Cover.jpg|360px]] [[File:VolumeI-Vinyl-Dice-Sardines-Sleeve.jpg|360px]] | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 17: | Line 17: | ||
Similar to images, we can display videos at 360px wide for a coherent look: | Similar to images, we can display videos at 360px wide for a coherent look: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="wikitext"> | ||
{{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}} | {{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}} | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 29: | Line 29: | ||
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: | 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=" | <syntaxhighlight lang="wikitext"> | ||
<div class="wiki-video-responsive"> | <div class="wiki-video-responsive"> | ||
{{#widget:YouTube|id=akGGOHwoyL0}} | {{#widget:YouTube|id=akGGOHwoyL0}} | ||
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...