Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Infographic images are not rendering properly on custom built- image and video component

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>

1 Accepted Solution

Avatar

Correct answer by
Level 10

Overlay the out of the box video component that is available with AEM. That will work.  I will check to ensure there is no issue with this type of images. 

View solution in original post

2 Replies

Avatar

Level 10

Is it rendering properly in OOB image component?

Avatar

Correct answer by
Level 10

Overlay the out of the box video component that is available with AEM. That will work.  I will check to ensure there is no issue with this type of images.