12,297
edits
No edit summary |
No edit summary |
||
(2 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
= Creating Links to Codepen = | == Creating Links to Codepen == | ||
You currently cannot embed codepens directly into the wiki.<br> | You currently cannot embed codepens directly into the wiki.<br> | ||
Line 15: | Line 15: | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
== Get the Slug == | === Get the Slug === | ||
To embed a codepen you need its ''CODEPEN_SLUG'' which is a combination of letters and numbers.<br> | To embed a codepen you need its ''CODEPEN_SLUG'' which is a combination of letters and numbers.<br> | ||
If your codepen is located at https://codepen.io/bitcraftlab/pen/MbjKNv the username is <code>bitcraftlab</code> and your slug is <code>MbjKNv</code>. | If your codepen is located at https://codepen.io/bitcraftlab/pen/MbjKNv the username is <code>bitcraftlab</code> and your slug is <code>MbjKNv</code>. | ||
== Screenshots hosted at Codepen == | === Screenshots hosted at Codepen === | ||
With this slug you can retrieve screenshots provided by the codepen website.<br> | With this slug you can retrieve screenshots provided by the codepen website.<br> | ||
Line 33: | Line 33: | ||
Let's say, your slug is <code>MbjKNv</code>. Then the small image can be found at [https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png <nowiki>https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png</nowiki>] and the large one at [https://codepen.io/bitcraftlab/pen/MbjKNv/image/large.png <nowiki>https://codepen.io/bitcraftlab/pen/MbjKNv/image/large.png</nowiki>]. | Let's say, your slug is <code>MbjKNv</code>. Then the small image can be found at [https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png <nowiki>https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png</nowiki>] and the large one at [https://codepen.io/bitcraftlab/pen/MbjKNv/image/large.png <nowiki>https://codepen.io/bitcraftlab/pen/MbjKNv/image/large.png</nowiki>]. | ||
=== Codepen Image Link === | ==== Codepen Image Link ==== | ||
This is the simple and fast way to link to codepens | This is the simple and fast way to link to codepens. | ||
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: | ||
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] | ||
=== Codepen 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. | ||
Line 65: | Line 65: | ||
<pre>[[File:codepen-CODEPEN_SLUG.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/CODEPEN_SLUG view on codepen]]] | <pre>[[File:codepen-CODEPEN_SLUG.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/CODEPEN_SLUG view on codepen]]] | ||
</pre> | </pre> | ||
This is what it looks like in the wiki: | |||
[[File:codepen-MbjKNv.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/MbjKNv view on codepen]]] | |||
<br style="clear:both;"> | |||
That's it. | That's it. | ||
Have fun! | Have fun! |