diff --git a/webapp/web/templates/freemarker/body/imageUpload/cropImage.ftl b/webapp/web/templates/freemarker/body/imageUpload/cropImage.ftl
index 00f380242..2ec2e0a8d 100644
--- a/webapp/web/templates/freemarker/body/imageUpload/cropImage.ftl
+++ b/webapp/web/templates/freemarker/body/imageUpload/cropImage.ftl
@@ -9,6 +9,19 @@ ${scripts.add("/js/imageUpload/cropImage.js")}
 ${stylesheets.addFromTheme("/uploadImages.css")}
 ${stylesheets.addFromTheme("/jquery.Jcrop.css")}
 
+
+<#--Reduce original image to fit in the page layout  
+	If the width of the image is bigger or equal to 500 pixels, 
+	the script below will reduce the width to 500 pixels and 
+	the height will be in proportion to the new height-->
+
+<#macro newImageSize>
+<#if (imageWidth >= 500)>
+		width="500" height="${(500*imageHeight)/imageWidth}" 
+</#if>	   
+</#macro>
+			
+
 <div id="photoCroppingContainer">
        <h2>Photo Upload</h2>
        <!-- This is the image we're attaching Jcrop to -->
@@ -33,7 +46,7 @@ ${stylesheets.addFromTheme("/jquery.Jcrop.css")}
        </div>
        <div id="photoCropping">
              
-                     <img style="border:1px solid green;" src="${imageUrl}" id="cropbox" />
+                     <img style="border:1px solid green;" src="${imageUrl}" <@newImageSize/> id="cropbox" />
                    
        </div>
 </div>