Including Publication Type Icons in Your Search Results

Prepare the Files

Download the zip file that contains the following two files. (Download here --> pubType_updated.zip)

PT_Sprite.png- This file or 'sprite' contains all of the publication type icons. The location of each particular icon is specified in the following css file. Place this somewhere in your project and note the location.
pubtype-icons.css- This file contains style and position information related to the icons. Be sure to include a reference in your project to this style sheet.

<link rel="stylesheet" href="pubtype-icons.css" />

Please note that in pubtype-icons.css there is a reference to the sprite file.

.pt-icon { width: 70px; float: left; display: inline-block; background-image: url('PT_Sprite.png'); background-repeat: no-repeat; }

Verify that the 'url' contains the correct path to the location of the sprite, or the icons will not be displayed.

Display a Publication Type Icon

To display a publication type icon, you need to use a span tag. In the span tag, include the class name 'pt-icon' as specified in the css file.

<span class="pt-icon"></span>

Identify and Process the Publication Type

Each search result record contains a publication type. Each publication type corresponds to a class name within the css file, and in turn a position within the sprite. The publication type can be found in the record header of each search result record in the search response message.

<Record>     
	<ResultId>6</ResultId>     
	<Header>         
		<DbId>edsbl</DbId>         
		<DbLabel>British Library Document Supply Centre Inside Serials & Conference Proceedings</DbLabel>         		<An>RN291795910</An>         
		<RelevancyScore>1882</RelevancyScore>         
		<PubType>Periodical</PubType>         
		<PubTypeId>serialPeriodical</PubTypeId>

To convert the publication type returned in the response message to an associated icon class name:

Extract the PubTypeId value. In the example above, the PubTypeId is 'serialPeriodical'.
Prepend 'pt-' to the value found in PubTypeId. In the example above, this is 'pt-serialPeriodical'.

<span class="pt-icon pt-serialPeriodical"></span>

Complete the HTML Required

<!DOCTYPE html> 
<html> 
<head>     
	<meta charset="utf-8"/>     
	<title>Pubtype Icons</title>       

	<link rel="stylesheet" href="pubtype-icons.css" />   
</head> 
<body>   

<span class="pt-icon pt-serialPeriodical"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat placerat velit a sodales. Nullam tristique lectus non leo commodo consectetur lacinia eros elementum. Sed purus turpis, suscipit ac sollicitudin sed, pretium vitae tellus. Cras varius consectetur ipsum, eget accumsan nunc gravida eget. 


Nulla condimentum ornare quam, hendrerit viverra elit commodo ac. Nunc arcu sapien, scelerisque vitae lacinia nec, consectetur a enim. Nunc gravida placerat vestibulum. Integer aliquam aliquet pharetra. Aliquam pellentesque, purus semper feugiat hendrerit, diam neque pellentesque turpis, et aliquam sapien eros nec dui. Aliquam sed nisi lectus. Aenean nec tellus vitae magna elementum molestie. Cras mauris libero, convallis in aliquam id, imperdiet id nulla. In hac habitasse platea dictumst. Donec tempor neque quam. Integer id odio at nulla interdum sodales vel imperdiet eros. Nulla commodo, risus ac euismod laoreet, odio nisi dictum nisi, eu fermentum arcu tellus scelerisque sem.   
</body> 
</html>