Featured post

Docker setup for Liferay 7 with MySQL

Monday, 9 January 2012

Crop Image in Liferay for Images of Image Gallery or Profile Images

Cropping is the way to set/cut image as per your requirement. You can set height/width of the whichever area of the image, you want.
As we all knows that Liferay's Image Gallery does not provide function to crop an Image, so it's time to develop our own.

Steps to to Crop an Image in Liferay-
1) Copy these two functions into your JAVA file or you can simplify the path by creating an ext of com.liferay.portal.image.FileSystemHook.

private static File getFile(long imageId, String type) {
String path = buildPath(String.valueOf(imageId));
String _rootDir=PropsUtil.get("image.hook.file.system.root.dir");
return new File(
_rootDir + StringPool.SLASH + path + StringPool.SLASH +
imageId + StringPool.PERIOD + type);
private static String buildPath(String fileNameFragment) {
int fileNameFragmentLength = fileNameFragment.length();

if (fileNameFragmentLength <= 2) {
return StringPool.BLANK;

StringBundler sb = new StringBundler(
fileNameFragmentLength / 2 + fileNameFragmentLength);

for (int i = 0; i < fileNameFragmentLength; i += 2) {
if ((i + 2) < fileNameFragmentLength) {
sb.append(fileNameFragment.substring(i, i + 2));

return sb.toString();

2) You can use any jQuery plugin like tapmodo-Jcrop or Javascript to get co-ordinates of Image or preview Image before croping.

3) Then write below action as per your requirements, i keep it as simple as i can.

public static void cropImage(
ActionRequest request, ActionResponse response) throws PortalException, SystemException, IOException{
long imageId=ParamUtil.getLong(request,"imageId");
String imageType=ImageLocalServiceUtil.getImage(imageId).getType();

BufferedImage outImage=ImageIO.read(getFile(imageId, imageType));
x1,y1,x2,y2 are the co-ordinates, will be passed as parameters used to crop the image.
BufferedImage cropped=outImage.getSubimage(ParamUtil.getInteger(request, "x1"),ParamUtil.getInteger(request, "y1"),
ParamUtil.getInteger(request, "w"),ParamUtil.getInteger(request, "h"));

new FileOutputStream(getFile(imageId, imageType)));
ImageLocalServiceUtil.updateImage(imageId,getFile(imageId, imageType));

4) Try & Enjoy the function :)

Thursday, 3 November 2011

Create your own custom tld in Liferay at Portal Level.

If you are here that means you already know what is a TLD(Top Level Definition).
To include a TLD in Liferay at root level or you can say a portal level tld, you can follow the steps which will help you to create one on your own.

1. Create a hook name mytld.
2. Create mytld.jsp at /docroot/web-inf/jsps/html/taglib/ui/mytld/mytld.jsp.
3. Create an ext named mytld ext.
4. Move to web.xml by /docroot/web-inf/ext-web/docroot/web-inf/web.xml in ext.
5. Put below lines in web.xml.

<?xml version="1.0"?>

<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">



6. Create a corresponding java class for ur taglib(if required) at /docroot/web-inf/ext-util-taglib/src/com/liferay/taglib/ui/MyTld.java in ext.
7. Write required code.
8. Move to /docroot/web-inf/ext-web/docroot/web-inf/tld/liferay-fc.tld.
9. Put below lines in liferay-fc.tld.

<?xml version="1.0" encoding="UTF-8"?>


10. Deploy your ext.
11.Deploy your hook.
12.Restart your server.
12.Your new tld is ready to use.

Please let me know, if there is any concern about this Blog.