Search code examples
htmltwitter-bootstrapphotosflickrimage-size

Flickr API photo search - How to get larger images?

So I'm using the Flickr API to do a photo search and show the images on the page, however it seems like every image I get is thumbnail size or extremely low resolution; what am I doing wrong?

link

Here's my code: 

<html>  
<head>  
<title>Test App Project</title>  
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">   
<style type="text/css">  

    .searchArea
    {
        height: 25%;
    }

    .cover-container {
        height: 75%;
        width: 100%;
        white-space: nowrap;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .cover-item {
        display:block;
        /*
        margin-top: 8px;
        margin-bottom: 8px;
        */
        margin: 25% 35% 25% 35%;
        box-shadow: 2px 2px 4px #bbb;
        border-top-right-radius: 4px;
        width: auto;
        height: auto;
        vertical-align: bottom;
        background-position: top left;
        background-repeat: no-repeat;
        background-size: cover;
    }

</style>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
<script>  


$(document).ready(function(){  
    $('#button').click(function(){  

        //Clear previous images
        document.getElementById("results").innerHTML = "";

        var search_val = document.getElementById("search_field").value; 

        var apiurl_search = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=REDACTED&tags="+ search_val +"&safe_search=3";
        var src;

        $.getJSON(apiurl_search + "&format=json&jsoncallback=?",function(data){
            $.each(data.photos.photo,function(i,myresult){

                src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg";

                $("<img class='cover-item' />").attr("src", src).appendTo("#results");

                if (i == 24) return false;
            });  
        });  
    });  
}); 

</script>  
</head>  
<body>  
<div class="container">  
    <div class="row searchArea">  
        <div class="col-md-4"></div>
        <div class="col-md-4">  
            <div class="row">
                <div class="col-md-12">
                    <h2>Test App Project</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <label for="search_field">Search: </label>
                    <input id="search_field" type="text">
                </div>
                <div class="col-md-1"></div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <button type="button" class="btn btn-success" id="button">Fetch Recent Photos</button>  
                </div>
                <div class="col-md-2"></div>
            </div>
            <hr>  
        </div>  
        <div class="col-md-4"></div>
    </div>  

    <div class="row-fluid">  
        <div class="col-lg-12 col-md-10">
            <div id="results" class="cover-container">
            </div>
        </div>  
    </div>  
</div>  
</body>  
</html>
Solution

  • From what I can see you are returning the size of Small because you have "_m" at the end of your image names. Try replacing the "_m" with "_c" and it should give you a 800x800 size.

    You might want to make a call to "flickr.photos.getSizes" for each image ID to check the size is available. You can see an example response here - https://www.flickr.com/services/api/flickr.photos.getSizes.html

    So in the above code you might want to test this by replacing...

    src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_m.jpg";

    with..

    src = "http://farm"+ myresult.farm +".static.flickr.com/" + myresult.server + "/" + myresult.id + "_" + myresult.secret +"_c.jpg";

    If the above works, I would check all images and if some are not being returned you might want to make a size call to find available sized before you specify one.