This plugin provides easier-than-ever embedding of content from various sites and services. Works with both CMS Pages and Static Pages.
This plugin is optimized to work with the Static Pages plugin. Every component this plugin provides will also be registered as a snippet. This makes it super easy to embed things on a static page with the rich editor. This makes it really easy for even end-users or clients to do embedding - without a line of code!
Click the Documentation tab for more detailed information about this plugin and its components.
Supported Providers:
- CodePen
- Flickr
- GitHub Gist
- Google Maps
- Google Plus
- Imgur
- jsFiddle
- Kickstarter
- SoundCloud
- Spotify
- Vimeo
- Vine
- YouTube
Plugin for OctoberCMS which provides easier-than-ever embedding of content from various sites and services. Optimized for Static Pages. See the Supported Providers list.
Installation
OctoberCMS Backend:
Go to the plugin installation page. Search for Krisawzm.Embed and install the plugin.
Command Line:
$ php artisan plugin:install Krisawzm.Embed
Usage
Each provider is a component. Simply drag and drop any component in to a CMS page, partial, layout or content file. Then click on the component to configure its properties.
This plugin is optimized to work with the Static Pages plugin. Every component this plugin provides will also be registered as a snippet. This makes it super easy to embed things on a static page with the rich editor. This makes it really easy for even end-users or clients to do embedding - without a line of code!
Simply open a page, then click on Snippets in the menu. Select any snippet. Now click on the new snippet to configure its properties.
Plugin Settings
This plugin ships with a settings page. Go to Settings and you will see a menu item Embed listed under Misc.
By default every component will be enabled. This is in most cases unnecessary. Instead, it is recommended to only enable the components you will be needing. To do so, set the Mode to either Use all except the following Embeds: or Use only the following Embeds: -- then specify a comma separated list of component names in the text box under.
Supported Providers
- CodePen
- Flickr
- GitHub Gist
- Google Maps
- Google Plus
- Imgur
- jsFiddle
- Kickstarter
- SoundCloud
- Spotify
- Vimeo
- Vine
- YouTube
Component Details
CodePen
| Property | Description |
|---|---|
| Pen | The Pen ID or the full URL copied from the browser address bar. Example: https://codepen.io/stessyco/pen/noDCi |
| Default Tab | Select which tab shows up by default. Options: Result HTML JS CSS |
| Widget Height | Height of the widget specified in pixels. Default: 268 |
Flickr
Embed any Flickr URL. This includes links to photos, albums and user profiles.
| Property | Description |
|---|---|
| URL | The full Flickr.com URL. |
| Widget Width | Width of the widget specified in pixels. Default: 640 |
| Widget Height | Height of the widget specified in pixels. Default: 426 |
| Responsiveness | Click here for details. Default: False |
GitHub Gist
| Property | Description |
|---|---|
| Gist | The gist ID or full URL. It is recommended to include the username. Eg: kalfheim/0db0766c46a465bb40e8 or https://gist.github.com/kalfheim/0db0766c46a465bb40e8 |
Google Maps
| Property | Description |
|---|---|
| Place | The place you want to display on the Map. Accepts any Google Maps search query. Eg: Oslo, Norway |
| Map Type | Type of map to display. Options: Roadmap Satellite |
| Widget Width | Width of the widget specified in pixels. Default: 600 |
| Widget Height | Height of the widget specified in pixels. Default: 450 |
Important note: The Google Maps component requires a API key. Get your key from Google Developers and register it in the settings page.
Google Plus
| Property | Description |
|---|---|
| Link To Post | A direct link to the post. Click on the arrow in the top right corner of a post -> Link to post |
Imgur
Embed a Imgur image or album. If you are embedding an album, you must include the a/ part of the ID or URL.
Image example: id, https://imgur.com/id or https://imgur.com/gallery/id
Album example: a/id or https://imgur.com/a/id
| Property | Description |
|---|---|
| Post | The post ID or URL. |
| Hide Post Details | Hide metadata such as username, views and number of comments. Default: False |
| Property | Description |
|---|---|
| Post | The ID of the post or the full URL copied from the browser address bar. |
| Hide Caption | Hide caption. Default: False |
jsFiddle
| Property | Description |
|---|---|
| jsFiddle | The ID or full URL of the fiddle you wish to display. Eg: https://jsfiddle.net/id/ |
| Tabs | Remove or rearrange tabs. Default: js,resources,html,css,result |
| Skin | Which skin should be used. Options: Light Presentation |
| Height | Height of the widget specified in pixels. Default: 300 |
Kickstarter
| Property | Description |
|---|---|
| URL | The ID of the post or the full URL copied from the browser address bar. |
| Display Type | How to display the widget. Options: Video Card |
| Widget Width | Default for Video: 360 -- Default for Card: 220 |
| Widget Height | Default for Video: 480 -- Default for Card: 420 |
Note: When switching to the
Carddisplay type, it is important to change the width and height so the widget contents display properly.
SoundCloud
Embed any SoundCloud URL. This includes links to individual tracks, profiles, albums and playlists.
| Property | Description |
|---|---|
| URL | Full SoundCloud URL copied from the browser address bar. |
| Auto Play | Play begin playback when the widget loads. Default: False |
| Widget Height | Height of the widget specified in pixels. Default: 166 |
Note: When embedding a playlist or user profile, you must increase the
Widget Heightto display the playlist.Important note: The SoundCloud component requires a
Client IDAPI key. Get your key from SoundCloud.com and register it in the settings page.
Spotify
Embed a Spotify Play Button.
| Property | Description |
|---|---|
| Track | The Spotify URI. Right click on a track -> Copy Spotify URI. Also accepts the Spotify HTTP URL. |
Embed a tweet.
| Property | Description |
|---|---|
| Tweet | Full URL. Click on a Tweet, then copy the URL in the address bar. |
| Hide Media | Hide media such as images and videos. Default: False |
Vimeo
| Property | Description |
|---|---|
| Video | Video ID or Vimeo URL copied from the browser address bar. |
| Autoplay Audio | Automatically play audio. Default: False |
| Type | How to display the widget. Options: Simple Postcard |
| Size | The size of the widget. Options: 300px 480px 600px |
| Responsiveness | Click here for details. Default: False |
Vine
| Property | Description |
|---|---|
| Vine | Vine ID or the full URL. Eg: https://vine.co/v/id |
| Widget Width | Default for Video: 360 -- Default for Card: 220 |
| Widget Height | Default for Video: 480 -- Default for Card: 420 |
YouTube
| Property | Description |
|---|---|
| Video | Video ID or Vimeo URL copied from the browser address bar. |
| Widget Width | Default for Video: 360 -- Default for Card: 220 |
| Widget Height | Default for Video: 480 -- Default for Card: 420 |
| Responsiveness | Click here for details. Default: False |
Responsiveness
Some components have a property named Responsiveness. This makes the widget responsive -- or fluid.
The way this is done is by wrapping the widget in a div.embed-responsive element. If you are using Twitter Bootstrap, this will work automatically. However, if you are not using Bootstrap, you will have to add some CSS. Check out this Gist for an example of how you can achieve this.
Options:
Fixed- Disables responsiveness and uses size defined with width and height.4:3- Enables responsiveness with 4:3 size.16:9- Enables responsiveness with 16:9 size.
Note: When responsiveness is enabled, you can skip setting a fixed width and height.
Contributing
Bugs
If you have found a bug, please create an issue on GitHub.
Feature requests
If you want to see a provider added to this plugin, don't hesitate to let me know. Feel free to create an issue with the request tag -- or better yet, make it yourself and create a pull request.
Translations
Everyting in this plugin can be translated -- even components. If you create a translation for your own language, please give back to the community by creating a pull request!
Thanks to @exotickg1 for providing a Russian translation.
License
MIT © 2016 Kristoffer Alfheim
-
Tom McKinney
Found the plugin useful on 11 Jun, 2015
Very intuitive and easy to implement. Great work!
-
webmaxx
Found the plugin useful on 20 May, 2015
Thank!
-
| 1.0.5 |
Included height and width options for Spotify component Jun 04, 2016 |
|---|---|
| 1.0.4 |
Fixed issue with the Flickr component. Nov 08, 2015 |
| 1.0.3 |
Minor improvements. Aug 28, 2015 |
| 1.0.2 |
Added Russian language. Jun 26, 2015 |
| 1.0.1 |
Fixed fatal issue caused by the jsFiddle component May 20, 2015 |
| 1.0.0 |
New providers: CodePen, Flickr, GitHub, GoogleMaps, GooglePlus, Imgur, Instagram, jsFiddle, Kickstarter, SoundCloud, Spotify, Twitter, Vimeo, Vine and YouTube. May 18, 2015 |