How and Why to Suppress the PrettyPhoto Effect in WordPress

frog-mascot

PrettyPhoto is a media lightbox that allows its users to open up media content in beautiful frames. A lot of WordPress themes and plugins come with PrettyPhoto already included in them.

How Does PrettyPhoto Work?

The way PrettyPhoto works is that it adds a rel="prettyPhoto" attribute to any links that point to images of the following formats: bmp, gif, jpg, and png. In some editions it also adds this attribute to videos and flash content.

So, for example, if you add a media to your post with the following code:

then PrettyPhoto will add the rel="prettyPhoto" attribute right after like this:

An Example

Let me show you how this works on a real life example:

PrettyPhoto test image

PrettyPhoto test image opens in lightbox

To disable the PrettyPhoto effect on this particular image, I have to add rel="no_prettyPhoto" into the code:

Let’s take a look at the difference…

PrettyPhoto test image

PrettyPhoto test image opens in new tab

This image doesn’t open in a nice lightbox. But rather it opens up in its own tab which is both less useful and less pleasing to the eye.

When and How to Suppress PrettyPhoto

But sometimes it is necessary to use the rel="no_prettyPhoto" attribute.

For example, when I create a link to a post of mine that ends with JPG and use the title attribute which also ends with JPG, then I get this error:

pretty-photo-error

PrettyPhoto error message

You can try it out yourself:
How to Use Image Formats Correctly — GIF, PNG, or JPG.

The error doesn’t occur when I omit the title=”How to Use Image Formats Correctly — GIF, PNG, or JPG”, check it out: How to Use Image Formats Correctly — GIF, PNG, or JPG.

But after I add the rel="no_prettyPhoto" attribute, even while using the title attribute, look what happens: How to Use Image Formats Correctly — GIF, PNG, or JPG.

Suddenly, the link works as it should.

Of course, there might be other, completely different reasons for suppressing PrettyPhoto, too.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

Your email address will not be published. Required fields are marked *