But before we go there, lets provide a short overview of
ShortCodes ShortCodes are nothing different than macros or scripts that you create to repeating the some activity over and over again. They can be very simple, and they can be very complex. Some of them are true code snippets, with no direct interaction, and some can be quite sophisticated, with visual GUI that helps you to select its options. There are also different ways to interact with Shortodes: a) simple ShortCodes without any attributes, using basically a single command, e.g. our BBcodes are simple Shortcodes that we use by placing
[ b ] and
[ /b ] around text to make it bold b) more complex ShortCodes with Attributes, like the YouTube example presented by Richard above:
[youtube url="JxS5E-kZc2s" width="640" height="385" /]
Creating a Shortcode for Google Maps After I saw yesterday Richard's announcement about the Shortcodes in XOOPS, I've got very excited and decided to explore them. In order to create a Shortcode, we'll be using the
ExtensionAbstract class. We create a new file in the /Extensions folder called "Googlemap.php". We'll start with:
class Googlemap extends ExtensionAbstract
{
}
A Google map has just very basic features, like width, height, etc. So as first, we can create a default configuration for it. This will also make it easier for us, as we won't have to then fill out all the options every time we use it:
protected static $defaultConfiguration = [
'enabled' => true,
'template' => '',
'clickable' => true, // Click to open a map in a new window in full size
'resize' => true, // Resize the map down to max_width set below
'max_width' => 640, // Maximum width of a map displayed on page
'max_height' => 480, // Maximum width of a map displayed on page
'allowmap' => true, // true to allow maps, false to force links only
];
Of course, you can decide for yourself which options do you want to include and which one not. As next step, we need to register our extension with the Sanitizer. This is being done by overriding the abstract method
registerExtensionProcessing from
ExtensionAbstract :
public function registerExtensionProcessing()
{
}
Now we need to register our Shortcode by using the "
addShortcode()" method of the
ShortCodes class.
This method requires two parameters: a) the name of the Shortcode b) callback function that will be called every time the Shortcode is being used In our case, we'll call it our Shortcode a "Googlemap" and the method will have this signature:
$this->shortcodes->addShortcode( 'googlemap', function ($attributes, $content, $tagName) use ($config) {
As mentioned earlier, because we're using a "callback" function, we could make the Shortcode very complex and sophisticated. But this maybe next time
Our "addShortcode" method will look like this:
public function registerExtensionProcessing()
{
$config = $this->ts->getConfig('googlemap'); // direct load to allow Sanitizer to change 'allowchart'
$this->shortcodes->addShortcode('googlemap', function ($attributes, $content, $tagName) use ($config) {
$xoops = Xoops::getInstance();
$defaults = ['width' => 640,
'height' => 480,
'src' => '',];
$cleanAttributes = $this->shortcodes->shortcodeAttributes( $defaults, $attributes);
$width = $cleanAttributes['width'];
if (preg_match('/[0-9]{1}$/', $width)) {$width .= 'px';}
$height = $cleanAttributes['height'];
if (preg_match('/[0-9]{1}$/', $height)) {
$height .= 'px';
}
$src = $cleanAttributes['src'];
$newContent = '';
return $newContent;
});
}
}
Once tested that it works, we'll be able to post directly a Google Map in any article of News or Publisher module, or any other XOOPS module, by just using the Shortcode
"[googlemap]" Of course, we need to provide more info to it, so in the end it could look like this:
[googlemap width="600" height="300" src="http://maps.google.com/maps?q=Heraklion,+Greece&hl=en&ll=35.327451,25.140495&spn=0.233326,0.445976& sll=37.0625,-95.677068&sspn=57.161276,114.169922& oq=Heraklion&hnear=Heraklion,+Greece&t=h&z=12"]
And that's how the result of this Shortcode looks in Publisher module in XOOPS 2.6.0:
WHAT NEXT? I've got so excited about the Shortcodes in XOOPS, that I have experimented yesterday with few other Shortcodes:
- Google Charts - Country Flags - QR Code - DateTime widget For example, to add a flag to any content, we can now place just these Shortcodes:
[countryflag]
which will show us a default flag with default size (I set it to US and 64px) but it's up to you what you choose. The standard flag sizes are: 16, 32, 64. Or you can specify manually what country and what size of the flag you want to have:
[qrcode] [countryflag size=64 country="CA"]
This will create a Canadian flag 64px long. Countries are being selected using standard two letter country codes, e.g. US for USA, FR for France, DE for Germany, etc. Please note that you can also do the same programmatically, and to do so, the best way is to go install in XOOPS 2.6.0 the "Codex" module and check out several of the new additions to XOOPS 2.6.0. By using this Shortcode for Google Chart:
[chart charttype="pie" title="Example Pie Chart" data="41.12,32.35,21.52,5.01" labels="First+Label|Second+Label|Third+Label|Fourth+Label" background_color="FFFFFF" colors="D73030,329E4A,415FB4,DFD32F" size="450x180"]
we can have this chart:
And we can also create Shortcodes for XOOPS internal features, e.g. the QR Code for the current page:
[qrcode]
, and the previously mentioned country flag:
Thanks to Richard, the Shortcodes are opening some very cool opportunities for XOOPS. There are plenty of Shortcodes on WordPress, some of them very cool, so feel free to convert them to XOOPS, and share with us.
To learn more how to create Shortcodes, you can do following: a) study the refactored by Richard TextSanitizer classes which are basically Shortcodes themselves b) study some of the Shortcodes from other CMS, like WordPress and try to convert them to XOOPS
If you're interested, I have placed the five Shortcodes that I was experimenting with yesterday, in my Github repository. Feel free to fork them and contribute back
Clearly,
with all the exciting work being done by Richard on Core, and
by Eduardo merging RM Common Utilities into Core, the next version of XOOPS will be very, very cool!
Viva XOOPS!