<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: Custom Image Component in Adobe Experience Manager Questions</title>
    <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256404#M98686</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hi&amp;nbsp;&lt;A class="headline" href="http://help-forums.adobe.com/home/users/ims/F5C0/ims-F5C00847516BE35C0A490D4D@AdobeID/profile.form.html/content/adobeforums/en/user/profile/view" style="color: rgb(58, 145, 215); text-decoration: none; cursor: pointer; font-family: adobe-clean, 'Helvetica Neue', Arial, sans-serif; line-height: normal; background-color: rgb(230, 231, 232);" target="_blank"&gt;Swathi Bulusu&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;There is a community article covering "Creating Custom Carousel components for Adobe Experience Manager".&lt;/P&gt;&lt;P&gt;In this article we are using a 3rd party Javascript plugin in our component to cater our carousel needs. Similarly on the same&amp;nbsp;lines you can use any image transformation plugins.&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Article Links :-&amp;nbsp;&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=https%3A%2F%2Fhelpx.adobe.com%2Fexperience-manager%2Fusing%2Fcustom-carousel-components.html" rel="nofollow" target="_blank"&gt;https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Plugin Link 1:-&amp;nbsp;&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=http%3A%2F%2Fafter12am.github.io%2Fjquery.tween.js%2F" rel="nofollow" target="_blank"&gt;http://after12am.github.io/jquery.tween.js/&lt;/A&gt;&lt;SPAN&gt; (with demo)&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; Link 2:- &lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=http%3A%2F%2Finteractjs.io%2F" rel="nofollow" target="_blank"&gt;http://interactjs.io/&lt;/A&gt;&lt;/P&gt;&lt;P&gt;I hope this would help you.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Thanks and Regards&lt;/P&gt;&lt;P&gt;Kautuk Sahni&amp;nbsp;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Fri, 16 Oct 2015 02:28:24 GMT</pubDate>
    <dc:creator>kautuk_sahni</dc:creator>
    <dc:date>2015-10-16T02:28:24Z</dc:date>
    <item>
      <title>Custom Image Component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256402#M98681</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;We have a custom component "&lt;SPAN class="s1"&gt;Thumbnail with RichText Title&lt;/SPAN&gt;". In the component we have image component and we are required to add two custom fields - one for image alignment (dropdown with values as left and right) and other field is size (33% or 50%).&lt;/P&gt;&lt;P&gt;I have created the node structure and able to get the fields in the component.&lt;/P&gt;&lt;P&gt;Could anyone please guide me with the next steps to be followed for the alignment and size field to work on the component.&lt;/P&gt;&lt;P&gt;Thanks in advance,&lt;/P&gt;&lt;P&gt;Swathi.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Fri, 16 Oct 2015 02:28:24 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256402#M98681</guid>
      <dc:creator>swathib78201134</dc:creator>
      <dc:date>2015-10-16T02:28:24Z</dc:date>
    </item>
    <item>
      <title>Re: Custom Image Component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256403#M98683</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;It's kinda of hard to give an exact answer without knowing how you've implemented this component, but I'll make a few assumptions:&lt;/P&gt;&lt;P&gt;If the user selects "left" as their alignment, on the wrapping element for your component you add a "image-left" css class. &amp;nbsp;Same for right except obvious "image-right". &amp;nbsp;If this is the case then the alignment is pretty simple in that you can simply add a CSS class to float the image left or right ("float: left;" for example) and after the text add a clear.&lt;/P&gt;&lt;P&gt;The interesting piece of this is the size. &amp;nbsp;Is the size meant to resize whatever image is used to 33% or 66% of the current size of the image? &amp;nbsp;Normally I would recommend utilizing the ACS Commons Named Image Servlet for a task like this (&lt;A href="https://adobe-consulting-services.github.io/acs-aem-commons/features/named-image-transform.html" target="_blank"&gt;https://adobe-consulting-services.github.io/acs-aem-commons/features/named-image-transform.html&lt;/A&gt;) but it doesn't support percentages. &amp;nbsp;If this is indeed the use case, I would maybe recommend defining what 33% and 66% are pixel wise and utilizing ACS Commons.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Fri, 16 Oct 2015 02:28:24 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256403#M98683</guid>
      <dc:creator>leeasling</dc:creator>
      <dc:date>2015-10-16T02:28:24Z</dc:date>
    </item>
    <item>
      <title>Re: Custom Image Component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256404#M98686</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hi&amp;nbsp;&lt;A class="headline" href="http://help-forums.adobe.com/home/users/ims/F5C0/ims-F5C00847516BE35C0A490D4D@AdobeID/profile.form.html/content/adobeforums/en/user/profile/view" style="color: rgb(58, 145, 215); text-decoration: none; cursor: pointer; font-family: adobe-clean, 'Helvetica Neue', Arial, sans-serif; line-height: normal; background-color: rgb(230, 231, 232);" target="_blank"&gt;Swathi Bulusu&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;There is a community article covering "Creating Custom Carousel components for Adobe Experience Manager".&lt;/P&gt;&lt;P&gt;In this article we are using a 3rd party Javascript plugin in our component to cater our carousel needs. Similarly on the same&amp;nbsp;lines you can use any image transformation plugins.&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Article Links :-&amp;nbsp;&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=https%3A%2F%2Fhelpx.adobe.com%2Fexperience-manager%2Fusing%2Fcustom-carousel-components.html" rel="nofollow" target="_blank"&gt;https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Plugin Link 1:-&amp;nbsp;&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=http%3A%2F%2Fafter12am.github.io%2Fjquery.tween.js%2F" rel="nofollow" target="_blank"&gt;http://after12am.github.io/jquery.tween.js/&lt;/A&gt;&lt;SPAN&gt; (with demo)&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; Link 2:- &lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=http%3A%2F%2Finteractjs.io%2F" rel="nofollow" target="_blank"&gt;http://interactjs.io/&lt;/A&gt;&lt;/P&gt;&lt;P&gt;I hope this would help you.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Thanks and Regards&lt;/P&gt;&lt;P&gt;Kautuk Sahni&amp;nbsp;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Fri, 16 Oct 2015 02:28:24 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256404#M98686</guid>
      <dc:creator>kautuk_sahni</dc:creator>
      <dc:date>2015-10-16T02:28:24Z</dc:date>
    </item>
    <item>
      <title>Re: Custom Image Component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256405#M98687</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;&lt;SPAN style="line-height: 1.6em;"&gt;Thank you very much for your reply.&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;As we use slightly, we generally use html in our code. Could you please tell what classes to be used in html div section or how to proceed further in html.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Fri, 16 Oct 2015 02:28:24 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256405#M98687</guid>
      <dc:creator>swathib78201134</dc:creator>
      <dc:date>2015-10-16T02:28:24Z</dc:date>
    </item>
    <item>
      <title>Re: Custom Image Component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256406#M98688</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hi Swathi,&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;CSS classes are specific to a particular html you are trying to integrate. More ever here is image gallery component in AEM @&amp;nbsp;&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=https%3A%2F%2Fhelpx.adobe.com%2Fexperience-manager%2Fusing%2Fcreating-gallery-components.html" rel="nofollow" target="_blank"&gt;https://helpx.adobe.com/experience-manager/using/creating-gallery-components.html&lt;/A&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;One from bootstrap @&amp;nbsp;&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://forums.adobe.com/external-link.jspa?url=http%3A%2F%2Fwww.w3schools.com%2Fbootstrap%2Fbootstrap_carousel.asp" rel="nofollow" target="_blank"&gt;http://www.w3schools.com/bootstrap/bootstrap_carousel.asp&lt;/A&gt;&lt;/P&gt;&lt;P&gt;There are alot image gallery components available online, with their HTML, CSS, JS ready to be&amp;nbsp;integrated. Pick the one that meets your requirements&lt;/P&gt;&lt;P&gt;still confused ?....let community know&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Fri, 16 Oct 2015 02:28:24 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-image-component/m-p/256406#M98688</guid>
      <dc:creator>edubey</dc:creator>
      <dc:date>2015-10-16T02:28:24Z</dc:date>
    </item>
  </channel>
</rss>

