Question

On my server, I have three files per image.

• A thumbnail file, which is cropped to 128 by 128.
• A small file, which I aspect fit to a max of 160 by 240.
• A large file, which I aspect fit to a max of 960 by 540.

My method for returning these URLs to three20’s gallery looks like this:

- (NSString*)URLForVersion:(TTPhotoVersion)version {
    switch (version) {
        case TTPhotoVersionLarge:
            return _urlLarge;
        case TTPhotoVersionMedium:
            return _urlSmall;
        case TTPhotoVersionSmall:
            return _urlSmall;
        case TTPhotoVersionThumbnail:
            return _urlThumb;
        default:
            return nil;
    }
}

After having logged when these various values are called, the following happens:

1. When the thumbnail page loads, only thumbnails are called (as expected)
2. When an image is tapped, the thumbnail appears, and not the small image.
3. After that thumbnail appears, the large image is loaded directly (without the small image being displayed).

What I desire to happen is the following

1. This is the same (thumbnails load as expected on the main page)
2. When the image is tapped, the small image is loaded first
3. Then after that, the large image is loaded.

Or, the following

1. Thumbnails
2. Straight to large image.

The problem with the thumb, is that I crop it so it is a square.

This means that when a thumbnail image is displayed in the main viewer (after thumb was tapped), it is oversized, and when the large image loads, it immediately scales down to fit.

That looks really bad, and to me, it would make far more sense if it loaded the thumbs in the thumbnail view, and then the small image followed by the large image in the detail view.

Does anyone have any suggestions on how to fix this?
Is the best way simply to make the thumbs the same aspect ratio?

I would appreciate any advice on this issue

Answer 1

Looking at the three20 source I can see that TTPhotoView loads the preview image using the following logic:

- (BOOL)loadPreview:(BOOL)fromNetwork {
  if (![self loadVersion:TTPhotoVersionLarge fromNetwork:NO]) {
    if (![self loadVersion:TTPhotoVersionSmall fromNetwork:NO]) {
      if (![self loadVersion:TTPhotoVersionThumbnail fromNetwork:fromNetwork]) {
        return NO;
      }
    }
  }
  return YES;
}

The problem is that as your small image is on the server and not locally the code skips the image and uses the Thumbnail for the preview.

I would suggest that your best solution would be to edit the thumbnails so that they have the same aspect ratio as the large images. This is what the developer of this class seems to have expected!