#158

Product support

Get help in the plugin support forum.

Categories

  • Miscellaneous

Build Status

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
  • Instagram
  • jsFiddle
  • Kickstarter
  • SoundCloud
  • Spotify
  • Twitter
  • Vimeo
  • Vine
  • YouTube
Using the standard CMS.

Build Status

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

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

Instagram

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 Card display 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 Height to display the playlist.

Important note: The SoundCloud component requires a Client ID API 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.

Twitter

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

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