Weird automatic input of rel="facebox" in img tag

Get Started
1

I’m trying to validate my html “carp-fishing-reels.com/bait-boats” at W3 and am encountering a strange issue.
I’m using wordpress 3.0.1 and I have a FaceBox plugin (modal window app) and do the coding myself. When I run the page through the Validator the error it returns is:
Line 62, Column 120: there is no attribute “rel”

…uploads/2010/05/finalbutton1.jpg" rel=“facebox” alt=“Buy Now Button” width="11…

I’m not putting a rel=“facebox” tag in there it seems to happen automatically. Its not in the wordpress coding but is in the page source?
I’m guessing it is related to the facebox plugin having a function that automatically does it but having looked down that route its still unresolved, so any help or ideas would be useful?

2

I assume you’re using the wp-facebox version of the plugin rather than the original. wp-facebox uses PHP to add attributes to elements intended as trigger for the Facebox modal window. i.e.

function rel_replace( $content ) {
		$pattern = "/<a(.*?)href=('|\\")(.*?).(bmp|gif|jpeg|jpg|png)('|\\")(.*?)>(.*?)<\\/a>/i";
		$replacement = '<a$1href=$2$3.$4$5 rel="facebox"$6>$7</a>';
		$content = preg_replace($pattern, $replacement, $content);
		return $content;
	}

$pattern finds anchors with an href pointing to an image file.
$replacement adds the rel=“facebox” to the anchor, which Facebox will then identify as a selector/trigger

For some reason, rel=“facebox” is being added to certain img elements (“Buy Now” buttons) rather than a elements. Their parent a elements - and some other unrelated anchors - have rel=“nofollow” applied.

Perhaps another plugin is adding the rel=“nofollow” thereby causing a conflict.

Maybe the settings for the wp-facebox plugin are wrong (I’ve not used the plugin, so can’t make suggestions).

What images are you intending to open in Facebox modals? Larger boat pics?

In any event, as Facebox - and other similar lightbox/modal plugins - use rel=“” as a selector, you are not going to achieve 100% validation out of the box. If validation is crucial to your project then you’ll need to investigate tweaking the code to employ a valid attribute as a Facebox trigger selector, or seek a different method of displaying modals.

Sitepoint’s Craig Buckler has written on the use of rel as a custom attribute: http://blogs.sitepoint.com/2009/08/28/rel-not-a-custom-attribute/

3

Thanks for your help. I thought something like this was happening but I’m new to PHP so struggle with it.
I add the rel=“nofollow” to the ‘Buy Now’ anchors because they are external affiliate links. But if I remove them the same problem still happens so I don’t think there is a conflict there.
On the Bait Boats page I do not intend on opening any images in facebox, I do open pictures on other pages though.
Presumably If I remove the $pattern or the $replacement it will stop doing it automatically and I can just add rel=“facebox” into the code where neccessary?

Thanks for your help again, :slight_smile:

4

A quick update of the work.
I removed the $replacement line of code and that resulted in me losing all my buy now buttons and pictures on the site! I added it back in and they returned…phew!
As a temporary approach I’ve removed the png from the $pattern line of code and intend to use just png “Buy Now” buttons. Would you suggest this or would it be better to remove the whole line of code?
I got validation on the page btw, thanks for all your help.

5

Removing the whole $pattern line would prevent the plugin from working altogether, so if editing out png does what you need then stay with that. Consider adding a comment noting your edit e.g.

function rel_replace( $content ) {
		// removed png from list of image file extensions
        $pattern = "/<a(.*?)href=('|\\")(.*?).(bmp|gif|jpeg|jpg|png)('|\\")(.*?)>(.*?)<\\/a>/i";
        $replacement = '<a$1href=$2$3.$4$5 rel="facebox"$6>$7</a>';
        $content = preg_replace($pattern, $replacement, $content);
        return $content;
    }

Alternatively, you could apply rel=“facebox” manually where required, as you are already doing for some non image elements such as Review links. To disable auto generation of rels, set the autofilter option in wp-facebox.php to 0 (do_gallery could probably also be turned off).

$this->opts = array(
	'autofilter' => 0,
	'do_default' => 1,
	'do_gallery' => 0,
	'loadscript' => 1
);
6

The autofilter is exactly what I wanted to do…thanks very much.