Yview for Joomla generates optimal thumbnails for images and blogs, and adds a fast, small, responsive, lightbox image viewer and Youtube player, with full-featured image metadata.

Yview Joomla Administration Panel
Yview Joomla Administration Panel

Overview

The thumbnail generator creates optimal, progressive JPEG thumbnails that pass Google PageSpeed and Yslow compression tests, if Imagick is available on the server (or uses GD2 if not). Thumbnails may be enabled separately, and be of different sizes, on article and blog pages.

Yview's custom lightbox script is <4KB (<1KB compressed) and does not require or interfere with any other JavaScript libraries. Yview also includes an enhanced version of the Yofiel Ytube player that may play videos inline, or in a lightbox.

The lightbox includes a custom hover cursor, semitransparent backdrop, loading animation, full image zoom animation on load, caption, and responsive layout that adjusts size if the image is larger than the viewport. The JavaScript code and images are stored in the media directory, as per Joomla 3.4's recommendations for best Google search results.

The plugin's HTML5 option adds HTML5 tags and attributes that pass all W3C tests. The plugin can optionally add image microdata, page thumbnail, and OpenGraph metadata that is accepted by Google search, Bing search, Google+, LinkedIn, Facebook, and Twitter.

Installation

Install directly from the zipfile download. After installation, enable the content plugin.

Usage

When enabled, the plugin can generate a thumbnail and lightbox, with caption, and metadata for any images in your article content that are simply described like this:

Hide LIne Numbers
  1. <img src="images/stories/mypic.jpg" alt='my description">

The caption may instead be made from the TITLE attribute, if there is no text in the ALT attribute. The path to the original image may be absolute or relative, but it should be in the Joomla images or media directories, or any of their subdirectories.

Technical Notes: The original image should be at least 200px, both in width and height, for Facebook to accept it properly. For the title, it is advisable to use the ALT text (if you specify only one of the two), because if the Yview plugin is disabled, the image will still have ALT text, which is a required attribute for images in HTML5.

Yview can also put a fast, responsive HTML5 YouTube player into articles, simply by putting Youtube address in the article content like this:

Hide LIne Numbers
  1. {<b>youtube</b>}<font color="blue">xxxxxx</font>{<b>/youtube</b>}

For example, if the URL is www.youtube.com/watch?v=2jvLalY6ubci, then insert {youtube}2jvLalY6ubc{/youtube} into the article.

Metadata

When a page contains thumbnails, it is difficult for automated software to know which image to use, and usually defaults to allowing only the first inline thumbnail rather than the full-size image links.The metadata for Google, Facebook, Twitter, and LinkedIn informs the software which images to display. For example, in Facebook, after enabling Yview metadata, the images will be full size, and you will be able to select which image to post with an article using the left/right arrows in the top left corner.

Image selection in Facebook with Yview
Image selection in Facebook with Yview

You don't need to do anything besides enabling Yview metadata. But as you may have other plugins generating metadata, you can disable it separately for each metadata type in Yview. And in fact, if you are happy with the images you have, you can configure Yview not to generate thumbnails and simply add metadata with it..

Administration

Note: Yofiel does not ask for any donations or promote paid products in Yview..

Article Thumbs

Thumbnails are stored in server_root/images/stories/Yview/. The lightbox script and styles are only added to a page's HEAD element if they are needed in the content.

Technical Note:: If HTML5 is enabled, the plugin links the JavaScript to the images by inserting a custom HTML5 attribute into the anchor tag around the image. Conventionally lightboxes set the REL attribute to "thumbnail" or "lightbox"; however this generates a W3C validation error, as these are not valid values for the REL atrribute. Therefore, if HTML5 is enabled in the plugin's 'extra options' panel, it instead inserts a 'data-img' attribute, which is legal in HTML5. If HTML5 is not available, or the lightbox is being used in Kunena, it falls back to using the REL attribute.

The following options are available in the Joomla content plugin administration panels.

Thumbnails on Articles
Enables thumbnails for articles.
Thumbnail Width
Sets width of the thumbnail file in pixels. If set to 0, thumbnail is constrained by height instead. If both width and height are 0, it defaults to 250px width. If both width and height are set, it constrains by width.
Thumbnail Height
Sets height of the thumbnail file in pixels. If set to 0, thumbnail is constrained by width instead. If both width and height are 0, it defaults to 250px width. If both width and height are set, it constrains by width.
Thumbnail Quality
Sets quality of thumbnail as percentage.At 100 the image is stored without compression, but is large. At lower values the image is more compressed but less accurate. A value of 75-90 is typical.
Add Image Microdata
If enabled, adds microdata describing the image in a format acceptable to Google. It may take two weeks or more for Google to respond after adding this change.
Add OpenGraph Data
If enabled, adds OpenGraph tags in a format acceptable to Facebook, Linkedin, and Twitter.

Blog Thumbs

Thumbnails are stored in server_root/images/stories/Yview/ (the same directory as for article thumbs). If the article and blog thumbs have the same dimensions, they use the same file, and it is only generated once.

Yview Blog Administration
Yview Blog Administration

These settings are applied to category, categories, and featured pages(including the front page).

Thumbnails on Blogs and Front page
Enables thumbnails for articles on featured, category, and categories pages. This also enables lightbox support for Kunena.
Add Links instead of Lightbox
If enabled, clicking the images on featured and blog pages will open the article instead of opening the image in a lightbox. this setting will not affect Kunena behavior.
Thumbnail Width
Sets width of the thumbnail file in pixels. If set to 0, thumbnail is constrained by height instead. If both width and height are 0, it defaults to 250px width. If both width and height are set, it constrains by width.
Thumbnail Height
Sets height of the thumbnail file in pixels. If set to 0, thumbnail is constrained by width instead. If both width and height are 0, it defaults to 250px width. If both width and height are set, it constrains by width.
Thumbnail Quality
Sets quality of thumbnail as percentage.At 100 the image is stored without compression, but is large. At lower values the image is more compressed but less accurate. A value of 75-90 is typical.
Add Image Microdata
If enabled, adds microdata describing the image in a format acceptable to Google. It may take two weeks or more for Google to respond after adding this change.
Add OpenGraph Data
If enabled, adds OpenGraph tags in a format acceptable to Facebook, Linkedin, and Twitter.

Kunena Support

To use the Yview lightbox with Kunena, simply set Kunena to 'Use existing lightbox' in the Kunena control panel.

Yview attempts to use the blog settings for thumbnail generation in Kunena, but depending on your version of Kunena, Kunena may override the Yview settings.

Youtube Options

The Youtube player resizes itself to fit its container, so it works equally well on phones and desktops.

Technical Note: The original version served video images directly from the Youtube dev servers, which were not optimized and only cached on the client for 6 hours, failing Google's PageSpeed Insight due to inadequate client caching and image file size. For optimal performance, Yview therefore pulls video images from the Youtube servers, resizes and optimizes them, then stores the video image locally. Yview then adds a fixed-size 'play' graphic over the video image which, when clicked, creates an inline HTML5 video player dynamically and substitutes it for the stored video image. The additional code is created by PHP in the plugin, rather than by client-side JavaScript, improving performance and allowing multiple copies of the same video to be on the same page without causing W3C validation errors. This method improves page load speed by at least one order of magnitude over current Joomla alternatives, and passes PageSpeed Insights, unlike Google's own recommended code for this method.

Thumbnails are stored in server_root/images/stories/Ytube/. Currently Youtube images are the same size regardless of location.

Yview Youtube Administration
Yview Youtube Administration

The following options are available in the Joomla content plugin administration panels.

Thumbnails on Articles
Enables thumbnails for Youtube videos on article pages.
Thumbnails on Blogs and Front Page
Enables thumbnails for Youtube videos on blog and featured pages.
Thumbnail Width
Sets width of the thumbnail file in pixels. If set to 0, thumbnail is constrained by height instead. If both width and height are 0, it defaults to 250px width. If both width and height are set, it constrains by width.
Thumbnail Height
Sets height of the thumbnail file in pixels. If set to 0, thumbnail is constrained by width instead. If both width and height are 0, it defaults to 250px width. If both width and height are set, it constrains by width.
Thumbnail Quality
Sets quality of thumbnail as percentage.At 100 the image is stored without compression, but is large. At lower values the image is more compressed but less accurate. A value of 75-90 is typical.
YouTube in Yview Lightbox
If on, the video is shown in the Yview lightbox when the user clicks the thumbnail. If off, the video replaces the thumbnail when the user clocks the play button, and is shown inline, in the same place as the thumbnail.

Extra Options

Yview Extra Options
Yview Extra Options
Enable HTML5
Adds FIGURE, FIGCAPTION, and VIDEO tags, and improves Youtube rendering speed by using an HTML5 Youtube player. If disabled, DIV tags are added instead. The current version does not support the MacroMedia Flash player for browsers which do not support HTML5 (as Youtube has indicated it will be deprecating it).
Enable Imagemagick
If Imagemagick is available on Server, use it for thumbnail compression. Imagick provides better compression and creates progressive JPEGs which are recommended by most Web analytics. Generally you would leave this enabled, but if you want to turn off ImageMagick or any reason, you can do so here.
Clean IMG tags
If your WYSIWIG editor encapsulates IMG tags with P tags, this removes them, as Internet Explorer disapproves of it.
Add Thumbnail to Header
Puts a META tag in the HTML HEAD element declaring a microdata image for the page. It uses the first thumbnailed image or Youtube video on the page. In some cases Google will display this image with search results. It may take two weeks or more for Google to respond after adding this change.

More Metadata

You can add additional metadata whether or not you are using the thumbnail or lightbox.

More Metadata
More Metadata
Canonical URL
"Adds SEF-qualified URL head link to current page. This is intended to hint to robots and search engines what the page URL should be,m if the page is arrived at from anon-SEF or other URL.
OpenGraph and Twitter Description
Adds OpenGraph and Twitter tags declaring page description,.The value is the same as for the page description, but Facebook and Twitter require this additional Meta statement. The page description may be taken from the article, category, menu, or global site description, depending on your site configuration.
Facebook ID
If present, adds tag declaring author (and admin) for the owner's Facebook page.. The correct value is a numeric string. You can try a href="http://findmyfacebookid.com">http://findmyfacebookid.com if you are not certain what it is.
OpenGraph Locale
If present, adds OpenGraph tag declaring the page language (defaults to "En-GB"). Leave empty so as not to add this tag.
OpenGraph and Twitter Site Name
Adds OpenGraph and Twitter tags declaring global site name. The value is taken from the global configuration setting for the site name..
OpenGraph and Twitter Page Title
Adds OpenGraph and Twitter tags declaring current page title. The value is the same as the current page title, but Facebook and Twitter require this additional Meta statement.
OpenGraph and Twitter URL
Adds OpenGraph, and Twitter tags declaring the SEF URL for current page.this value is the same as for the canonical URL, but Facebook and Twitter require this additional Meta statement.

Styling

You can change the default styling for the lightbox Youtube player here,or integrate it with other stylesheets.

Yview stylesheet customization
Yview stylesheet customization
Lightbox CSS
The styling for the lighbox container. If your Joomla installation is not in the root folder for your HTML content, you will need to modify the paths to the background URLs for your own server. For more information on the style elements, please see Yview ~ 4KB Responsive Lightbox
Youtube CSS
The styling for the lighbox container. If your Joomla installation is not in the root folder for your HTML content, you will need to modify the paths to the background URLs for your own server. For more information on the style elements, please see Ytube ~ Fast Youtube Viewer

Version History

  • v1.8 (11/21//2015) - Youtube thumbnails included in blog metadata. Added support for Google's requirement for image metadata for each blog article in featured pages and blog listings.
  • v1.7.1 (4/7/2015) - Fix Imagick scales incorrectly when thumb dimension is larger than original. Admin can select links instead of lightbox for images on blog and front page.
  • v1.6 (4/4/2015) - Admin: add more metadata.
  • v1.5.5 (4/3/2015) - Support PRE tags without GESHI; support metadata without thumbnails.
  • v1.5 (3/31/2015) - Admin can set custom styles. Enabled video autoplay and full-screen mode in lightbox; permit HTML5 fallback from Flash.
  • v1.4 (3/30/2015)
    • Youtube: Admin can choose to show videos in lightbox.
    • Youtube: Admin can set thumb quality separately for article images, blog images, and Youtube thumbnails.
    • HTML: include image height and width in thumbnail style attribute for faster page rendering.
    • GD2: make source extension lowercase.
    • Imagick: support images with alpha transparency.
    • Kunena integration.
  • v1.1 (3/29/2015)
    • Joomla:Admin forms do not cast true/false values as boolean
    • PHP 5.4: file_exists doesn't support URLs on Windows
    • Inmagick: NewMagicWand() throws error instead of returning null on Windows
    • Facebook: Requires OG tags in head element instead of BODY
    • Domain root and base may be other parts of image path
    • Images and videos may be in any order
    • Preserve GESHI highlighting across nested IMG tags in PRE and CODE tags
    • LINUX: requires physical paths rather than URLs to handle uppercase letters in extensions
    • PHP 5.5: preg_replace(/e option) is deprecated
    • Added a missing dot in filenames
  • v1.0 (3/25/2015) Initial release

Download

Download: yView 1
Title
yView 1 (Details)
File Type
zip
File Version
1.8
File Size
12.11 Kb
Brief Description:
Joomla 3.3+ plugin for Yview thumbnail generator, image lightbox, and Youtube player.