Add a method to pass an image thumbnail URL as placeholder

[ronaldoeyeem]

There're several use cases where apps shows a thumbnail image and onClick() it expands to a full sized image.

It would be a great feature to be able to easily smooth transition between those two states by calling:

Picasso.with(this).load(full_img_url).placeholderUrl(thumb_url).placeHolder(drawable).into(target);

In that case, Picasso would

if( thumbnail image available from local cache ){
     // that would be expected case
     // the thumbnail is already on screen, so it should be cached too
     use the image thumbnail as placeholder
} else{
    // and fall back in case anything happens
    use the supplied drawable as placeholder
}```

[JakeWharton]

This is exactly the same as calling Picasso twice with the same URL but
with two sizes and target image views.
On Feb 5, 2014 1:51 AM, "ronaldoeyeem" notifications@github.com wrote:

There're several use cases where apps shows a thumbnail image and
onClick() it expands to a full sized image.

It would be a great feature to be able to easily smooth transition between
those two states by calling:

Picasso.with(this).load(full_img_url).placeholderUrl(thumb_url).placeHolder(drawable).into(target);

In that case, Picasso would

if( thumbnail image available from local cache ){
// that would be expect case
// the thumbnail is already on screen, so it should be cached too
use the image thumbnail as placeholder
} else{
// and fall back in case anything happens
use the supplied drawable as placeholder
}```

Reply to this email directly or view it on GitHubhttps://github.com//issues/383
.

[dvojtise]

Not really, I have the same requirement
Actually the images are different on internet : one big, one thumbnail
it is acceptable to download the thumbnails to populate a listview, however one cannot afford to download the bigger one and then resize them on the device, the download time will not be acceptable ...

Reusing the thumbnail url as a placeholder when displaying the bigger one then make sense...

[JakeWharton]

We can't retrieve the placeholder in that fashion. It is not indexed solely
by URL in the memory cache.
On Feb 5, 2014 8:07 AM, "dvojtise" notifications@github.com wrote:

Not really, I have the same requirement
Actually the images are different on internet : one big, one thumbnail
it is acceptable to download the thumbnails to populate a listview,
however one cannot afford to download the bigger one and then resize them
on the device, the download time will not be acceptable ...

Reusing the thumbnail url as a placeholder when displaying the bigger one
then make sense...

Reply to this email directly or view it on GitHubhttps://github.com//issues/383#issuecomment-34197567
.

[ronaldoeyeem]

not exactly as calling Picasso twice.
the thumb_url is an URL that most likely is already locally cached and it will only be shown if already available.
the full_img_url is an URL that most likely is not cached yet and will probably result in a much bigger/time consuming download (e.g. 1.2mb).

the idea behind it is that the placeholder will be a blurred image representative of the actual final image being downloaded.

Of course someone could think a better name for the methods, but I reckon it's a very valid use case and a feature lot of people would benefit from.

[JakeWharton]

We cannot look up the smaller image. Much more goes into caching than just
the url from which the image is loaded and the cache is not set up for
queries of this manner. Your best bet is to hold on to the smaller Bitmap
from into()'s callback and hand it off to the larger image call to Picasso
as the placeholder.

---

Jake Wharton
http://about.me/jakewharton

On Wed, Feb 5, 2014 at 8:14 AM, ronaldoeyeem notifications@github.comwrote:

not exactly as calling Picasso twice.
the thumb_url is an URL that mostly is already locally cached and it will
only be shown if already available.
the full_img_url is an URL that most likely is not cached yet and will
probably result in a much bigger/time consuming download (e.g. 1.2mb).

the idea behind it is that the placeholder will be a blurred image
representative of the actual final image being downloaded.

Of course someone could think a better name for the methods, but I reckon
it's a very valid use case and a feature lot of people would benefit from.

Reply to this email directly or view it on GitHubhttps://github.com//issues/383#issuecomment-34198982
.

[dvojtise]

I'll give a try to chain 2 picasso requests, one to load the thumbnail and capture its bitmap with its into() callback (which is supposed to be fast) but do not display it, then hand it to the second request as placeholder for the larger image.
The only drawback I foresee is that it creates 2 threads which is a bit less efficient ?

[ronaldoeyeem]

I reckon that chaining calls, although possible, is somewhat a redundant.
Although theoretically, the image should already be in RAM cache, if by any chance it's not (e.g. the user clicked too fast), it will take the time to download the first one and then download the second one.

If it's not possible to get from the cache using the URL somehow as a key, then it's better left to individual devs to call something like

onClick(View v){
    Drawable placeholder = ((ImageView)v).getDrawable();
    // then use this drawable, if not null, for the placeholder to the next call
}

But that approach limits a bit the implementation and I thought it could have a more elegant way to do it from within the library

[Abdelhady]

It is a worthy feature for a better UX to show the thumbnail as a placeholder until the real image loads properly, & I'm sure that @JakeWharton & others who contributed to this great library can do this extra boost :)
just using a url for the placeholder will be super great!

but using a nested calls like the following, I think it is not the best solution from performance point of view:

Picasso.with(context)
       .load(thumb) // thumbnail url goes here
       .into(imageView, new Callback() {
            @Override
            public void onSuccess() {
                Picasso.with(context)
                        .load(url) // image url goes here
                        .placeholder(imageView.getDrawable())
                        .into(imageView);
            }
            @Override
            public void onError() {

            }
        });

[dyguests]

I'had a same problem..

I'll click a thumbImg in a listView to jump to another Activity with bigImg.

The code should like this:

//in another Activity

Drawable cachedThumbImgDrawable = getCachedDrawable(thumbUrl);

Picasso.with(content)
    .load(bigUrl)
    .placeHolder(cachedThumbImgDrawable)
    .into(imageView);

/*try to find cached drawable*/
Drawable getCachedDrawable(String url){
    //if find drawable.....
    return drawable;

    //or find nothing
    return null;
}

but I don't know to how to getCachedDrawable().

[VishalNarvani]

Anyone had a luck with this?

[Abdelhady]

@VishalNarvani the code I posted earlier works fine with me.

[rgr-myrg]

@Abdelhady Your solution works perfectly. I'm able to load a thumbnail and subsequently a full sized image in sequence using your solution. Many thanks.

[sudikrt]

What if i dont have a thumb url

[MRezaNasirloo]

It would be a good feature, Just like what instagram does. I'm not a fan of nested calls, Does the fade animation works fine?
And by the way Glide has this feature built in already.

[JakeWharton]

We have no plans to do this. That being said, you can already accomplish this with concurrent requests, a listener, and cancelation.