Skip to content

Instantly share code, notes, and snippets.

@plfstr
Forked from ClementRoy/kirbytext.extended.php
Last active October 21, 2015 10:14

Revisions

  1. plfstr revised this gist Oct 21, 2015. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions readme.md
    Original 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

    (Heads up - @julianlengfelder, @netzhoerer, @float-mode, @scheibome)
    This project ‘[kirbytag-codepen](https://github.com/plfstr/kirbytag-codepen)’ is now hosted over on GitHub: https://github.com/plfstr/kirbytag-codepen
  2. plfstr revised this gist Oct 15, 2015. 2 changed files with 3 additions and 91 deletions.
    37 changes: 0 additions & 37 deletions codepen.php
    Original file line number Diff line number Diff line change
    @@ -1,37 +0,0 @@
    <?php

    kirbytext::$tags['codepen'] = array(

    'attr' => array(
    'height', 'type', 'class'
    ),
    '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 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;

    }

    );
    57 changes: 3 additions & 54 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -1,56 +1,5 @@
    # Codepen extension for Kirby 2 (fork of [Kirbytext Codepen tag](https://gist.github.com/ClementRoy/5024929) by ClementRoy)
    # Codepen extension for Kirby 2

    This extension for Kirby 2 enables you to easily embed CodePen ‘Pens’ into your sites pages.
    This project ‘[kirbytag-codepen](https://github.com/plfstr/kirbytag-codepen)’ is now hosted over on GitHub: https://github.com/plfstr/kirbytag-codepen

    ```
    (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)
    ```
    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](#parameters) section or read about [the class feature](http://blog.codepen.io/2014/10/31/add-class-name-embed-iframe/).
    (Heads up - @julianlengfelder, @netzhoerer, @float-mode, @scheibome)
  3. plfstr revised this gist Jul 22, 2015. 1 changed file with 0 additions and 21 deletions.
    21 changes: 0 additions & 21 deletions LICENSE
    Original file line number Diff line number Diff line change
    @@ -1,21 +0,0 @@
    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.
  4. plfstr revised this gist Jul 22, 2015. 1 changed file with 21 additions and 0 deletions.
    21 changes: 21 additions & 0 deletions LICENSE
    Original 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.
  5. plfstr revised this gist Nov 4, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    Original 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 section or read about [the class feature](http://blog.codepen.io/2014/10/31/add-class-name-embed-iframe/).
    **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/).
  6. plfstr revised this gist Nov 4, 2014. 2 changed files with 22 additions and 5 deletions.
    7 changes: 5 additions & 2 deletions codepen.php
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    kirbytext::$tags['codepen'] = array(

    'attr' => array(
    'height', 'type'
    '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] .'"><code></code></pre>';
    $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;
    20 changes: 17 additions & 3 deletions readme.md
    Original 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.

    ### Default Theme _(requires editing codepen.php)_
    ```
    (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.

    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**: 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._

    If `$theme` value not edited, CodePen embeds will use the default CodePen theme style.
    ****

    **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/).
  7. plfstr revised this gist Oct 22, 2014. No changes.
  8. plfstr revised this gist Oct 22, 2014. 3 changed files with 51 additions and 64 deletions.
    34 changes: 34 additions & 0 deletions codepen.php
    Original 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;

    }

    );
    46 changes: 0 additions & 46 deletions kirbytext.extended.php
    Original file line number Diff line number Diff line change
    @@ -1,46 +0,0 @@
    <?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>';

    }

    }

    ?>
    35 changes: 17 additions & 18 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -1,43 +1,42 @@
    # Codepen extension for Kirbytext
    # Codepen extension for Kirby 2 (fork of [Kirbytext Codepen tag](https://gist.github.com/ClementRoy/5024929) by ClementRoy)

    This extension for Kirbytext will make it possible to use
    This extension for Kirby 2 enables you to easily embed CodePen ‘Pens’ into your sites pages.

    ```
    (codepen: http://codepen.io/CBeghin/pen/HeuiF)
    (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

    Put `kirbytext.extended.php` in your `site/plugins` folder (or edit it)
    Place `codepen.php` in your `/site/tags/` folder, or create a ‘tags’ folder inside your site folder if one is not there.

    ## Usage

    In your content text files you can now use the new codepen tag:
    Now in your content text files you can now use the new codepen tag:

    ```
    (codepen: http://codepen.io/CBeghin/pen/HeuiF)
    (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: codepen_path height: xxx type: xxx)
    (codepen: http://codepen.io/chriscoyier/pen/oqHlh/ height: 250 type: html)
    ```

    Feel free to change the `$defaults` array in `kirbytext.extended.php` to add the values which fit best to your project.

    ```
    ### Default Theme _(requires editing codepen.php)_

    // customize this:
    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.

    $defaults = array(
    'height' => '300',
    'type' => 'result'
    );
    ```
    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.

    Those defaults will make it possible to use the codepen tag without specifying all the attributes.
    _**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.
  9. @ClementRoy ClementRoy revised this gist Feb 24, 2013. 1 changed file with 9 additions and 13 deletions.
    22 changes: 9 additions & 13 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    This extension for Kirbytext will make it possible to use

    ```
    (: http://codepen.io/CBeghin/pen/HeuiF)
    (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 dailymotion tag:
    In your content text files you can now use the new codepen tag:

    ```
    (dailymotion: http://www.dailymotion.com/video/xnhtlb_somebody-that-i-used-to-know-walk-off-the-earth-gotye-cover_music)
    (codepen: http://codepen.io/CBeghin/pen/HeuiF)
    ```

    `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)
    (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(
    'width' => c::get('kirbytext.video.width'),
    'height' => c::get('kirbytext.video.height'),
    'class' => ''
    );
    $defaults = array(
    'height' => '300',
    'type' => 'result'
    );
    ```

    Those defaults will make it possible to use the dailymotion tag without specifying all the attributes.
    Those defaults will make it possible to use the codepen tag without specifying all the attributes.

  10. @ClementRoy ClementRoy revised this gist Feb 24, 2013. 1 changed file with 47 additions and 0 deletions.
    47 changes: 47 additions & 0 deletions readme.md
    Original 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.

  11. @ClementRoy ClementRoy renamed this gist Feb 24, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.php → kirbytext.extended.php
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ function __construct($text, $markdown=true) {
    }


    function codepen($params) {
    function codepen($params) {

    // http://codepen.io/CBeghin/pen/BJrmq
    $source = $params['codepen'];
  12. @ClementRoy ClementRoy created this gist Feb 24, 2013.
    46 changes: 46 additions & 0 deletions gistfile1.php
    Original 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>';

    }

    }

    ?>