nathancox/embedfield

A form field for adding oembed objects (primarily videos) to pages or dataobjects

Installs: 5 795

Dependents: 1

Suggesters: 0

Security: 0

Stars: 4

Watchers: 1

Forks: 8

Open Issues: 5

Type:silverstripe-vendormodule

2.0.0 2019-02-04 03:14 UTC

This package is not auto-updated.

Last update: 2021-12-01 14:55:35 UTC


README

This field is designed to let users attached an oembed object (eg a YouTube video) to a page or dataobject. It stores the oembed result information in an EmbedObject for easy access from the template (or wherever you want it).

Work in progress.

Maintainer Contacts

Nathan Cox (me@nathan.net.nz)

Requirements

  • SilverStripe 4.0+

Documentation

GitHub

Installation Instructions

  1. Place the files in a directory called mapfield in the root of your SilverStripe installation
  2. Visit yoursite.com/dev/build to rebuild the database

Usage Overview

Make a has_one relationship to an EmbedObject then create an EmbedField in getCMSFields:

namespace {

    use SilverStripe\CMS\Model\SiteTree;
    use nathancox\EmbedField\Model\EmbedObject;
    use nathancox\EmbedField\Forms\EmbedField;

    class Page extends SiteTree
    {
        private static $db = [];

        private static $has_one = [
            'MyVideo' => EmbedObject::class
        ];
        
        public function getCMSFields() {
            $fields = parent::getCMSFields();
            
            $fields->addFieldToTab('Root.Main', EmbedField::create('MyVideoID', 'Sidebar video'));
            
            return $fields;
        }
    }
}

Gives us:

example embedfield

In the page template the video can now be embedded with $MyVideo.

Each embed type is rendered with it's own template (eg EmbedObject_video.ss and EmbedObject_photo.ss). The default templates just return the markup generated by SilverStripe's OembedResult::forTemplate(). You can override them in your theme:

themes/mytheme/templates/nathancox/EmbedField/Model/EmbedObject_video.ss:

	<div class='flex-video self-sizing' style='padding-bottom:$AspectRatioHeight;'>
		$EmbedHTML
	</div>

This can be combined with your own CSS to make aspect ratio aware flexible video (see http://alistapart.com/article/creating-intrinsic-ratios-for-video).

Known Issues

Issue Tracker