Description

This plugin inserts a glyph at the end of your article or blog post, just like magazines and newspaper designers do in printed publications, giving it a more professional feel.

A lot of CMSs are ill-equipped to handle this task, and rightfully so. The glyph is decorative and should not be inserted into the original text. This makes it a perfect case for a JavaScript DOM insertion.

What it won't do

Glyphs are only appropriate at the end of text-based works, and thus this plugin will look for the last paragraph. If the work ends in an unordered list, ordered list or definition list, the plugin will look for the last element node in that list, which will either be a list item or definition description, and append the glyph to that item. If lists are nested, the plugin will still find the last list item or definition description in the nested lists.

A glyph appended to a table, image or non-text-based work doesn't make much sense, and so this plugin won't insert the glyph on elements that aren't paragraphs, list items or definition descriptions.

How to use

• Link to jQuery:
  <script type="text/javascript" src="/path/to/jquery.min.js"></script>
• Link to the plugin:
  <script type="text/javascript" src="/path/to/jquery.glyph.min.js"></script>
• Call the plugin in your jQuery code:
  
  $(document).ready(function(){
  $('.article').glyph();
});

Customization

The plugin comes with reasonable defaults: A black square of 100% size with a left padding of five pixels is appended to the end. Feel free to customize it with these options:

• entity: Any HTML entity of your choosing instead of the square.
• color: Any CSS color of your choosing instead of black.
• size: Any CSS font size of your choosing instead of 100%.
• left: Any CSS left padding of your choosing instead of five pixels.
• align: Any CSS vertical alignment of your choosing instead of top (only works if using images, i.e. favicon or domain).
• favicon: The URL of an image. Uses a simple <img /> element. You can link to the favicon (.ico) of your site, but this approach isn't recommended because Internet Explorer doesn't display images whose source files are .ico; see domain.
• domain: The URL of a website whose favicon you want to use. Hopefully this is your own website. :p I recommend using domain instead of favicon because domain takes advantage of Google's undocumented favicon-to-PNG conversion, which means your glyph will appear in Internet Explorer browsers. However, this approach assumes favicon.ico is served at the root of the URL.

Strictly speaking, the domain that Google takes should be in the form of example.com or www.example.com, but the plugin will strip "http://", "https://," any othe protocol and any trailing slash, so feel free to use whichever. How is that for convenience?

The glyph is wrapped in a <span class="glyph"></span>. The glyph class is for your custom CSS style. Note that previous versions of the plugin added the glyph class to the image without a <span>; now the glyph—regardless of being an entity or image or favicon—is wrapped in the <span>.

Examples

An example with no customization (a black square):

$('.article').glyph();

An example with a red snowman:

$('.article').glyph({ entity: '☃', color: '#f00' });

An example with Barack Obama's favicon:

$('.article').glyph({ domain: 'barackobama.com' });

An example with the White House's favicon (this .ico method isn't recommended; see earlier notes):

$('.article').glyph({ favicon: 'http://www.whitehouse.gov/sites/default/themes/whitehouse/favicon.ico' });

Feature requests, bug reports, adoration, etc.

File an issue or just e-mail me at rich@richardcornish.com.

Downloads