Search code examples
javascriptjqueryflickr

Extract Flickr photo ID from static image URL

The goal of this is to automatically add an attribution link to an image used in a blog post. I've got a demo set up here which manually uses flickr.photos.getInfo to build the attribution URL on the image.

To do that, I took the photo ID from background-image in the CSS and created the API call. What I'd like to do is automatically pull the photo ID (3990985751 for this example) from the background-image url to create the API call on each post.

CSS

.featured {
background-image:url('https://farm3.staticflickr.com/2613/3990985751_7ca0769f15_b.jpg');
}

HTML

<div class="featured">
<body>
    <div class="featured">
      <div id="featured-credit">
        <p id="credits"></p>
      </div>
    </div>
  </div>

jQuery/JS

// Builds the URL to link in the image credit
      function jsonFlickrApi (response) {
        $("#credits").html('<a href="http://www.flickr.com/photos/'+response.photo.owner.nsid+'/'+response.photo.id+'/" target="blank">'+response.photo.title._content+"</a>");
      }

      // removes the CSS formatting for the featured image background URL
      function extractUrl(input) {
        return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
      }

    /* After all the scripts are loaded, send the featured photo to the Flickr API to get the JSON data */
    <script src="https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=APIKEYHERE&photo_id=3990985751&format=json&jsoncallback=?"></script>

I researched a bunch on SO and other sites, and the other solutions I found were all using the profile URL, whereas I need to use the static source URL. Any help is appreciated.

Solution

  • I commented above that the $.ajax call wasn't working for me, but I was able to solve it using jQuery's $.getJSON method. JS only below:

    // removes the CSS formatting for the featured image background URL
      function extractUrl(input) {
        return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
      };

      //Set a variable to hold the extracted URL & pass the string to the next function
      bg = extractUrl($(".featured").css("background-image"))
      extractPhotoId();

      // This *really* ugly Regex pulls out the photo ID from the extracted URL and saves it in a variable
      function extractPhotoId() {
        photoId = bg.replace(/(.+\.[a-z]{2,4})\/(\d{3,5})\/(\d{7,15})(?:(?!ab).)*/ig, '$3');
      }

      // Constructed API url to use with the JSON request
      var apiUrl = "https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=c8c95356e465b8d7398ff2847152740e&photo_id=" + photoId + "&format=json&jsoncallback=?";

      // Call the Flickr API URL and apply the data to the source credit div
      $.getJSON(apiUrl, function(data){
          $("#credits").html('<a href="http://www.flickr.com/photos/'+data.photo.owner.nsid+'/'+data.photo.id+'/" target="blank">'+data.photo.title._content+"</a>");
        });

    Here's a working CodePen demo if you want to play with the image source in the CSS to try it out. You may need to refresh the page after you change the source URL in background-image to get it to update the credit.