litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-1574: Refactored upload image templates, and made upload images css file theme agnostic.

Browse source
This commit is contained in:
mb863 2011-01-06 21:12:46 +00:00
parent f62171fa59
commit 3b95c44b39
4 changed files with 168 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

62
webapp/web/templates/freemarker/body/imageUpload/imageUpload-cropImage.ftl
View file

@ -7,7 +7,7 @@ ${scripts.add("/js/jquery_plugins/jcrop/jquery.Jcrop.js")}
${scripts.add("/js/imageUpload/cropImage.js")}
${stylesheets.addFromTheme("/css/uploadImages.css")}
${stylesheets.add("/css/uploadImages.css")}
${stylesheets.add("/js/jquery_plugins/jcrop/jquery.Jcrop.css")}
@ -23,33 +23,39 @@ ${stylesheets.add("/js/jquery_plugins/jcrop/jquery.Jcrop.css")}
</#macro>-->
<div id="photoCroppingContainer">
<section id="photoCroppingContainer" role="region">
<h2>Photo Upload</h2>
<!-- This is the image we're attaching Jcrop to -->
<div id="photoCroppingPreview">
<h6>Current Photo </h6>
<p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
<div style="width:115px;height:115px;overflow:hidden;border:1px solid green;">
<img src="${imageUrl}" id="preview" />
</div>
<div id="photoCroppingHowTo">
<p class="photoCroppingNote">To make adjustments, you can drag around and resize the photo to the right. When you are happy with your photo click the "Save Photo" button. </p>
<form id="cropImage" action="${formAction}" method="post">
<!-- Javascript will populate these values -->
<input type="hidden" name="x" value="" />
<input type="hidden" name="y" value="" />
<input type="hidden" name="w" value="" />
<input type="hidden" name="h" value="" />
<input type="submit" value="Save photo">
or <a class="cancelUpload" href="${cancelUrl}">Cancel</a>
</form>
</div>
</div>
<div id="photoCropping">
<img style="border:1px solid green;" src="${imageUrl}" <#--<@newImageSize/>--> id="cropbox" />
</div>
</div>
<!-- This is the image we're attaching Jcrop to -->
<section id="photoCroppingPreview" role="region">
<h3>Current Photo</h3>
<p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
<section class="photoCroppedPreview" role="region">
<img src="${imageUrl}" id="preview" alt="Image to be cropped"/>
</section>
<section id="photoCroppingHowTo" role="region">
<p class="photoCroppingNote">To make adjustments, you can drag around and resize the photo to the right. When you are happy with your photo click the "Save Photo" button. </p>
<form id="cropImage" action="${formAction}" method="post" role="form">
<!-- Javascript will populate these values -->
<input type="hidden" name="x" value="" />
<input type="hidden" name="y" value="" />
<input type="hidden" name="w" value="" />
<input type="hidden" name="h" value="" />
<input id="submit" type="submit" value="Save photo">
<span class="or"> or <a class="cancel" href="${cancelUrl}">Cancel</a></span>
</form>
</section>
</section>
<section id="photoCropping" role="region">
<img src="${imageUrl}" id="cropbox" alt="Preview of photo cropped" />
</section
</section>
<div class="clear"></div>