GMU:Tutorials/Documentation/Codepen-Howto - Revision history

Max at 20:26, 12 October 2018

2018-10-12T20:26:29Z

← Older revision		Revision as of 20:26, 12 October 2018
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.
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.

Ms: /* Screenshots hosted at Codepen */

2016-11-16T18:42:14Z

Screenshots hosted at Codepen

← Older revision		Revision as of 18:42, 16 November 2016
Line 35:		Line 35:
	=== 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:

Ms: /* Creating Links to Codepen */

2016-11-16T15:16:51Z

Creating Links to Codepen

← Older revision		Revision as of 15:16, 16 November 2016
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!

Ms at 14:55, 16 November 2016

2016-11-16T14:55:34Z

← Older revision		Revision as of 14:55, 16 November 2016
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!

Ms at 14:45, 16 November 2016

2016-11-16T14:45:06Z

← Older revision		Revision as of 14:45, 16 November 2016
Line 11:		Line 11:
	Or like this:		Or like this:

	[[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;">

Ms: Created page with " = 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. Th..."

2016-11-16T14:38:29Z

Created page with " = 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. Th..."

New page

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

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

Or like this:

[[File:codepen-MbjKNv.png|thumb|left]]

 

== 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 <code>bitcraftlab</code> and your slug is <code>MbjKNv</code>.

== Screenshots hosted at Codepen ==

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

<code><nowiki>https://codepen.io/CODEPEN_USERNAME/pen/CODEPEN_SLUG/image/small.png</nowiki></code>

A large screenshot is usually available at:

<code><nowiki>https://codepen.io/CODEPEN_USERNAME/pen/CODEPEN_SLUG/image/large.png</nowiki></code>

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 ===

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:

<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''.
Then the syntax goes like this:
<pre>[https://codepen.io/bitcraftlab/pen/MbjKNv https://codepen.io/bitcraftlab/pen/MbjKNv/image/small.png]</pre>

This is what it looks like:

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

=== Thumbnail with Link ===

You can also provide an actual thumbnail, with a link to the codepen.
This is more cumbersome, but looks nicer.