Enabling Pretty Photo Integration for all Single Images

edited October 2016 in Files & images
Hello.

I LOVE what you guys did with this theme. Beautiful work.

I do however have a problem that I'm hoping you can help me with. I'm using the built-in PrettyPhoto integration. ANd I love it! It works flawless out-of-the-box on Galleries. However it doesn't seem to work at all on single images. I know that we need to add the rel="prettyphoto" tag to the single images. I just imported over 200 posts with images. Adding over 200 rel tags will take forever. So there has to be an easier way. Plus I'm thinking that since you found a way to automatically enable prettyPhoto integration for all Galleries, there has to be a way to do the for single images as well. How can we get this enabled? Is there a line of code I can change in the theme files to make PrettyPhotos work on all single images in posts?

I tried to force it using Javascript, so I added the following code to BeTheme Options –> Custom JS:

jQuery(document).ready(function(){
  jQuery('.post-wrapper-content a').has('img').attr('rel', 'prettyphoto');
});

It adds the rel="prettyphoto" tag to the links. However even with that added, the images still don't open in the PrettyPhoto lightbox. Instead they still open the link to the original file.

Suggestions?

Thank you! :)
David

Comments

  • Hi,

    we are very sorry but what you ask for, requires files customization what in reference to Item Support Policy is not allowed. So if you want to modify files and don't know how, you should contact with your web developer.

    Thanks for understanding!
  • Since muffingroup wasn't willing to help, in case anybody else is looking for the same functionality, what I ended up doing is adding the following code to the Child theme's functions.php:
    _________

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

    _________

    It gets the job done in the way I needed - it adds the "prettyphoto" rel tag to single photo links. Hope this helps someone in the future.
  • Well, that wasn't quite the answer I was looking for, but you gave me the perfect clue!

    I need prettyphoto to open up for certain images (play buttons) that show a YouTube video in the prettyphoto box.

    Answer: <a href="...." rel="prettyphoto"><img src="....." /></a>
  • Geez... now I need this code, and it's not working.  I've added it to my functions file, but it's not working.
  • When I add the class prettyphoto to an image... nothing happens, in fact all I get is a popup with the circle thingy moving.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.