Latest update: July 2013
This tutorial follows iOS Tutorial 3: Downloading Content in the FlashAir iOS app tutorial series.
We will create a content list that displays thumbnails of the image file contents like this:
The screen layout for the other portion of this application (showing the image that was clicked) is the same as in iOS Tutorial 3: Downloading Content. Please see that page for implementation details.
We get thumbnail images of the content by giving the file path of the image to thumbnail.cgi. We save the data that the command returns using NSData dataWithContentsOfURL . This function will return the data object.
We will still use the Table View Cell that was previously used because it has
imageView as a
property. We will set it as the destination for the image data.
In the previous tutorial,
iOS Tutorial 3: Downloading Content, we used the function
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
This function has an
if statement that checks to see if the file is not an image file. It had no else portion
account for files that are image files). We will add an
else statement to catch image files and fetch their thumbnails.
NSString *dir = [[[files objectAtIndex:indexPath.row + 1] componentsSeparatedByString:@","] objectAtIndex:0]; // Make url NSString *filePath = [[dir stringByAppendingString:@"/"] stringByAppendingString:filename]; NSURL *url = [NSURL URLWithString:[@"http://flashair/thumbnail.cgi?" stringByAppendingString:filePath]]; // Run CGI NSData *img_data = [NSData dataWithContentsOfURL:url]; // Display results cell.imageView.image = [[UIImage alloc] initWithData:img_data];
dir, the folder path, and
filename, the file name, to create a path to the image file.
http://flashair/thumbnail.cgi?and add the file path we created to make the URL for the command.
Once we finish writing the program, we will check to see if it works. We select the folder that contains the image we would like to download. We will see the image thumbnails next to the file names. We want to make sure that the thumbnail matches the image file.
The thumbnail in question matches the image displayed.
You have now completed the tutorial on getting and displaying image thumbnails.
All sample code on this page is licensed under BSD 2-Clause License