This package allows you to use shortcodes in your application, like a Wordpress / BBS style websites.
In our days, shortcodes are a great way to preserve the integrity of the data within the content published on our site (such as a blog or forum) without risking having to rewrite the format each time.
With Laravel Shortcode+ we have the ability to turn a standard shortcode into a dynamic asset that can update over time (new HTML standards, cookie consent, AMP versions, and more)!
Warning: this is a very opinionated package and it's not intended to be multi-purpose.
For example, you can use the following shortcode to embed a Youtube video:
[youtube id="123456789"]This will be rendered as:
<iframe
src="https://www.youtube-nocookie.com/embed/123456789&autoplay=1"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube-nocookie.com/embed/123456789?autoplay=1><img style='object-fit:cover;height:100%;' loading='lazy' src=https://img.youtube.com/vi/123456789/hqdefault.jpg alt='123456789'
loading=lazy><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen
title="123456789"
></iframe>As you can see, we don't just generate an iframe but make it accessible, performant and in line with the best SEO practices around.
You can install the package via composer:
composer require murdercode/laravel-shortcode-plusYou can use shortcodes CSS publishing the assets:
php artisan vendor:publish --tag="shortcode-plus-assets"You can publish and run the migrations with:
php artisan vendor:publish --tag="shortcode-plus-migrations"
php artisan migrateYou can publish the config file with:
php artisan vendor:publish --tag="shortcode-plus-config"If you want to upgrade every time your assets, add in your composer.json:
"scripts": {
"post-update-cmd": [
"@php artisan vendor:publish --tag=shortcode-plus-assets --ansi --force",Optionally, you can publish the views using
php artisan vendor:publish --tag="shortcode-plus-views"Laravel Shortcode Plus is shipped with a default CSS and JS for a better user experience. You can add on resources/css/app.css the CSS files:
@import url("/public/vendor/shortcode-plus/app.css");and in resources/js/app.js the JS files:
import '/public/vendor/shortcode-plus/app2.js';Now you can parse your source as follows:
use Murdercode\LaravelShortcodePlus\Facades\LaravelShortcodePlus;
$html = "I want to parse this twitter tag: [twitter url=\"https://twitter.com/elonmusk/status/1585841080431321088\"]";
return LaravelShortcodePlus::source($html)->parseAll();Here is the list of the available parsers:
| Shortcode | Description | Parameters | Example |
|---|---|---|---|
[twitter] |
Get a Twitter card | url |
[twitter url="https://twitter.com/elonmusk/status/1585841080431321088"] |
[youtube] |
Get a Youtube (light) player | url |
[youtube url="https://www.youtube.com/watch?v=9bZkp7q19f0"] |
[spotify] |
Get a Spotify player | url or uri |
[spotify url="https://open.spotify.com/track/2TpxZ7JUBn3uw46aR7qd6V"] |
[faq] |
Create a <details> tag with embedded content |
title |
[faq title="What is the answer to the ultimate question?"]42[/faq] |
[spoiler] |
Create a <details> tag with embedded content |
title |
[spoiler title="Spoiler"]This is hidden content[/spoiler] |
[facebook] |
Get a Facebook card | url |
[facebook url="https://www.facebook.com/elonmusk/posts/10157744420210129"] |
[instagram] |
Get a Instagram card | url |
[instagram url="https://www.instagram.com/p/CApQfIjBGxC/"] |
[image] |
Create an image with Image::class model |
id, caption (optional) |
[image id="123"] |
[gallery] |
Create a gallery image with Image::class model |
title, images |
Single or multiple images: [gallery title="Gallery title here" images="1"] or [gallery title="Gallery title here" images="1,2,3"] |
[photo] |
Create a gallery image with [Nova Media Hub](https://github.com/outl1ne/nova-media-hub) model |
didascalia effect(optional) |
Single or multiple images: [photo didascalia="Gallery title here" id="1,2,3"] Effect [photo id="1,2,3" effect="carousel |
[leggianche] |
Create a Read more div, based on Article or Post model |
id |
[leggianche id="1"] |
[distico] |
Create a side text block, based on Article or Post model |
id |
[distico id="1"] |
[button] |
Create a button that links to an URL | link, label, level (optional) |
[button link="https://www.google.com" label="Google" level="primary/secondary"] |
[tmdb] |
Create a TMDB card | type, id |
[tmdb type="movie/tv" id="123"] |
[widgetbay] |
Create a Widgetbay iframe | id (optional), link (optional) |
[widgetbay id="1"] [widgetbay link="https://www.amazon.it/product?tag="41515&subtag="5151"..."] |
Please remember to call the SDK before </body>:
<div id="fb-root"></div>
<script
async
defer
crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v15.0"
nonce="UcAjseAO"
></script>Please remember to call the SDK before </body>:
<script type="text/javascript">
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>Please remember to call the SDK before </body>:
<script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>Please remember to call the SDK before </body>:
<script async src="https://widget.justwatch.com/justwatch_widget.js" type="text/javascript"></script>composer testPlease see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.