New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a method to pass an image thumbnail URL as placeholder #383

Closed
ronaldoeyeem opened this Issue Feb 5, 2014 · 15 comments

Comments

9 participants
@ronaldoeyeem

ronaldoeyeem commented Feb 5, 2014

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 comment has been minimized.

Show comment
Hide comment
@JakeWharton

JakeWharton Feb 5, 2014

Collaborator

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
.

Collaborator

JakeWharton commented Feb 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
@dvojtise

dvojtise Feb 5, 2014

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...

dvojtise commented Feb 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
@JakeWharton

JakeWharton Feb 5, 2014

Collaborator

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
.

Collaborator

JakeWharton commented Feb 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
@ronaldoeyeem

ronaldoeyeem Feb 5, 2014

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.

ronaldoeyeem commented Feb 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
@JakeWharton

JakeWharton Feb 5, 2014

Collaborator

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
.

Collaborator

JakeWharton commented Feb 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
@dvojtise

dvojtise Feb 6, 2014

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 ?

dvojtise commented Feb 6, 2014

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

This comment has been minimized.

Show comment
Hide comment
@ronaldoeyeem

ronaldoeyeem Feb 6, 2014

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

ronaldoeyeem commented Feb 6, 2014

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

This comment has been minimized.

Show comment
Hide comment
@abdelhady

abdelhady Dec 4, 2014

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() {

            }
        });

abdelhady commented Dec 4, 2014

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

This comment has been minimized.

Show comment
Hide comment
@dyguests

dyguests Nov 19, 2015

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().

dyguests commented Nov 19, 2015

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

This comment has been minimized.

Show comment
Hide comment
@VishalNarvani

VishalNarvani Apr 13, 2016

Anyone had a luck with this?

VishalNarvani commented Apr 13, 2016

Anyone had a luck with this?

@abdelhady

This comment has been minimized.

Show comment
Hide comment
@abdelhady

abdelhady Apr 26, 2016

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

abdelhady commented Apr 26, 2016

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

@rgr-myrg

This comment has been minimized.

Show comment
Hide comment
@rgr-myrg

rgr-myrg May 7, 2016

@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.

rgr-myrg commented May 7, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@sudikrt

sudikrt Jul 13, 2017

What if i dont have a thumb url

sudikrt commented Jul 13, 2017

What if i dont have a thumb url

@MRezaNasirloo

This comment has been minimized.

Show comment
Hide comment
@MRezaNasirloo

MRezaNasirloo Nov 13, 2017

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.

MRezaNasirloo commented Nov 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@JakeWharton

JakeWharton Mar 3, 2018

Collaborator

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

Collaborator

JakeWharton commented Mar 3, 2018

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

@JakeWharton JakeWharton closed this Mar 3, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment