Revisions
-
plfstr revised this gist
Oct 21, 2015 . 1 changed file with 1 addition and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,3 @@ # Codepen extension for Kirby 2 This project ‘[kirbytag-codepen](https://github.com/plfstr/kirbytag-codepen)’ is now hosted over on GitHub: https://github.com/plfstr/kirbytag-codepen -
plfstr revised this gist
Oct 15, 2015 . 2 changed files with 3 additions and 91 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,37 +0,0 @@ This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,56 +1,5 @@ # Codepen extension for Kirby 2 This project ‘[kirbytag-codepen](https://github.com/plfstr/kirbytag-codepen)’ is now hosted over on GitHub: https://github.com/plfstr/kirbytag-codepen (Heads up - @julianlengfelder, @netzhoerer, @float-mode, @scheibome) -
plfstr revised this gist
Jul 22, 2015 . 1 changed file with 0 additions and 21 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,21 +0,0 @@ -
plfstr revised this gist
Jul 22, 2015 . 1 changed file with 21 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,21 @@ The MIT License (MIT) Copyright (c) 2014 Paul Foster Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -
plfstr revised this gist
Nov 4, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -53,4 +53,4 @@ _**Note:** Amending this value will change the theme of ALL your CodePen embeds **** **Update** Updated to include new support for CodePen iframe classes see [Parameters](#parameters) section or read about [the class feature](http://blog.codepen.io/2014/10/31/add-class-name-embed-iframe/). -
plfstr revised this gist
Nov 4, 2014 . 2 changed files with 22 additions and 5 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,7 @@ kirbytext::$tags['codepen'] = array( 'attr' => array( 'height', 'type', 'class' ), 'html' => function($tag) { @@ -19,12 +19,15 @@ // Accept Pen type overide or use result as default $result = $tag->attr('type', 'result'); // Set a class on the CodePen iframe $penclass = $tag->attr('class', ''); // Set default theme-id embed theme (About embed themes: http://blog.codepen.io/2013/07/23/the-new-embed-builder-customize-every-aspect/) $theme = ""; // Add your theme-id value here. Uses standard CodePen embed theme by default if left blank. // Builds Pen HTML output $html = '<figure class="code-container">'; $html .= '<pre class="codepen" data-theme-id="'. $theme .'" data-height="'. $height .'" data-type="'. $result .'" data-slug-hash="'. $array[2] .'" data-user="'. $array[1] .'" data-class="'. $penclass .'"><code></code></pre>'; $html .= '<script async src="http://codepen.io/assets/embed/ei.js"></script></figure>'; return $html; This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -30,13 +30,27 @@ You can supply additional parameters in the tag to override the _height_ (500 = ``` (codepen: http://codepen.io/chriscoyier/pen/oqHlh/ height: 250 type: html) ``` You can specify an additional class which will apply to the CodePen iframe. ``` (codepen: http://codepen.io/chriscoyier/pen/oqHlh/ class: picked-pen) ``` This should be considered for adding custom styles to specific Pens. _To apply a theme to all Pens, see next section._ ### Default Theme _**This is a more advanced option and not essential, CodePen embeds will use the default CodePen theme style by default.**_ If you are a CodePen user, pen themes enable you to [create a theme style](http://blog.codepen.io/2013/07/23/the-new-embed-builder-customize-every-aspect/) for your embedded Pens. _**Note**: Changing the default theme requires editing codepen.php file directly_ To change from the default CodePen theme to your personal embed theme, open `site/tags/codepen.php` and edit the `$theme = '';` value, to your theme (data-theme-id) value. You can find your Theme ID in the standard embed code from the ‘Share’ option in any Pen. Look for the `data-theme-id` value. _**Note:** Amending this value will change the theme of ALL your CodePen embeds using this Kirby extension._ **** **Update** Updated to include new support for CodePen iframe classes see Parameters section or read about [the class feature](http://blog.codepen.io/2014/10/31/add-class-name-embed-iframe/). -
plfstr revised this gist
Oct 22, 2014 . No changes.There are no files selected for viewing
-
plfstr revised this gist
Oct 22, 2014 . 3 changed files with 51 additions and 64 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,34 @@ <?php kirbytext::$tags['codepen'] = array( 'attr' => array( 'height', 'type' ), 'html' => function($tag) { $source = $tag->attr('codepen'); if( !preg_match('!codepen.io\/([a-z0-9A-Z_-]+)\/pen\/([a-z0-9_-]+)!i', $source, $array) ) { return false; } // Set default Pen height or use 350 default $height = $tag->attr('height', '350'); // Accept Pen type overide or use result as default $result = $tag->attr('type', 'result'); // Set default theme-id embed theme (About embed themes: http://blog.codepen.io/2013/07/23/the-new-embed-builder-customize-every-aspect/) $theme = ""; // Add your theme-id value here. Uses standard CodePen embed theme by default if left blank. // Builds Pen HTML output $html = '<figure class="code-container">'; $html .= '<pre class="codepen" data-theme-id="'. $theme .'" data-height="'. $height .'" data-type="'. $result .'" data-slug-hash="'. $array[2] .'" data-user="'. $array[1] .'"><code></code></pre>'; $html .= '<script async src="http://codepen.io/assets/embed/ei.js"></script></figure>'; return $html; } ); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,46 +0,0 @@ This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,43 +1,42 @@ # Codepen extension for Kirby 2 (fork of [Kirbytext Codepen tag](https://gist.github.com/ClementRoy/5024929) by ClementRoy) This extension for Kirby 2 enables you to easily embed CodePen ‘Pens’ into your sites pages. ``` (codepen: http://codepen.io/chriscoyier/pen/oqHlh/) ``` Kirby 2 allows Kirbytext (Kirbys custom implementation of Mark Down) to be extended with custom ‘Kirbytags’. _[More about Kirbytags](http://getkirby.com/docs/advanced/kirbytext)_. _Sorry, not backwards compatible with Kirby 1. [Kirbytext Codepen tag](https://gist.github.com/ClementRoy/5024929) by ClementRoy is compatible._ ## Installation Place `codepen.php` in your `/site/tags/` folder, or create a ‘tags’ folder inside your site folder if one is not there. ## Usage Now in your content text files you can now use the new codepen tag: ``` (codepen: http://codepen.io/chriscoyier/pen/oqHlh/) ``` This will embed the specified Pen using a default height and styled with the standard CodePen embed theme. ### Parameters You can supply additional parameters in the tag to override the _height_ (500 = 500px height embed) or _type_ (html, css result displayed). ``` (codepen: http://codepen.io/chriscoyier/pen/oqHlh/ height: 250 type: html) ``` ### Default Theme _(requires editing codepen.php)_ If you are a CodePen user, pen themes enable you to [create a theme style](http://blog.codepen.io/2013/07/23/the-new-embed-builder-customize-every-aspect/) for your embedded Pens. To change from the default CodePen theme to your personal embed theme, open `site/tags/codepen.php` and edit the `$theme = '';` value, to your theme (data-theme-id) value. _**Note:** Amending this value will change the theme of ALL your CodePen embeds using this Kirby extension._ If `$theme` value not edited, CodePen embeds will use the default CodePen theme style. -
ClementRoy revised this gist
Feb 24, 2013 . 1 changed file with 9 additions and 13 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,7 @@ This extension for Kirbytext will make it possible to use ``` (codepen: http://codepen.io/CBeghin/pen/HeuiF) ``` @@ -13,20 +13,17 @@ Put `kirbytext.extended.php` in your `site/plugins` folder (or edit it) ## Usage In your content text files you can now use the new codepen tag: ``` (codepen: http://codepen.io/CBeghin/pen/HeuiF) ``` ### Parameters ``` (codepen: codepen_path height: xxx type: xxx) ``` Feel free to change the `$defaults` array in `kirbytext.extended.php` to add the values which fit best to your project. @@ -35,13 +32,12 @@ Feel free to change the `$defaults` array in `kirbytext.extended.php` to add the // customize this: $defaults = array( 'height' => '300', 'type' => 'result' ); ``` Those defaults will make it possible to use the codepen tag without specifying all the attributes. -
ClementRoy revised this gist
Feb 24, 2013 . 1 changed file with 47 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,47 @@ # Codepen extension for Kirbytext This extension for Kirbytext will make it possible to use ``` (: http://codepen.io/CBeghin/pen/HeuiF) ``` ## Installation Put `kirbytext.extended.php` in your `site/plugins` folder (or edit it) ## Usage In your content text files you can now use the new dailymotion tag: ``` (dailymotion: http://www.dailymotion.com/video/xnhtlb_somebody-that-i-used-to-know-walk-off-the-earth-gotye-cover_music) ``` `http://www.dailymotion.com/video/xnhtlb_somebody-that-i-used-to-know-walk-off-the-earth-gotye-cover_music` is just the url of the video, you can use the embed url direclty too `http://www.dailymotion.com/embed/video/xnhtlb` ### Parameters You can pass all parameters, which are also available for the dailymotion plugin: ``` (dailymotion: video_path width: xxx height: xxx class: xxx) ``` Feel free to change the `$defaults` array in `kirbytext.extended.php` to add the values which fit best to your project. ``` // customize this: $defaults = array( 'width' => c::get('kirbytext.video.width'), 'height' => c::get('kirbytext.video.height'), 'class' => '' ); ``` Those defaults will make it possible to use the dailymotion tag without specifying all the attributes. -
ClementRoy renamed this gist
Feb 24, 2013 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -12,7 +12,7 @@ function __construct($text, $markdown=true) { } function codepen($params) { // http://codepen.io/CBeghin/pen/BJrmq $source = $params['codepen']; -
ClementRoy created this gist
Feb 24, 2013 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,46 @@ <?php class kirbytextExtended extends kirbytext { function __construct($text, $markdown=true) { parent::__construct($text, $markdown); $this->addTags('codepen'); $this->addAttributes('type'); } function codepen($params) { // http://codepen.io/CBeghin/pen/BJrmq $source = $params['codepen']; if( !preg_match('!codepen.io\/([a-z0-9A-Z_-]+)\/pen\/([a-z0-9_-]+)!i', $source, $array ) ) { return false; } // define default values for attributes $defaults = array( 'height' => '300', 'type' => 'result' ); // merge the given parameters with the default values $options = array_merge($defaults, $params); $availableTypes = array('result', 'html', 'css', 'js'); $defaultType = 'result'; if( !in_array($options['type'], $availableTypes) ){ $options['type'] = $defaultType; } return '<div class="code-container"><pre class="codepen" data-height="'.$options['height'].'" data-type="'.$options['type'].'" data-href="'.$array[2].'" data-user="'.$array[1].'" data-safe="false"><code></code></pre><script async src="http://codepen.io/assets/embed/ei.js"></script></div>'; } } ?>