Show Language:

Displaying Multiple Thumbnail Images on a Web Page

Displaying multiple website thumbnail images on a web page involves:

The 'get_thumbnail_links' Function

The examples on this page call the get_thumbnail_links function in the ThumbnailUtility package to display multiple thumbnail images on a web page. The get_thumbnail_links function takes the following parameters:

Parameter Description
Access Key Id Your Amazon Web Services Access Key
Secret Access Key Your Amazon Web Services Secret Key
Size 'Small' (for 111x82 pixel thumbnails) or 'Large' (for 201x147 pixel thumbnails)
Default Image The URL of an image to display when no thumbnail is available. For example, http://client.alexa.com/common/images/noimages.gif. If this value is blank or null, the Alexa default image will be displayed.
SiteUrls An array of website URLs to return thumbnail images for

The get_thumbnail_links function makes a batch request to the AlexaSiteThumbnail web service to get the URLs of the thumbnail images, and returns an array of HTML snippets. Your code should write each HTML snippet out to the web page to display the thumbnail images.

The function returns an array of HTML snippets containing an IMG tags for the thumbnail image. Your code should write each HTML snippet out to the web page to display the thumbnail image. For example, the returned HTML for a yahoo.com thumbnail image might be:

<a href="http://yahoo.com"><img src="http://s3-external-1.amazonaws.com/al exa-thumbnails/E557348CEA2764469ED1D09849AEFE271C85BF26s?Signature=%2F2l6vKH5Rfv A7xO8tX5LTTTBKr4%3D&Expires=1153262153&AWSAccessKeyId=31VZ0JNFJDA5TK457BR2" alt="yahoo.com"/></a>

Displaying thumbnail images

Below are code samples for simple web pages that display thumbnail images of 'yahoo.com', 'amazon.com' and 'alexa.com' on a single web page.

Note: Be sure to insert your Access Key ID and Secret Access Key where appropriate. For example, change "[INSERT YOUR ACCESS KEY ID]" to something like "03S5C8M38R4THHBHJJ82".

Java - example.jsp

Here's how to display thumbnail images using java on a web page generated using JSP. The ThumbnailUtility.jar file must be in your WEB-INF/lib directory or elsewhere on your class path. 

<%@ page import="com.alexa.service.thumbnail.ThumbnailUtility" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%!
    private static String AWSAccessKeyId = "[INSERT YOUR ACCESS KEY ID]";
    private static String AWSSecretKey   = "[INSERT YOUR SECRET ACCESS KEY]";
    private static String DEFAULT_NOIMAGE = "[http://your default no image location]";
    String[] siteUrls = { "yahoo.com", "amazon.com", "www.alexa.com" };
	String[] thumbnailLinks = ThumbnailUtility.get_thumbnail_links(AWSAccessKeyId, AWSSecretKey, "Large", DEFAULT_NOIMAGE, siteUrls);
%>
<html>
<body>
<%
	for (int i = 0; i < thumbnailLinks.size; i++) {
		out.println(thumbnailLinks[i]);
		out.println("<BR>");
	}

%>
</body>
</html>

C# - example.aspx

Here's how to display thumbnail images using C# on a web page generated using aspx. The ThumbnailUtility.cs file must be in a sub-directory called App_Code. 

<%@ Page Language="C#" %>

<%
    string access_key_id = "[INSERT YOUR ACCESS KEY ID]";
    string secret_access_key = "[INSERT YOUR SECRET ACCESS KEY]";
    string DEFAULT_NOIMAGE = "[http://your default no image location]";
    string[] siteUrls = { "yahoo.com", "amazon.com", "www.alexa.com" };
    string[] thumbnailLinks = ThumbnailUtility.get_thumbnail_links(access_key_id, secret_access_key, "Small", DEFAULT_NOIMAGE, siteUrls);
%>

<html>
<body>
<%
	for (int i = 0; i < thumbnailLinks.Length; i++) {
		Response.Write(thumbnailLinks[i]);
	}
%>
</body>
</html>

Perl - example.cgi

Here's how to display thumbnail images on a web page generated using perl. The ThumbnailUtility.pm file must be in the same directory as example.cgi. 

#!/usr/bin/perl -w

use ThumbnailUtility;

my $access_key_id = "[INSERT YOUR ACCESS KEY ID]";
my $secret_access_key = "[INSERT YOUR SECRET ACCESS KEY]";
my $default_noimage = "[http://your default no image location]";
my @site_urls = ( "yahoo.com", "amazon.com", "www.alexa.com");
my @thumbnail_links = ThumbnailUtility::get_thumbnail_links($access_key_id, $secret_access_key, "Small", $default_noimage, @site_urls);

print "Content-type:text/html\n\n";

foreach my $link (@thumbnail_links) {
	print "$link<br>";
}

PHP- example.php

Here's how to display thumbnail images on a web page generated using php. The ThumbnailUtility.php file must be in the same directory as example.php. 

<?php

require("ThumbnailUtility.php");

$access_key_id = "[INSERT YOUR ACCESS KEY ID]";
$secret_access_key = "[INSERT YOUR SECRET ACCESS KEY]";
$default_noimage = "[http://your default no image location]";
$site_urls = array("yahoo.com", "amazon.com", "www.alexa.com");
$thumbnail_links = get_thumbnail_link($access_key_id, $secret_access_key, "Small", $default_noimage, $site_urls);

echo "Content-type:text/html\n\n";

?>

<html>
<body>
<?php
	foreach ($thumbnail_links as $link) {
		echo "$link";
	}
?>
</body>
</html>

Next Step: Next Steps