Hi all,
I followed the instructions and copied the “essay__extension–media.php” into my sample.php.
What do I have to do to play a video and with which code do I have to embed it?
Thank you
Best regards,
Oliver
The phplugins file enables the feature in a Kookaburra Essay page.
Create a new Essay page and choose Media in the drop down where you would choose Grid, Carousel, etc.
Add your media url and title in the fields presented then copy the resulting code as you normally would for an essay.
For videos, you can also choose a cover image from an existing album.
1 Like
Hello Rod, thank you for your quick assistance.
I have copied the “essay__extension–media.php” into the backlight/custom folder. When I activate it in the Advanced Menu of my template, it works.
However, if I copy the head and essay_script functions into my existing PHPlugins file where no function is active (see below) , it does not work 
best regards,
Oliver
<?php
function userLoad($style, $path) {
$g_tsvrl = explode(' ', $style); // Extract gallery type
define ('G_STYLE', strtoupper($g_tsvrl[1])); // and set global for later
$g_path = str_ireplace('\\','/',$path); // change \ to /
$chunks = explode('/',$g_path); // and put into array
define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
//define ( 'TTG_SITE', ''); // set new site root for navigation, resources, etc.
}
if (defined('BACKLIGHT_HOOK')) {
require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}
class PHPlugins extends APHPlugins {
/**
*
* *************************************************************************************
* * *
* * Warning! When using echo or print special care must be qiven to using quotes. *
* * *
* * Strings inside single quotes must contain only double quotes *
* * or all single quotes must be escaped (ie \') or vice-versa *
* * *
* *************************************************************************************
*
* A number of user exits are defined in all web engines - all are optional
* (i.e. userLoad.php may be the only processing)
*
* Some web engines will have additional exits defined, specific to that gallery type
*
* Each is called with the same parameters:
* %1 - TTG gallery-style gallery-release
* - 3 blank delimited values
* - %1.1 - 'TTG'
* - %1.2 - string describing gallery type; no embedded blanks
* - %1.3 - a series of two to three period delimited integers
* describing gallery release level; x.y or x.y.z
* %2 - server filesystem file name and path of calling file
*
* Defined exits:
*
* userLoad
* - return value ignored
* - called immediately after this file returns
* - called before any output is produced
* - all header and response variables are accessible
* - cookie and session processing can be initialized
* - globals to be used by later hook calls can be defined
*
* style
* - return value ignored
* - called after template stylesheets, before custom stylesheets
* - encompasses nothing; use to insert styles into the <head>; use either:
* - <link href="path/to/style.css" rel="stylesheet" />
* - <style> ... </style>
*
* head
* - return value ignored
* - called immediately before </head>
* - encompasses nothing; use to insert content into the <head>
*
* skipToContent
* - if return=false, the "Skip to Content" link is omitted (not recommended)
* - can be used to replace the "Skip to Content" link
*
* running_head_top
* - if return=false, the contents of the normal running head are skipped
* - called immediately within the running head
* - encompasses the full contents of the running head, including navigation elements; can be used to replace those contents
*
* running_head_title
* - if return=false, the contents of the normal running head title are skipped
* - called within the running head, immediately before the navigation elements
* - will become unavailable if running_head_top is used to replace running head contents
* - encompasses the full contents of the running head title; can be used to replace those contents
*
* running_head_navigation
* - if return=false, the contents of the normal running head navigation are skipped
* - called within the running head, immediately after the title elements
* - will become unavailable if running_head_top is used to replace running head contents
* - encompasses the full contents of the running head navigation; can be used to replace those contents
*
* header_top
* - if return=false, the contents of the normal header are skipped
* - called immediately before the header section
* - encompasses the full contents of the header; can be used to replace the HEADER element and its contents
* - if replacing the header, you can omit unused CSS by ensuring the primary and secondary headers are disabled in the page template
*
* header_bottom
* - return value ignored
* - called immediately after the header section
* - encompasses nothing; use to insert content after the header section
*
* footer_top
* - if return=false, the contents of the normal footer are skipped
* - called immediately within the footer section
* - encompasses the full contents of the footer; can be used to replace those contents
*
* footer_bottom
* - return value ignored
* - called last in the footer section
* - encompasses nothing; use to insert content at the end of the footer section
*
* symbols_top
* - if return=false, normal symbol definitions are skipped
* - called within the SVG element, immediately before the symbol definitions
* - fully encompasses the symbol definitions; can be used to replace them
*
* symbols_bottom
* - return value ignored
* - called immediately after the symbol definitions, before closing the SVG element
* - encompasses nothing; use to insert additional symbols
*
* essay_script
* - return value ignored
* - called immediately after some essay setup, before image groups are rendered
* - encompasses nothing; use to add custom essay presentation templates; see example below
*
* scripts
* - return value ignored
* - called immediately before </body>, after other scripts
* - encompasses nothing; use to insert content or JavaScript at the very bottom of the page
*
* single_scripts
* - return value ignored
* - called immediately before </body>, after other scripts, and only on single-image pages
* - encompasses nothing; use to insert content or JavaScript at the very bottom of single-image pages
*
* copy_top
* - if return=false, normal copy is skipped
* - called immediately within the page copy area
* - encompasses the page copy; can be used to replace it
*
* copy_bottom
* - return value ignored
* - called immediately before closing the page copy area
* - encompasses nothing; use to insert content following the page copy
**/
// SET USER FUNCTIONS BELOW
// Some example functions are included below. Feel free to delete or modify unwanted functions.
// ****************************************************************************************************
/* DELETE THIS LINE
// Basic structure for a PHPlugins function
function _HOOK_() {
echo <<<HTML
// do HTML here.
HTML;
// do not indent line above
return false;
} // END /**/
function head() {
echo <<<HTML
<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/player/audio.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />
HTML;
// do not indent line above
return false;
} // END /**/
function essay_script() {
echo <<<HTML
<script src="https://cdn.vidstack.io/player" type="module"></script>
<script>
renderAs['media'] = {
fields: [
{
label: "Media URL",
name: "src",
type: "text",
},
{
label: "Media title",
name: "title",
type: "text",
},
],
skipTemplate: (placeholder, group, photoIds) => {
if (!placeholder.dataset.src) return;
let photo = "";
if (photoIds.length) {
photo = albumImages[photoIds[0]];
}
placeholder.innerHTML = (`
<div class="presentation-interior">
<media-player src="\${placeholder.dataset.src || ""}" title="\${placeholder.dataset.title || ""}" playsinline>
<media-provider>
\${photo ? (`
<media-poster alt="\${photo.filename}" class="vds-poster" src="\${photo.path}photos/\${photo.filename}"></media-poster>
`) : (`
<media-poster class="vds-poster"></media-poster>
`)}
</media-provider>
<media-audio-layout></media-audio-layout>
<media-video-layout></media-video-layout>
</media-player>
</div>
`);
},
title: "Media",
useWithoutImages: true,
};
placeholders.push(...Array.from(document.querySelectorAll('div[data-presentation="media"]')));
</script>
HTML;
// do not indent line above
return false;
} // END /**/
/* DELETE THIS LINE
// Insert custom CSS into the document head
function style() {
echo <<<HTML
<style>
* { background-color: rgba(255, 0, 0, 0.25) !important; }
</style>
HTML;
// do not indent line above
return false;
} // END /**/
/* DELETE THIS LINE
// Extend the `renderAs` function with additional essay presentation options; format as:
// renderAs[name] = {
// template: (photo, group, i) => `<div>HTML as string literal</div>`,
// title: "Name",
// useColumns: true/false, // enables the "Columns" field, and includes `data-columns` attribute in the snippet
// }
function essay_script() {
echo <<<HTML
<script>
renderAs.custom = {
classList: "custom-class",
dataSet: {
custom1: "alpha",
custom2: "beta",
},
fields: [
{
label: "Field label",
name: "Field name/ID",
type: "text", // supports "checkbox", "number", "select", "text"
value: "default value", // optional
},
],
onComplete: (placeholder, group) => {
console.log("All done.", placeholder)
},
setup: (placeholder, group) => {
// optional; should return an element.
// `template` will render items as `element.innerHTML`
return placeholder; // OR another element
},
skipTemplate: (placeholder, group, photoIds) => {
// optional; if present, this function will replace `template` in the flow of logic;
// use custom JS to loop through `photoIds`, then do whatever with photos
photoIds.forEach(photoId => {
console.log(albumImages[photoId]);
});
},
template: (photo, group, placeholder, i) => (`
<figure itemscope itemtype="http://schema.org/ImageObject">
<a
data-fancybox="\${group}"
data-height="\${photo.renditions.photos.height}"
data-src="\${photo.path}photos/\${photo.filename}"
data-width="\${photo.renditions.photos.width}"
href="\${photo.url}"
>
<img
alt="\${photo.filename}"
class="lazyload"
data-src="\${photo.path}thumbnails/\${photo.filename}"
height="\${photo.renditions.thumbnails.height}"
src="\${base64Image}"
title="\${photo.filename}"
width="\${photo.renditions.thumbnails.width}"
/>
</a>
<figcaption>\${photo.title}</figcaption>
</figure>
`),
title: "Custom",
useColumns: true,
useWithoutImages: false, // if true, snippets will be displayed even with no albums selected
};
</script>
HTML;
// do not indent line above
return false;
} // END /**/
/* DELETE THIS LINE
// Use the JavaScript JSON API to get album data;
// logs the response to the browser's debug console.
function scripts() {
$siteURL = siteURL();
$apiPath = "{$siteURL}backlight/" . (URLHelper::rewriteEnabled() ? "api" : "?m=publisher&c=jsonApi");
$apiToken = AuthHelper::getJSONAPIToken();
echo <<<HTML
<script>
// Kookaburra Album declares `albumId`, so we can use it here;
// outside of Kookaburra Album (e.g. on other pages), `albumID` will be undefined.
if (albumId) {
const backlight = new Backlight("{$apiPath}");
backlight.getAlbum(albumId, {
apiToken: "{$apiToken}",
done: function(data) {
console.log(data);
},
});
}
</script>
HTML;
// do not indent line above
return false;
} // END /**/
/* DELETE THIS LINE
// Use the JavaScript JSON API to get data for multiple albums, using Promises;
// logs the response to the browser's debug console.
function scripts() {
echo <<<HTML
<script>
const albumIds = ["395293", "479539"];
const promises = [];
albumIds.forEach(albumId => {
const newPromise = new Promise((resolve) => ({
data: resolve(backlight.getAlbum(albumId, { apiToken })),
}));
promises.push(newPromise);
});
(async () => {
if (!promises.length) return;
const data = await Promise.all(promises);
data.forEach(({ album }) => {
console.log(album);
});
})();
</script>
HTML;
// do not indent line above
return false;
} // END /**/
// ****************************************************************************************************
// END USER FUNCTIONS
}
?>
I just tried adding the media code to another Kookaburra phplugins file and it’s working fine.
Double check that you’re using the correct template for your Kookaburra page.
Thank you Rod!
I don’t know what the problem was, works fine now.
best regards,
Oliver
The two big things:
- Make sure you’re copying functions into the correct location within your PHPlugins file, e.g. the editable area. There’s all that stuff above and below that shouldn’t be messed with.
- Make sure you do not have duplicate hook functions, meaning you should have only one
headscript overall.
1 Like