Generate More Than 2 Thumbnail Images using ext-plugin in liferay

Purpose:

Document and Media Portlet provides the feature to upload images in the Liferay portal. Which can be used for multiple purposes. This document is used to generate more than 2 thumbnail images automatically on upload image to document and media portlet.

Requirement:

Document and Media portlet generated a single thumbnail image for any uploaded image. I need to generate multiple thumbnails with different sizes as well.

Existing Feature:

Liferay provided properties to automatically generate two thumbnail images for any uploaded images. As we need to generate 2 thumbnail image 320 x 240 and 480 x 600 respectively. Add the following properties in the portal-ext.properties: dl.file.entry.thumbnail.enabled=true dl.file.entry.thumbnail.custom1.max.width=320 dl.file.entry.thumbnail.custom1.max.height=240 dl.file.entry.thumbnail.custom2.max.width=480 dl.file.entry.thumbnail.custom2.max.height=600 To check generated images. First, go to document and media portlet then click on uploaded image. You will see the below-given page. Right click on the small image preview and click on ‘Inspect’ or ‘Inspect element’. It will opens developer tool and highlight <img> tag and in src attribute you will see url something like: <img> Tag: <img alt="Thumbnail" border="no" class="thumbnail" src="http://localhost:8080/documents/30503/0/Ruby+Hood/97fc65f8-b8ea-444c-b553-771694086beb?version=1.1&amp;t=1497270260000&amp;imageThumbnail=1" style="max-height: 135px; max-width: 135px;"> URL: http://localhost:8080/documents/30503/0/Ruby+Hood/97fc65f8-b8ea-444c-b553-771694086beb?version=1.1&t=1497270259984&imageThumbnail=1 In the above-listed URL, you can see that there is one parameter &imageThumbnail=1 appended at the end of the URL. To check thumbnail just copy paste that URL to new tab and change the &imageThumbnail=1 value to &imageThumbnail=2. You can see the same image with different size. This is the existing feature provided by Liferay document and media portlet.

Extended Existing Feature using ext-plugin:

Liferay provides only two properties for generating the thumbnail. To generate more than 2 thumbnail image we need to extend existing functionality. com.liferay.portlet.documentlibrary.util.DLPreviewableProcessor class has following methods to change in.

• storeThumbnailImages(FileVersion fileVersion, RenderedImage renderedImage)
• storeThumbnailImage(FileVersion fileVersion, RenderedImage renderedImage, int index)

Steps to Extend Existing Functionality using ext-plugin:

1. Create ext-plugin.
2. Create any custom class lets say MyImageProcessorImpl which extends ‘DLPreviewableProcessor’ abstract class and implements ‘ImageProcessor’ interface.
3. Override all the methods and change in below given two methods(find in blue) as shown in methods. they are list at the end of the document.
• storeThumbnailImages(FileVersion fileVersion, RenderedImage renderedImage)
• storeThumbnailImage(FileVersion fileVersion, RenderedImage renderedImage, int index)
4. Create ‘portal-ext.properties’ in WEB-INF/ext-impl/src path and add below given properties
• dl.file.entry.processors=com.liferay.portlet.documentlibrary.util.AudioProcessorImpl,com.liferay.portlet.documentlibrary.util.PDFProcessorImpl,com.liferay.portlet.documentlibrary.util.RawMetadataProcessorImpl,com.liferay.portlet.documentlibrary.util.VideoProcessorImpl,com.liferay.portlet.documentlibrary.util.VideoProcessorImpl,com.custom.portlet.documentlibrary.util.MyImageProcessorImpl
• Note: Replaced com.custom.portlet.documentlibrary.util.MyImageProcessorImpl with com.portlet.documentlibrary.util.ImageProcessorImpl
• dl.file.entry.thumbnail.custom3.max.width=640
• dl.file.entry.thumbnail.custom3.max.height=960
• dl.file.entry.thumbnail.custom4.max.width=1280
• dl.file.entry.thumbnail.custom4.max.height=720
• dl.file.entry.thumbnail.custom5.max.width=1600
• dl.file.entry.thumbnail.custom5.max.height=900
• dl.file.entry.thumbnail.custom6.max.width=1900
• dl.file.entry.thumbnail.custom6.max.height=1280
5. Deploy ext-plugin.

Overridden Methods:

@Override protected void storeThumbnailImages(FileVersion fileVersion, RenderedImage renderedImage) throws Exception { // Default available code. storeThumbnailImage(fileVersion, renderedImage, THUMBNAIL_INDEX_DEFAULT); storeThumbnailImage(fileVersion, renderedImage, THUMBNAIL_INDEX_CUSTOM_1); storeThumbnailImage(fileVersion, renderedImage, THUMBNAIL_INDEX_CUSTOM_2); // New code appended. storeThumbnailImage(fileVersion, renderedImage, THUMBNAIL_INDEX_CUSTOM_3); storeThumbnailImage(fileVersion, renderedImage, THUMBNAIL_INDEX_CUSTOM_4); storeThumbnailImage(fileVersion, renderedImage, THUMBNAIL_INDEX_CUSTOM_5); storeThumbnailImage(fileVersion, renderedImage, THUMBNAIL_INDEX_CUSTOM_6); } @Override protected void storeThumbnailImage(FileVersion fileVersion, RenderedImage renderedImage, int index) throws Exception { log.info("Executing storeThumbnailImage Method"); if (!isThumbnailEnabled(index) || hasThumbnail(fileVersion, index)) { return; } String type = getThumbnailType(fileVersion); String maxHeightPropsKey = PropsKeys.DL_FILE_ENTRY_THUMBNAIL_MAX_HEIGHT; String maxWidthPropsKey = PropsKeys.DL_FILE_ENTRY_THUMBNAIL_MAX_WIDTH; if (index == THUMBNAIL_INDEX_CUSTOM_1) { maxHeightPropsKey = PropsKeys.DL_FILE_ENTRY_THUMBNAIL_CUSTOM_1_MAX_HEIGHT; maxWidthPropsKey = PropsKeys.DL_FILE_ENTRY_THUMBNAIL_CUSTOM_1_MAX_WIDTH; } else if (index == THUMBNAIL_INDEX_CUSTOM_2) { maxHeightPropsKey = PropsKeys.DL_FILE_ENTRY_THUMBNAIL_CUSTOM_2_MAX_HEIGHT; maxWidthPropsKey = PropsKeys.DL_FILE_ENTRY_THUMBNAIL_CUSTOM_2_MAX_WIDTH; } else if (index == THUMBNAIL_INDEX_CUSTOM_3) { maxHeightPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_3_MAX_HEIGHT; maxWidthPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_3_MAX_WIDTH; } else if (index == THUMBNAIL_INDEX_CUSTOM_4) { maxHeightPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_4_MAX_HEIGHT; maxWidthPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_4_MAX_WIDTH; } else if (index == THUMBNAIL_INDEX_CUSTOM_5) { maxHeightPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_5_MAX_HEIGHT; maxWidthPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_5_MAX_WIDTH; } else if (index == THUMBNAIL_INDEX_CUSTOM_6) { maxHeightPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_6_MAX_HEIGHT; maxWidthPropsKey = DL_FILE_ENTRY_THUMBNAIL_CUSTOM_6_MAX_WIDTH; } RenderedImage thumbnailRenderedImage = ImageToolUtil.scale(renderedImage, PrefsPropsUtil.getInteger(maxHeightPropsKey), PrefsPropsUtil.getInteger(maxWidthPropsKey)); byte[] bytes = ImageToolUtil.getBytes(thumbnailRenderedImage, type); File file = null; try { file = FileUtil.createTempFile(bytes); addFileToStore(fileVersion.getCompanyId(), THUMBNAIL_PATH, getThumbnailFilePath(fileVersion, type, index), file); } finally { FileUtil.delete(file); } }