Simple Lightbox 1.5.3

Logic, Captions, and more!
By Sol in Lab

A new week, a new version of Simple Lightbox has made it into the world.  In version 1.5.3, logic rules the day, while captions make sure to show up on time (for once!)

Logic

I’m not afraid to admit that I don’t always have my logic straight.  Okay, I am, but I’m facing that fear right now.  Ross pointed out that when the “Group automatically activated links” option is disabled, the lightbox stopped working entirely.

Obviously, that’s not right.

The culprit was this conditional statement:

if ( ! is_feed() && $this->is_enabled() && $this->get_option_value('activate_links') && $this->get_option_value('group_links') ) {
...Scan post content and activate links
}

It acts as the gatekeeper to determine whether links in a post should be activated to work with SLB.  As a result, when the option to group links was deactivated, then no links would be activated.

Thankfully, the fix was simple– remove the code that checks if the group links option is enabled or not from the conditional statement:

if ( ! is_feed() && $this->is_enabled() && $this->get_option_value('activate_links') ) {
...Scan post content and activate links
}

Now links don’t have to be grouped for SLB to work.  Imagine that!

Captions

Erin commented that she was having problems with getting the caption to display as desired.  Ten minutes later, she returned to let me know that all was well and that she had found the answer to her earlier query.

Nevertheless, the deed had been done.

Making sure that users knew where to type their caption when inserting an image was something that I had been meaning to improve for some time, and Erin’s comment gave me the boost that I needed.

When inserting an image from WordPress’ media library, you are presented with a myriad of options

Where does the caption go?

Since the Title field is the only required field, this is the first one that SLB will use– or at least, that what SLB should be doing.  It’s been a while since I had a look at the caption generation code, so I took a look to make sure.

Turns out, all was well in SLB-land.  Save for one addition for hand-coders, SLB works with WordPress’ way of inserting images.

Here is what SLB uses to generate the caption for an image, ordered by precedence:

  1. Image title attribute
    This is populated with the value to add into the Title field when inserting an image from WordPress’ media library.
    Example

    <a href="image.jpg"><img src="thumb.jpg" title="Title added by WP" /></a>
  2. Link title attribute (for all the hand-coders in the house)
    Adding a title to a link is pretty standard fare for those familiar with writing accessible HTML markup. This attribute is given the highest precedence because it would only be present if the image link was added manually (and thus the author most likely wants this attribute to be used as the caption).
    Example

    <a href="image.jpg" title="This is the manual caption">...thumbnail image...</a>
  3. Image alt attribute
    As you might surmise, this attribute uses the text you type into the Alternate Textfield when inserting an image from WordPress’ media library.  It is meant to be more of a placeholder for the image in screen readers and browsers with images disabled as opposed to a title for the image, but it’s better than nothing.
    Example

    <a href="image.jpg"><img src="thumb.jpg" alt="Thumbnail image" /></a>
  4. Link text
    If there is no image in the link, or if said image has no valid attributes to use for the caption, SLB checks for anytext in the link.  If found, it uses it as the caption.
    Example

    <a href="image.jpg">Just a text link</a>
  5. Image source URI
    If no other valid values are found for the caption, SLB will use the linked image’s source URI as the caption.  As with using alt text, this isn’t exactly ideal, but it is better than nothing.  Of course, displaying the source URI by default may not be better than nothing, so there is an option in SLB’s settings to turn off this functionality, in which case, no caption is displayed.

Finally, it turns out that all was mostly well in SLB-land.  I also found a bug:

Original Code

if ( !caption && imageLink.text().length )
	caption = imageLink.text();
else if ( this.options.captionSrc )
	caption = imageLink.attr('href');
else
	caption = '';

As you can see, the image’s source URI will be used as a last resort if we don’t have a valid caption yet and if there is no text in the link.  However, due to a bug in the conditional statements, the source URI will also be used if we already have a valid caption.  Obviously, this is a bug.

Updated Code

if ( !caption ) {
	if ( imageLink.text().length )
		caption = imageLink.text();
	else if ( this.options.captionSrc )
		caption = imageLink.attr('href');
}
if ( !caption )
	caption = '';

Now the link text or source URI can only be used if we don’t already have a valid caption from the aforementioned attributes that have higher precedence.

Improving Relationships

Previously when activating links in post content, SLB would add “lightbox” to a link’s the rel attribute if it wasn’t already present.  I felt this might be kind of heavy-handed so this functionality has been modified for the time being.  Now, “lightbox” is only added to the rel attribute if nothing else has been set there.  The specification for the rel attribute states that it is a space-separated list of relationships, which means that multiple values can be added to this attribute, so I’ll be looking at ways that improve a user’s control over whether the lightbox is used for a link or not.