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 the
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
- 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 forany 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.
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 changefilename.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'slib/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 replacefilename 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.
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.
To highlight code, placecodeBegin() andcodeEnd() 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.