Add rel=lightbox to images extracted automatically from rss feeds

  • Hello. I am trying to add an image feed from Tublr onto my wordpress site. I created a custom page template and added this code to get the feed:

    <?php
include_once(ABSPATH . WPINC . '/rss.php');
$feed = 'https://example.com/feed/';
$rss = fetch_feed($feed);
if (!is_wp_error( $rss ) ) :
    $maxitems = $rss->get_item_quantity(3);
    $rss_items = $rss->get_items(0, $maxitems);
    if ($rss_items):
        echo "
<ul>\n";
        foreach ( $rss_items as $item ) :
            echo '
<li>';
            echo '<a>get_permalink() . '">' . $item->get_title() . "</a>\n";
            echo '<p>' . $item->get_description() . "</li>
\n";
        endforeach;
        echo "</ul>
\n";
    endif;
endif;
?>

    I get the feed I want but I would want to add an extra funcionality – namely I wanted to add rel=”lightbox” to all the images that are extracted so people can click on them to view them enlarged – some are a little small by default.

    Anyone can show me how to tweak this php code in order to achieve this?

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • foreach ( $rss_items as $item ) :
  ob_start();
  echo '<li>\n<a>get_permalink() . '">' . $item->get_title() . "</a>\n";
  echo '<p>' . $item->get_description() . "</li>\n";
  $content = ob_get_clean();
  $content = preg_replace("/img/i",'img rel="lightbox"',$content);
  echo $content;
endforeach;

    that should do it for you.

    Thread Starter pararir

    (@pararir)

    Thank you! That worked great!

    However I have one more problem. The images it gets from Tumblr feed are always 500px wide. I think this is a standart feature from tumblr for the homepage.

    So I just discovered the lightbox effect just highlights the images but it doesnt alter it’s size to the original bigger images.

    Now I discovered that the original pictures links always ends with the 1280 while the feeds image I get always ends with 500 reference (I assume this is created automatically by tumblr and represents the maximum width).

    So in the feed (the one I grab) I’ll get say the image with this link: https://25.media.tumblr.com/tumblr_m50hruG2NW1qmggloo1_500.jpg

    But the link of the original (and bigger) image I want is this:
    https://25.media.tumblr.com/tumblr_m50hruG2NW1qmggloo1_1280.jpg

    I need to grab the original 1280 px and not the feed standart 500px images. So my question is:

    Is there something I can add in the script to change the expression “500.jpg” for “1280.jpg” in all the images url’s that are extracted?

    That would link my lightbox plugin to all the original images and solve the problem.

    Hope I wasn’t very confusing in explaining the problem. Thanks in advance!

    Moderator bcworkz

    (@bcworkz)

    $content = str_replace('500.jpg', '1280.jpg', $content);
    just before the echo line should work.

    Thread Starter pararir

    (@pararir)

    Thank you bcworkz!

    That worked!

    However, I just now discovered that some of the pictures in the original feed don’t have the 1280 version.

    When that happens the image appears as non existent (because the 500.jpg exists, but not the 1280.jpg image) so it gives an error.

    Is it possible to just change from “500.jpg” to “1280.jpg” if the 1280 link / image exists?

    Thank you once again! WordPress Comunity rocks!

    Moderator bcworkz

    (@bcworkz)

    You would have to use cURL to send a HEAD request for your large image file to tumblr.com, and only do the ‘1280.jpg’ substitution if you got a 200 OK response from their server.

    Sorry I can’t offer code for that off the top of my head, but it shouldn’t be too involved. First thing is to ensure the cURL module is available on your server.

    Thread Starter pararir

    (@pararir)

    Hi again!

    I confirmed with my host that cURL is available on my server… I’ve been browsing the Internet for a week and found several pieces of information concerning the usage of cURL.

    However I’m not a programing wizard, and I’m just completely confused by it.

    I get that I need to somehow include a function with CURLOPT_NOBODY, and then use a if else to replace (or not) 500.jpg wih 1280.jpg.

    But I don’t know how to begin, especially how will I say to cURL which is the URL I want checked…

    I’ll transcribe the code I got so far, so it’s easier to read:

    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

    This is what I have. But how do I include the cURL request in all this?

    Thank you!

    Moderator bcworkz

    (@bcworkz)

    CURLOPT_NOBODY is part of one way to do it. Here is another way:

    $url = 'https://25.media.tumblr.com/tumblr_m50hruG2NW1qmggloo1_1280.jpg';
$ch = curl_init(); curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt ($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11');
curl_setopt($ch, CURLOPT_HEADER, true); // header will be at output
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'HEAD'); // HTTP request is 'HEAD'
$content = curl_exec ($ch); curl_close ($ch);

    $content should end up being something like (verify this) either 200 OK or 404 Not Found, based on which you will know which URL to use as src=. You will need to search and replace the image size parameters of the actual image you want to retrieve in order to properly define $url.

    You may want to add your site URL to the user agent string so anyone examining the access logs at tumblr.com can confirm you are a legitimate access and not some weird Russian scraper.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Add rel=lightbox to images extracted automatically from rss feeds’ is closed to new replies.