Adding Thumbnail Images for Information Elements IE Objects

PTC Arbortext Content Delivery Publishing and Loading > Additional Information > TAL Customization > Adding Thumbnail Images for Information Elements IE Objects

You can use customization to display thumbnail images for the following objects:

If the thumbnails are missing from Information Structure node, then the raster image associated with the PartsList is used as thumbnail. This is applicable to SIM bundles.

• Parts List

• IEXML

• IE PDF

• IE Graphic

This topic describes how to configure thumbnails for IE objects, such that thumbnails are visible while navigating the Information Structure (IS) and Publication Structure (PS).

To make thumbnails visible while navigating IS and PS. PTC Arbortext Content Delivery recommends that IS nodes with IEs, such as, Parts List, XML, PDF, and graphics should be associated with thumbnails. An IE object may have the default thumbnail instead of the associated thumbnail. In this case, the default thumbnail can be configured as an associated thumbnail by specifying the thumbnail information in the IE specific metadata.

To configure thumbnails for IE objects, complete the following steps:

1. Open the customization stylesheet specific to the IE for which you want to update thumbnail information.

Refer the following table to understand the source and customization stylesheets for the required type of IE objects. The source stylesheet is located at CONFIG/Applications/ContentManager/Config/Common/Templates/TransformationDriver in the folder specific to the IE object.

TYPE	Source Stylesheet	Customization Stylesheet
PARTSLIST	PartsList2Feed.xsl	abstractCustomPartsList2Feed.xsl
IEXML	xmd-process-iexml_tr.xsl	customizations.xsl
PDFM	xmd-process-pdf_tr.xsl	customizations.xsl
GRAPHIC	xmd-process-graphic.xsl	customizations.xsl

2. Overwrite the handling of metadata elements under THUMBNAIL mode with a higher priority (In the customization stylesheet, you can overwrite this template with priority=2.) to generate the following thumbnail list format in the XMD file. For example, metadata, mode and priority <xsl:template match="Metadata" mode="THUMBNAIL" priority="2"> generates the following thumbnail list format.

<thumbnailList>

<thumb info="">{Image Source Name}</thumb>

</thumbnailList>

Following implementation, the default, is present in the source stylesheet.

<xsl:template match="Metadata" mode="THUMBNAIL">

<xsl:param name="IEXMLFileName"/>
</xsl:template>

3. TAL the bundles again and observe whether you can find the images or not.

By default, the ACD system is unaware of the images present in the IE objects. So, while customizing, you must ensure that the unique images are moved to the DCTM_Output/{collection.id}/{type.id}/Images/.

4. Extract the content of source XML and Meta XML using the document method. You can use the following technique to locate the source and meta xmls.

The template receives a parameter that holds the complete path of the source file in the input bundle for an object.

Using the customization template, you can write logic for Image Source Name that will be output as <thumb>. On completion of the Transform task, you can confirm the output generated in the object’s corresponding .xmd file.

Once <thumbnailList> and <thumb> information is generated during the Transform task, which points to the required image source, the image is loaded and displayed in the PTC Arbortext Content Delivery user interface.

Sizing Guidelines for Thumbnails

This section of the topic describes the size of the thumbnails to be generated. It explains the details to set the thumbnails of PH or IS or IE for SIM or SP bundles.

Thumbnails images for a Product Hierarchy, and Information Structure and an Information Element can be displayed through customization.

PTC recommends that you use the following resolutions for a thumbnail image. The parameters for resolution specification are available in the servicecenter.css file.

Thumbnail Resolution for Product Hierarchies

In the servicecenter.css file, you can find the recommended size for Product Hierarchies as given below:

.grid .tileGrid > * > * .ptc-dynamicTileImage .ins-icon,
.grid .tileGrid > * > * .ptc-dynamicTileImage img {
max-width: 138px;
max-height: 93px;
border-radius: 4px;
vertical-align: middle;
}

Thumbnail Resolution for Information Structures

In the servicecenter.css file, you can find the recommended size for Information Structures as given below:

.thumbnailTileGrid .thumbnailTile .ptc-dynamicTileImage img {
max-width: 240px;
max-height: 170px;
border-radius: 4px;
vertical-align: middle;
padding-bottom: 1px !important;
height: auto;
}

Thumbnail Resolution for Information Elements

You can find the default thumbnail size and resolution for Information Element as given below:

• For grid view it is 128X128 pixels.

• For list view it is 24X24 pixels.

.thumbnailTileGrid .thumbnailTile .ptc-dynamicTileImage .thumbnailIcons {.thumbnailTileGrid .thumbnailTile .ptc-dynamicTileImage .thumbnailIcons { width: inherit !important; height: inherit !important; margin-right: 0px !important; }

Customizing the Information Element Icon

To customize and Information Element (IE) default icons, complete the following steps:

1. Create the below folders and files:<WT_HOME>/codebase.war/delivery/custom/app/style/css/custom.css<WT_HOME>/codebase.war/delivery/custom/app/style/images/equivalence/custom_xxx.png

2. Inside the newly created custom.css folder:

◦ For large icons add.equivalence-thumbnail.xxxIcon {background-image:url("custom/app/style/images/equivalence/custom_xxx.png");}

◦ For normal icons add.equivalence-thumbnail.xxxIcon {background-image:url("custom/app/style/images/equivalence/custom_xxx.png");}

◦ For Glyph icons.elementFilter .equivalence-thumbnail.xxxIcon {background-image:url("custom/app/style/images/equivalence/custom_xxx.png");}

It is also possible to override any of the existing icon files directly. You must repeat that on every Viewer server and also when upgrading or updating PTC Arbortext Content Delivery version.

xxx refers to the different object types:

• Parts List

• Kits

• Media

• PDF

• Troubleshooting

• Parts

• Image

• Icon

Below table shows the list of default icons used for various Information Elements (IE):

Types	Image Files
diagnostics	"@{image-directory}/equivalence/srv_diagnostics_24x.png";
diagnostics-large	"@{image-directory}/equivalence/srv_diagnostics_128x.png";
parts-list	"@{image-directory}/equivalence/srv_parts_list_24x.png";
parts-list-large	"@{image-directory}/equivalence/srv_parts_list_128.png";
kit	"@{image-directory}/equivalence/srv_kit_24x.png";
kit-large	"@{image-directory}/kit/Kit-Identity.png";
procedure	"@{image-directory}/equivalence/srv_procedure_24x.png";
procedure-large	"@{image-directory}/equivalence/srv_procedure_128x.png";
publications	"@{image-directory}/equivalence/srv_24x.png";
publications-large	"@{image-directory}/equivalence/srv_publications_128x.png";
product-instance	"@{image-directory}/infoTypelcons/slm_product_instance_infotype_24x.png";
product-instance-large	"@{image-directory}/infoTypelcons/slm_product_instance_infotype_128x.png";
product	"@{image-directory}/infoTypelcons/slm_product_instance_infotype_24x.png";
product-large	"@{image-directory}/infoTypelcons/slm_product_instance_infotype_128.png";
schematic	"@{image-directory}/equivalence/srv_schematics_24x.png";
schematic-large	"@{image-directory}/equivalence/srv_schematics_128x.png";
specification	"@{image-directory}/equivalence/srv_specification_24x.png";
specification-large	"@{image-directory}/equivalence/srv_specification_128x.png";
topic	"@{image-directory}/icons/slm_folder_24x.png";
topic-large	"@{image-directory}/icons/slm_folder_128.png";
part	"@{image-directory}/equivalence/srv_gear_24x_4.png";
part-large	"@{image-directory}/equivalence/srv_gear_128xpng";
media	"@{image-directory}/equivalence/media_24x.png";
media-large	"@{image-directory}/equivalence/media_128.png";

Was this helpful?