GMU:Tutorials/Documentation/Codepen-Howto: Difference between revisions

From Medien Wiki
(Created page with " = Creating Links to Codepen = You currently cannot embed codepens directly into the wiki.<br> However it is quite easy to create a link to codepen with a preview image. Th...")
 
No edit summary
 
(4 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>
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|thumb|left]]
[[File:codepen-MbjKNv.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/MbjKNv view on codepen]]]


<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 uson
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:


<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>
 
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.
 
Have fun!

Latest revision as of 20:26, 12 October 2018

Creating Links to Codepen

You currently cannot embed codepens directly into the wiki.
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 (image link)

small.png

Or like this (thumbnail with link)


Get the Slug

To embed a codepen you need its CODEPEN_SLUG which is a combination of letters and numbers.
If your codepen is located at https://codepen.io/bitcraftlab/pen/MbjKNv the username is bitcraftlab and your slug is MbjKNv.

Screenshots hosted at Codepen

With this slug you can retrieve screenshots provided by the codepen website.
A small screenshot is usually available at:

https://codepen.io/CODEPEN_USERNAME/pen/CODEPEN_SLUG/image/small.png

A large screenshot is usually available at:

https://codepen.io/CODEPEN_USERNAME/pen/CODEPEN_SLUG/image/large.png

Let's say, your slug is MbjKNv. Then the small image can be found at https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png and the large one at https://codepen.io/bitcraftlab/pen/MbjKNv/image/large.png.

Codepen Image Link

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:

[YOUR_CODEPEN_URL YOUR_THUMBNAIL_URL]

Let's say my username is bitcraftlab and I want to embed the codepen with the slug MbjKNv. Then the syntax goes like this:

[https://codepen.io/bitcraftlab/pen/MbjKNv https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png]

This is what it looks like:

small.png

Codepen Thumbnail with Link

You can also provide an actual thumbnail, with a link to the codepen. 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 Uploader at Wikipages > Uploads.
    • Filename: use a unique image name, I suggest codepen-CODEPEN_SLUG.png
    • License: (c) by the image uploader
    • Source: url of your codepen

Once you have uploaded the screenshot, you can embed it like this:

[[File:codepen-CODEPEN_SLUG.png|400px|thumb|left|[https://codepen.io/bitcraftlab/pen/CODEPEN_SLUG view on codepen]]]

This is what it looks like in the wiki:


That's it.

Have fun!