Joomla RuleZ

AMP Advanced Plugin

Details
Parent Category: News
Category: Latest
Created: 01 August 2020
Last Updated: 30 June 2022
Published: 01 August 2020
Written by Administrator
Hits: 8290

AMP Advanced Plugin, This content plugin is a cross media platform, it support Joomla 3 and 4.
This plugin allows you to embed any media content supported in your Joomla posts, list below :

  • Any Audio and Video support by HTML5
  • Facebook Video and post
  • Twitter Tweet
  • Vimeo Video
  • Youtube Video
  • Soundclound clip and playlist
  • Instagram embed
  • JW Player platform

It's based on AMP (Accelerated Mobile Pages) cloud hosted library shared by Google and dev by these websites, it's by the way compatible with AMP requirements (speed up your website loading) but still readable by any desktop and mobile browsers, it used AMP component framework.
AMP Components

29€/Year,
Order Now
(If Payment with
Crypto -20% : 23.2€)

+ - Overview, Components, Changelog Click to collapse
Name
AMP Advanced
Joomla Version Overview
Joomla 4.x.x
4
Joomla 3.x.x
Joomla 3.0
JED, Joomla! Extensions Directory Official Page.
image
Joomla Language INI files (en-GB)
image
Components
Audio Component
image
Facebook Component
image
Instagram Component
image
JW Player Component
image
SoundCloud Component
image
Twitter Component
image
Video Component
image
Vimeo Component
image
Youtube Component
image
and more to come ! Contact us if you want that we add a new AMP component or add some specific attributes
Version, code and changelog
Version Up-To-Date of the Plugin
0.1.0
(1 August 2020)

Changelog
HTML5
image
+ - Appearance, Behaviour, Media Session API Click to collapse

Appearance, Responsive Design

Name
AMP Advanced
Appearance, common* attributes (*depend components), can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
height : For some layouts, AMP components must have a width and height attribute that contains an integer pixel value.
all
width : For some layouts, AMP components must have a width and height attribute that contains an integer pixel value.
all
heights : All AMP elements that support the responsive layout, also support the heights attribute. The value of this attribute is a sizes expression based on media expressions, similar to the sizes attribute on img tags
all
media : Most AMP elements support the media attribute. The value of media is a media query. If the query does not match, the element is not rendered and its resources and potentially its child resources will not be fetched. If the browser window changes size or orientation, the media queries are re-evaluated and elements are hidden and shown based on the new results.
all
sizes : All AMP elements that support the responsive layout, also support the sizes attribute. The value of the AMP sizes attribute is a sizes expression that selects the defined size corresponding to the media query based on the current window size. Additionally, AMP sets an inline style for width on the element.
all
layout : AMP provides a set of layouts that specify how an AMP component behaves in the document layout. You can specify a layout for a component by adding the layout attribute with one of the supported layout values for the element (see the element's documentation for what values are supported).
all
controlsList : Same as controlsList attribute of HTML5 video and audio element. Only supported by certain browsers.
Audio, Video

Behaviour

Name
AMP Advanced
Behaviour, common* attributes (*depend components), can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
autoplay : If this attribute is present, and the browser supports autoplay, the video or audio will be automatically played as soon as it becomes visible. There are some conditions that the component needs to meet to be played, which are outlined in the Video in AMP spec.
Audio, JWPlayer, Video, Vimeo, Youtube
dock :

If this attribute is present and the video is playing manually, the video will be "docked" and float on a corner or a custom position when the user scrolls out of the video component's visual area. If the user scrolls back, the video reverts to its original static position.

  • The video can be docked to a default corner or to a custom fixed position.
  • The video can be dragged and repositioned by the user on a different corner.
  • The video can be flicked to be dismissed from its docked position.
  • Multiple videos on the same page can be docked, but only one at a time will be docked and fixed.
JWPlayer, Video, Youtube
loop : If present, the video or audio will automatically loop back to the start upon reaching the end.
Audio, Video, Youtube
noloading : If present, the video or audio will automatically loop back to the start upon reaching the end.
Audio, Facebook, Video

Media Session

Name
AMP Advanced
Media Session API, common* attributes (*depend components), can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
artwork: Specifies a URL to a PNG/JPG/ICO image serving as the video's artwork. If artwork is not present, the Media Session API helper uses either the image field in the schema.org definition, the og:image, or the website's favicon.
Audio, Video
artist : Indicates the author of the video or audio file, specified as a string.
Audio, Video
album: Indicates the album/collection the video or audio was taken from, specified as a string.
Audio, Video
title: Indicates the name/title of the video or video, specified as a string. If not provided, the Media Session API helper uses either the aria-label attribute or falls back to the page's title.
Audio, Video

Plugin Parameters

Name
AMP Advanced
Global Tab : You can set there Joomla Plugin Parameters
trigger : Type the trigger name that will trig the plugin, default is amp.
image
component: Select the default components to load, default is video, you can override it in front end by setting &component=VALUE.
image
ampjs: If amp.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
+ - Interaction code, Help and support, Update system Click to collapse
Name
AMP Advanced
Interaction code
Curly Brackets { amp }{ /amp } support.
image
You can change the trigger name {new_trigger_name}{/new_trigger_name}
image
Help and Support
Forum
image
Online Documentation (backend and on AMP website)
image
GPLv3
image
PHP version support
5.6.x, 7.0.x, 7.1.x, 7.2.x, 7.3.x +
SSL support
image
Update

Joomla Update system is fully support, you will just have to set your download ID in the backend of the extension and save it, once done, you will able to upgrade your extension troug the Joomla admin interface without download it first on joomlarulez.com.

You can retrieve your Download ID on Joomlarulez.com : User menu --> Download IDs (https://www.joomlarulez.com/download-ids.html), Generate Download ID there.
You can generate multiple Download IDs.
Each Download ID can only be used for one website only. So if you use your extension on multiple websites and you have the right license, you will have to generate multiple Download IDs, each Download ID can only be used for one website only.
Each Download ID can be used for multiple extensions on the same website. So if you used multiple of our extensions on your website, you will only need one Download ID
image
Name
AMP Audio Component
AMP Audio component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
src : Required if no <source> children are present. Must be HTTPS.
The shortcode is &src=URL_OF_THE AUDIO_FILE, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=audio
image
preload : If present, sets the preload attribute in the html <audio> tag which specifies if the author thinks that the audio file should be loaded when the page loads.
image
muted : If present, will mute the audio by default.
image
ampaudiojs : If amp-audio.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP Facebook Component
AMP Facebook component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
data-href : (Required) The URL of the Facebook post/video/comment. For example, a post or video will look like https://www.facebook.com/zuck/posts/10102593740125791. A comment or comment reply will look like https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185. For comments, see the Facebook documentation on how to get a comment's URL.
The shortcode is &data-href=ID, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=facebook
image
data-embed-as : The value is either post, video or comment. The default is post.
Both posts and videos can be embedded as a post. Setting data-embed-as="video" for Facebook videos embeds the player of the video, and adds the accompanying post card with it. Setting data-embed-as="post" ignores the caption card. This is done to make sure we are zooming in on videos correctly. The comment value embeds a single comment (or reply to a comment) on a post.
Check out the documentation for differences between post embeds, video embeds, and comment embeds.
image
data-include-comment-parent : The value is either true or false. The default is false.
When you are embedding a comment reply, you can optionally also include the parent comment of the reply.
image
data-align-center : The value is either true or false. The default is false.
For posts and videos, having this attribute set to true would align the post/video container to center.
image
data-locale : By default, the locale is set to user's system language; however, you can specify a locale as well.
image
ampfacebookjs : If amp-facebook.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP Instagram Component
AMP Instagram component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
data-shortcode : (Required) The instagram data-shortcode is found in every instagram photo URL.
For example, in https://instagram.com/p/fBwFP, fBwFP is the data-shortcode.
The shortcode is &data-shortcode=ID, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=instagram
image
data-captioned : Include the Instagram caption. amp-instagram will attempt to resize to the correct height including the caption.
image
ampinstagramjs : If amp-instagram.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP SoundCloud Component
AMP SoundCloud component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
data-trackid : This attribute is required if data-playlistid is not defined. The value for this attribute is the ID of a track, an integer.
The shortcode is &data-trackid=ID, it must be set first before any another attribute
image
data-playlistid : This attribute is required if data-trackid is not defined. The value for this attribute is the ID of a playlist, an integer.
The shortcode is &data-playlistid=ID, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=soundcloud
image
data-secret-token : The secret token of the track, if it is private.
image
data-visual : If set to true, displays full-width "Visual" mode; otherwise, it displays as "Classic" mode. The default value is false.
image
data-color : This attribute is a custom color override for the "Classic" mode. The attribute is ignored in "Visual" mode. Specify a hexadecimal color value, without the leading # (e.g., &data-color=e540ff).
image
ampsoundcloudjs : If amp-soundcloud.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP Twitter Component
AMP Twitter component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
data-tweetid : (required) The ID of the Tweet. In a URL like https://twitter.com/joemccann/status/640300967154597888, 640300967154597888 is the tweet id..
The shortcode is &data-tweetid=ID, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=twitter
image
amptwitterjs : If amp-twitter.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP Video Component
AMP Video component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
src : Required if no <source> children are present. Must be HTTPS.
The shortcode is &src=URL_OF_THE_VIDEO_FILE, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=video
image
poster : The image for the frame to be displayed before video playback has started. By default, the first frame is displayed.
image
controls : This attribute is similar to the controls attribute in the HTML5 video. If this attribute is present, the browser offers controls to allow the user to control video playback.
image
crossorigin: Required if a track resource is hosted on a different origin than the document
image
disableremoteplayback : Determines whether the media element is allowed to have a remote playback UI such as Chromecast or AirPlay.
image
noaudio : Annotates the video as having no audio. This hides the equalizer icon that is displayed when the video has autoplay.
image
rotate-to-fullscreen : If the video is visible, the video displays fullscreen after the user rotates their device into landscape mode. For more details, see the Video in AMP spec.
image
ampvideojs : If amp-video.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP Vimeo Component
AMP Vimeo component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
data-videoid: (required)The Vimeo video id found in every Vimeo video page URL For example, 27246366 is the video id for the following url: https://vimeo.com/27246366.
The shortcode is &data-videoid=ID, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=vimeo
image
ampvimeojs : If amp-vimeo.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP Youtube Component
AMP Youtube component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
data-videoid: (required) The YouTube video id found in every YouTube video page URL. For example, in this URL: https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM is the video id.
The shortcode is &data-videoid=ID, it must be set first before any another attribute
image
component : loading the component if not set by default in backend, The shortcode is &component=youtube
image
data-param-cc_load_policy : Setting the parameter's value to false causes closed captions to be shown by default, even if the user has turned captions off. The default behavior is based on user preference.
image
data-param-color : This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white, and, by default, the player uses the color red in the video progress bar.
image
credentials : Defines a credentials option as specified by the Fetch API.
  • Supported values: omit, include
  • Default: include

If you want to use the YouTube player in privacy-enhanced mode, pass the value of omit. Usually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.
image
ampyoutubejs : If amp-youtube.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image
Name
AMP JWPlayer Component
AMP JWPlayer component specific attributes can be set by default in backend and applied for all content loaded by the plugin or in front end with shordcode &attribute=value
data-media-id : The JW Platform media id. This is an 8-digit alphanumeric sequence that can be found in the Content section in your JW Player Dashboard. (Required if data-playlist-id is not defined.)
The shortcode is &data-media-id=ID, it must be set first before any another attribute
image
data-playlist-id : The JW Platform playlist id. This is an 8-digit alphanumeric sequence that can be found in the Playlists section in your JW Player Dashboard. If both data-playlist-id and data-media-id are specified, data-playlist-id takes precedence. (Required if data-media-id is not defined.)
The shortcode is &data-playlist-id=ID, it must be set first before any another attribute
image
data-player-id : JW Platform player id. This is an 8-digit alphanumeric sequence that can be found in the Players section in your JW Player Dashboard. (Required)
image
component : loading the component if not set by default in backend, The shortcode is &component=jwplayer
image
data-content-search: Denotes the type of the playlist. If contextual article matching is desired, use the value __CONTEXTUAL__. If a search playlist is desired, input a keyword or phrase used to generate the search playlist.
image
data-content-backfill: Ensures that a search or contextual playlist always returns a result. If there are no relevant results for the given query, this parameter ensures that a list of trending videos are served instead. (Boolean with default: true)
image
ampjwplayerjs : If amp-jwplayer.js is already load by another module or plugin you can force the plugin to use the same script this to reduce charge time of the page, Automatic position will set it alone, if you have trouble to see the component in automatic position Force to Yes.
image

Latest News

Popular

Recently Updated

You are here: Home Extensions AMP Advanced Plugin