We created a Image/video excepting component.But we are facing issues on rendering the infographic images dragged on this component.
Below is the code for that component. Any image which renders correctly , after we upload it to content/dam or Assets folder and use it on this particular component, this makes the image blur.
Please go through the code and let us know which is causing the stretching of the image or bluring the image. image is also attached.
Thanks in advance.
<%@ page
import="com.day.cq.commons.Doctype,
com.day.cq.wcm.api.WCMMode,
com.day.cq.wcm.api.components.DropTarget,
com.day.cq.wcm.foundation.Image, com.day.cq.wcm.foundation.Placeholder"%>
<%@include file="/etc/designs/smarter/global.jsp"%>
<%
//Get the Type that user has selected, Image or Video
String mediaType = properties.get("imageorvideo", "");
String backgroundTemplate = properties.get("backgroundTemplate", "l-std-post");
String mainCaption = "";
String subCaption = "";
if(mediaType.equals("")) {
mediaType = "i";
}
%>
<section class="<%=backgroundTemplate%>">
<div class="l-wrap">
<figure class="single-media" itemscope>
<div class="single-media-wrap">
<%
if (mediaType.equals("i")) {
boolean isAuthoringUIModeTouch = Placeholder
.isAuthoringUIModeTouch(slingRequest);
Image image = new Image(resource, "image");
// don't draw the placeholder in case UI mode touch it will be handled afterwards
if (isAuthoringUIModeTouch) {
image.setNoPlaceholder(true);
}
//drop target css class = dd prefix + name of the drop target in the edit config
String ddClassName = DropTarget.CSS_CLASS_PREFIX + "image";
if(image.hasContent()|| WCMMode.fromRequest(request) == WCMMode.EDIT) {
mainCaption = (String)properties.get("figmaincaption","");
subCaption = (String)properties.get("subcaption","");
image.loadStyleData(currentStyle);
// add design information if not default (i.e. for reference paras)
if (!currentDesign.equals(resourceDesign)) {
image.setSuffix(currentDesign.getId());
}
image.addCssClass(ddClassName);
image.setSelector(".img");
image.setDoctype(Doctype.fromRequest(request));
String divId = "cq-textimage-jsp-" + resource.getPath();
String imageHeight = image.get(image
.getItemName(Image.PN_HEIGHT));
%>
<% image.draw(out); %>
<!-- Widget (Repeat) :: Social Sharing for Speicific Content -->
<%
String pageURL = java.net.URLEncoder.encode(request.getRequestURL().toString());
String ogimage = java.net.URLEncoder.encode(properties.get("./image/fileReference", ""));
String description = java.net.URLEncoder.encode(properties.get("./image/alt",""));
String title = java.net.URLEncoder.encode(properties.get("./image/jcr:title", ""));
String hostName = request.getServerName().toString();
Integer urlPort = request.getServerPort();
if(!urlPort.equals("")) {
hostName += ":" + urlPort;
}
String imgURL = "http://" + hostName + ogimage;
String twitterURL = "https://twitter.com/intent/tweet?url=" + pageURL + "&text=" + title + "&via=smartermag";
String fbURL = "https://www.facebook.com/dialog/feed?app_id=1467834413480353&link=" + pageURL + "&picture=" + imgURL + "&description=" + title + "&redirect_uri=" + pageURL;
String linkedinURL = "http://www.linkedin.com/shareArticle?mini=true&url=" + pageURL + "&title=" + title;
String googleURL = "https://plus.google.com/share?url=" + pageURL;
%>
<div class="content-share-box" role="menubar" aria-haspopup="true">
<button class="btn-content-share" name="btn-content-share" alt="Share this article" title="Share this article" role="button"></button>
<ul class="content-share-options" role="menu">
<li role="menuitem">
<a href="<%=twitterURL %>" class="btn-twitter" target="_blank" aria-label="Share on Twitter">Twitter</a>
</li><li role="menuitem">
<a href="<%=fbURL %>" class="btn-facebook" target="_blank" aria-label="Share on Facebook">Facebook</a>
</li><li role="menuitem">
<a href="<%=linkedinURL %>" class="btn-linkedin" target="_blank" aria-label="Share on LinkedIn">LinkedIn</a>
</li><li role="menuitem">
<a href="<%=googleURL %>" class="btn-google" target="_blank" aria-label="Share on Google +">Google Plus</a>
</li>
</ul>
</div> <!-- END :: .content-share-box -->
<%@include file="/libs/foundation/components/image/tracking-js.jsp"%>
<%
}
}else if(mediaType.equals("v")) {
String youtubeID = properties.get("./youtubevideoid", "");
mainCaption = (String)properties.get("youtubefigmaincaption","");
subCaption = (String)properties.get("youtubesubcaption","");
if("" != youtubeID) {
%>
<div class="embed-container">
<a href="http://youtu.be/<%=youtubeID %>" class="embed-youtube" data-youtube-id="<%=youtubeID %>"></a>
</div>
<%
}
}
%>
</div>
<figcaption>
<p><%=mainCaption %></p>
<small><%=subCaption%></small>
</figcaption>
</figure>
</div>
</section>
