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
Created: Nov 2020 |
Modified: July 7, 2021 |
Beta .33: July 7, 2021 |
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.
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.