In one of our previous blog articles, we briefly explored Shortcodes and OEmbed functionality in SilverStripe.
Today, we're going to have a crack at extending the built-in functionality that comes pre-packaged with SilverStripe - the OEmbed functionality.
To get started, simply create this file:
Inside this file, write out the following:
--- Name: oembedcustom --- Oembed: providers: 'http://instagram.com/p/*': http: 'http://api.instagram.com/oembed/', https: 'https://api.instagram.com/oembed' 'https://instagr.am/p/*': http: 'http://api.instagram.com/oembed/', https: 'https://api.instagram.com/oembed'
After saving this file, run a /dev/build?flush=all
Note: any time that you edit a .yml file, you'll need to do a ?flush=all to ensure the cache that stores all of the yml data is flushed and any changes you've made are picked up.
That's all there is to the setup! Now, to pull in some fantastic instagram data, use the following code:
Note: it's super important that you use the type="rich" code, otherwise SilverStripe will assume that the embed code is an image type and will throw in some extra tags that are not required.
The above code will create the following content:
As always, with the super-flexible OEmbed standard, there are some other variables that you can throw in to further customise your content. Currently, the tags that you'd have access to are listed below, but more may be added in the future, and they would be documented at the official Instagram Embedding Documentation
omitscript- a boolean value that allows you to remove the instagram embed.js script from loading on your page - useful if you want to minimise requests and handle the embedding script in your own js
hidecaption - a boolean value that allows you to hide potentially pesky captions and just serve an image
maxwidth - the maximum width (in pixels) of the image to display. as all instagram images are square, the maxheight is inferred from this value
Images credit: @camposwell's instagram account - http://instagram.com/camposwell/