emailconfirmed
1,824
edits
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
However it is quite easy to create a link to codepen with a preview image. | However it is quite easy to create a link to codepen with a preview image. | ||
This tutorial shows to create previews that look like this | This tutorial shows to create previews that look like this (image link) | ||
[https://codepen.io/bitcraftlab/pen/MbjKNv https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png] | [https://codepen.io/bitcraftlab/pen/MbjKNv https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png] | ||
Or like this | Or like this (thumbnail with link) | ||
[[File:codepen-MbjKNv.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/MbjKNv view on codepen]]] | [[File:codepen-MbjKNv.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/MbjKNv view on codepen]]] | ||
Line 38: | Line 38: | ||
If you know your codepen slug you can easily create a image link using the thumbnail hosted at codepen using this syntax: | If you know your codepen slug you can easily create a image link using the thumbnail hosted at codepen using this syntax: | ||
<code><nowiki> [YOUR_CODEPEN_URL YOUR_THUMBNAIL_URL]</nowiki></code> | <code><nowiki> [YOUR_CODEPEN_URL YOUR_THUMBNAIL_URL]</nowiki></code> | ||
Let's say my username is ''bitcraftlab'' and I want to embed the codepen with the slug ''MbjKNv''. | Let's say my username is ''bitcraftlab'' and I want to embed the codepen with the slug ''MbjKNv''. | ||
Line 48: | Line 48: | ||
[https://codepen.io/bitcraftlab/pen/MbjKNv https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png] | [https://codepen.io/bitcraftlab/pen/MbjKNv https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png] | ||
=== Thumbnail with Link === | === Codepen Thumbnail with Link === | ||
You can also provide an actual thumbnail, with a link to the codepen. | You can also provide an actual thumbnail, with a link to the codepen. | ||
This is more cumbersome, but looks nicer. | This is more cumbersome, because you need to upload the screenshot to our wiki, but it sure looks nicer. | ||
This is how you do it: | |||
* Download the screenshot from codepen, or make one yourself | |||
* Upload the screenshot to the wiki using the [[Special:Upload|Uploader]] at Wikipages > Uploads. | |||
** Filename: use a unique image name, I suggest <code>codepen-CODEPEN_SLUG.png</code> | |||
** License: (c) by the image uploader | |||
** Source: url of your codepen | |||
Once you have uploaded the screenshot, you can embed it like this: | |||
<pre>[[File:codepen-CODEPEN_SLUG.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/CODEPEN_SLUG view on codepen]]] | |||
</pre> | |||
That's it. | |||
Have fun! |