Perch CMS shortcode experiments

Perch recently launched a very elegant shortcode system. Here are my notes as I learn how to use it.

Some links to get us up to speed.

First insight was that I would need to register a custom class for Perch to recognize different content providers. That may have stalled progress because I have much to learn about writing PHP. However, between the sample code snippets, clear documentation and the help and encouragement from other Perch developers I was able to move forward. If you have modest PHP coding skills give Perch a go. It is a joy to use.

So where could I register a custom class and save it? In a custom app.

From the get go Perch was designed with an API to help developers customize it. Perch is often described as a content management toolkit which is a very apt description. What I needed was to build a custom app. My first app!

The app has only one admin file, to register and configure the app using Perch API, and a library of class files. Each file in the library adds support for a different content provider. An admin app is barebones because there are no interface elements added to the editor's control panel and no new databases tables needed. I imagine its about as simple as an app could be.

I stripped down the Perch sample app which has UI elements for the control panel which I didn't need. Hat tip to Robert Ketter, a Perch registered developer who updated the sample app to support Perch 3 and shared it in the Perch Slack registered developer's channel.

Below are examples for Twitter, Instagram, Codepen, Speakerdeck and Huffduffer. I'll add more providers in the near future starting with Soundcloud. If there are providers you'd like to add please send me a tweet and let me know which and I'll take a look. Even better fork the respository, add a new class file and submit a pull request. Its a way way to learn a bit about Perch, PHP and how to use Github.

What is oEmbed?

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly. Source: oEmbed website.

Twitter shortcode test

On Twitter

[cms:tweet 859758174781538305 lang=en]

This shortcode provider is already built in to the official Perch Twitter Add On.

Instagram shortcode test

On instagram

oembed link

[cms:instagram BS1kC6Ygcga]

[cms:instagram BTQ1omKl0DJ]

Shortcode provider code snippet in the Perch docs.

Codepen shortcode test

Link on Codepen

oembed link

[cms:codepen rachelandrew/pen/RGwyAb]

Speakerdeck shortcode test

Link on Speakerdeck

oembed link

[cms:speakerdeck malarkey/art-directing-web-design]

[cms:speakerdeck malarkey/designing-imaginative-grid-systems-port-80-newport]

Huffduffer shortcode test

Link to huffduffer

oembed link

[cms:huffduffer adactio/243773]

WeChat, China, and Apple

Link to huffduffer

[cms:huffduffer hmncrshpad/406354]

Tags:


← Previous Perch shortcode attributes Homebrew Website Club, Feb 21 Next →