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

From Medien Wiki
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!

Revision as of 14:55, 16 November 2016

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

That's it. Have fun!