Download the PHP package liquidlight/typo3-shortcodes without Composer
On this page you can find all versions of the php package liquidlight/typo3-shortcodes. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download liquidlight/typo3-shortcodes
More information about liquidlight/typo3-shortcodes
Files in liquidlight/typo3-shortcodes
Package typo3-shortcodes
Short Description Wordpress-style shortcodes for TYPO3
License GPL-2.0+
Homepage https://github.com/liquidlight/typo3-shortcodes
Informations about the package typo3-shortcodes
Shortcodes
Wordpress style shortcodes for embedding external content in TYPO3.
Installation
Usage
Out of the box the extension comes with plenty of shortcodes to get you started; including YouTube, Vimeo, Facebook, Twitter and several others.
To use the shortcodes, you can use a shorthand syntax or follow the Wordpress, HTML inspired method.
More details below as to the exact usage for each tag, but as an example, the YouTube one could be used like one of the following:
⚠️ If using a full URL, it is worth leaving a space between the end of the link and the closing square bracket - this prevents the ]
being used in the link
Shorthand colon syntax
Shorthand equals syntax
Wordpress Long-form syntax
Creating your own keyword
In the land of shortcodes, keyword is the "service" used to trigger the shortcode (e.g. youtube
in the examples above).
Registering your own keyword requires a new class which extends LiquidLight\Shortcodes\Keywords\AbstractKeyword
.
An example of how to extend and use can be found in the Classes/Keywords folder - anything but the AbstractKeyword
class can be copied and used.
Once created, you can add it via the ext_localconf.php
where new
is the name of the keyword.
Using this method allows you to overwrite existing keywords if you wish to alter their output. The only requirement is that you return a string.
Existing Shortcodes
All shortcodes allow title
as an attribute to add a title to iframe
based shortcodes. If it is not added, it will default to the type (e.g. "Google Maps")
[facebook]
Copy the URL of a facebook post or video
Properties:
- url
- width
- height
Defaults:
Google Maps
[googlemaps]
⚠️ Google Maps requires an API key setting up - see the setup section below for adding your key
Shows a place, satellite, directions or streetview of a place.
Properties:
All the properties are of that listed in the documentation.
The only differences are:
search
can be used instead ofq
- The addition of
loading
- defaults tolazy
but can be set toeager
Setup
To use the googlemaps
shortcode, an API key must be set.
By default, it will look in your $_ENV
variables for GOOGLE_MAP_API
.
However it can be set in ext_localconf
however you see fit (please don't commit your API key).
If you restrict the API key type, ensure you have the following enabled
- Maps Embed API
- Maps JavaScript API
- Maps Static API
Iframe
[iframe]
Allows a generic iframe to be rendered with the passed in URL
Properties:
- src
- width
- height
- ratio - iframe ratio in a colon or slash format (e.g.
ratio="4:3"
orratio="16/9"
) - rendered as adata-ratio
attribute - allowfullscreen
- allow
- frameBorder
[instagram]
Embeds an Instagram post
[linkedin]
Embeds an Linked post - ensure the url has urn:li:activity
or similar in it.
For example:
Properties:
- height
- width
- loading - defaults to
lazy
but can be set toeager
Defaults:
Soundcloud
[soundcloud]
Shows a Soundcloud player for a track or artists - can have the size & colour customised. Use the URL
For example:
Properties:
- url
- maxwidth
- maxheight - can be 166 or 450
- color
- auto_play
- show_comments
Spotify
[spotify]
Go to Spotify and click on what you want to embed - song, artist, playlist etc.
Click the 3 dots -> Share -> Copy Link
Properties:
- height - can be 80 or 380
- theme - can be 1 or 0 (disables the coloured background)
- loading - defaults to
lazy
but can be set toeager
Defaults:
X
[x | twitter | tweet]
Copy the URL (or the status code) of a tweet
Properties:
Any properties are passed through to the oembed-api, so the list & defaults can be found there
Video
[video]
The video element outputs an <iframe>
with the src of that passed in. It allows an arbitrary URL to a video to be passed in and it will wrap it in a <div>
for responsive styling purposes.
Properties
- code - optional if using the shorthand syntax
- url - optional if using the shorthand syntax
- width
- height
- ratio - video ratio in a colon format (e.g.
ratio="4:3"
) - defaults to16:9
- rendered as adata-ratio
attribute for styling - loading - defaults to
lazy
but can be set toeager
Vimeo
[vimeo]
Renders a Vimeo iframe embed. Can take a full URL or code.
See Video for properties and use.
YouTube
[youtube]
Renders a YouTube iframe embed. Can take a full URL or code.
See Video for properties and use.