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.
Live Demo OctoberCMS Marketplace
OctoberCMS Backend:
Go to the plugin installation page. Search for Krisawzm.Embed and install the plugin.
Command Line:
$ php artisan plugin:install Krisawzm.Embed
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.
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.
You can also specify the allowed CSS units (in addition to auto and %) to define Width/Height properties on the applicable embeds.
This is particularly useful if you want to add some 'responsiveness' to non-responsive embed.
- CodePen
- Flickr
- GitHub Gist
- Google Maps
- Google Plus
- Imgur
- jsFiddle
- Kickstarter
- SoundCloud
- Spotify
- Vimeo
- Vine
- YouTube
| 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 elegible CSS length value. Default: 268 |
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 elegible CSS length value. Default: 640 |
| Widget Height | Height of the widget specified in elegible CSS length value. Default: 426 |
| Responsiveness | Click here for details. Default: False |
| Property | Description |
|---|---|
| Gist | The gist ID or full URL. It is recommended to include the username. Eg: krisawzm/0db0766c46a465bb40e8 or https://gist.github.com/krisawzm/0db0766c46a465bb40e8 |
| 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 elegible CSS length value. Default: 600 |
| Widget Height | Height of the widget specified in elegible CSS length value. 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.
| 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 |
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 |
| 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 elegible CSS length value. Default: 300 |
| 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.
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 elegible CSS length value. 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.
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. |
| Widget Width | Width of the widget specified in elegible CSS length value. Default: 300 |
| Widget Height | Height of the widget specified in elegible CSS length value. Default: 380 |
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 |
| 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 |
| 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 |
| 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 |
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.
If you have found a bug, please create an issue on GitHub.
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.
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.
MIT © 2016 Kristoffer Alfheim