Adding media and downloads to yBlog
|Created: Nov 2020|
|Modified: July 7, 2021|
|Beta .33: July 7, 2021|
Unlike most other yBlog plugins, the yTOC plugin is in
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
- Blog List
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
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.
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.
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
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.
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="right" tag to float the image to left or right of the text.
<BR> tags can force a column break before or after the
tag. a STYLE attribute may also over-ride the default height and width.
To highlight code, place codeBegin() and codeEnd() around the
text to highlight. Note, curently, the opening bracket of
<?/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.
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.