Plugins

Adding media and downloads to yBlog

On this Page:

yTOC plugin

download() Plugin

YouTube Plugin

PDF Reader Plugin

Lightbox Plugin

Syntax-Highlighter Plugin

Document Details Plugin

Animations

Blog List

(Click the images for a lightbox slideshow)

Introduction

Most plugins are tiny snippets of code which can be inserted anywhere in the body content, with a few parameters to configure the inserted code. Parameters are often optional, and some plugins operate automatically without even needing a snipppet to trigger them. If the snippets are PHP, the Webserver substitutes large, well-formed blocks of code for the snippet, so the functions to insert the snippets are never seen in the client browser. If the snippets are JavaScript, the Web browser inserts the blocks of code while the document is being loaded. In that case, the inserted blocks of code are not in the page source, but they are visible in the 'Elements' trees of browser development tools.

yTOC plugin

Unlike most other yBlog plugins, the yTOC plugin is in the ySite JavaScript class at the end of the client BODY. It executes BEFORE the page is fully loaded, and before the stylesheet is applied to the HTML content of the file, when only the Document Object Model (DOM) structure of the page has been parsed. This means it does not cause any layout shift when the page is displayed. Surprisingly, it does not delay page display as much as one might expect, and is in fact extremely quick. This is because the DOM structure of the TOC itself, and the named anchors which it adds before the headings, does not need to be included in the fetched page (reducing file size), and also, the DOM of the fetched page is simpler. Hence rather than there being a performance penalty, in some browsers on some machines, the page will actually render and load more quickly.

On this Page:

yTOC plugin

download() Plugin

YouTube Plugin

PDF Reader Plugin

Lightbox Plugin

Syntax-Highlighter Plugin

Document Details Plugin

Animations

Blog List

right

The yTOC plugin automatically generates the TOC at the top of the article from level-2 heads, also adding anchors before each H2. Page content can also call the yTOC plugin to create a similar TOC for any set of HTML tags in the document. For example, the yTOC plugin generated the jumplist to H3 tags in this section.

To insert a yTOC plugin on a page as shown, first give the tag AFTER the location to insert the TOC a unique ID. The TOC floats to the right, so it will align with the top of that element block on the right side of the page. All IDs inserted by the Blog Creator begin with the letter 'y', so if the ID begins with any other letter, there won't be a namespace conflict.

Then place the following snippet before that tag, and the TOC will float to the right of the following block element. This example creates a TOC from H5 tags and inserts it before the paragraph with an ID of 'H5toc'.

The yTOC plugin currently cannot be inserted for the same set of tags more than once. This and additional enhancements are planned.

download() Plugin

This plugin makes a download button, automatically adding its filesize in human readable format:

To insert the plugin, place the zipfile in the ./inc/ subdirectory, copy this snippet into your page editor, and change filename.zip to the file you wish to have downloaded. <?php download('filename.zip'); // Inserts download button ?>

YouTube Plugin

This plugin embeds a YouTube player. To set the video, open the video in YouTube and copy the numeric string after the URL's last slash, and insert it into this snippet.

PDF Reader Plugin

The PDF reader has a fallaback to native HTML5 support viewing Acrobat files, but currently the native HTML5 reader only works on desktops with Chrome, Safari, and Edge. To enable a reader which works on all platforms, go to Adobes's Acrobat download page and obtain an ID for the embedded Adobe DC Acrobat reader SDK, and put the ID in this package's lib/config.php file. It will only work on your remote server and not on localhost, not all features are supported on all devices, and PDF indices don't work at all, but it will do at least something on all devices.

To embed the Acrobat reader in a page, first ensure that the $reader variable at the top of the content page template is set to '1.' Then copy the PDF to the ./inc subdirectory, and replace filename in the following snippet with the PDF's filename. The filename is case-sensitive and should end with .pdf. Be careful to keep the quotes around the filename. A future release will include buttons for a better full-screen reader, download, and user help.

Lightbox Plugin

JavaScript at the page's end automatically adds a captioned lightbox slideshow to all IMG elements on the page. The IMG element's ALT attribute sets the caption displayed in the lightbox for each image. The content writer simply needs to include a standard image tag. Optionally, the tag may include a CLASS="left" or CLASS="right" tag to float the image to left or right of the text. <BR> tags can force a column break before or after the <IMG> tag. a STYLE attribute may also over-ride the default height and width.

Syntax-Highlighter Plugin

To highlight code, place codeBegin() and codeEnd() around the text to highlight. Note, curently, the opening bracket of <?PHP and <?/TEXTAREA> must currently be replaced with an < entity so as not to break the parser (to be performed automatically in a future release).

Document Details Plugin

This plugin creates a table of file details which floats to the right of the paragraph following it.

Animations

Currently the Blog Creator supports snow animation via pure JavaScript in Chrome, Internet Exploere 10, and Edge browsers. More animations may be added.

Blog List

Currently yBlog has a special page to support lists of all the pages in a directory, which is planned to become a plugin for articles and side modules in a future beta. all that is necessaary is to set a few variables at the top of the blog listing page.