Custom Image Component

[swathib78201134]

We have a custom component "Thumbnail with RichText Title". 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%).

I have created the node structure and able to get the fields in the component.

Could anyone please guide me with the next steps to be followed for the alignment and size field to work on the component.

Thanks in advance,

Swathi.

[leeasling]

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:

If the user selects "left" as their alignment, on the wrapping element for your component you add a "image-left" css class.  Same for right except obvious "image-right".  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.

The interesting piece of this is the size.  Is the size meant to resize whatever image is used to 33% or 66% of the current size of the image?  Normally I would recommend utilizing the ACS Commons Named Image Servlet for a task like this (https://adobe-consulting-services.github.io/acs-aem-commons/features/named-image-transform.html) but it doesn't support percentages.  If this is indeed the use case, I would maybe recommend defining what 33% and 66% are pixel wise and utilizing ACS Commons.

[kautuk_sahni]

Hi Swathi Bulusu

There is a community article covering "Creating Custom Carousel components for Adobe Experience Manager".

In this article we are using a 3rd party Javascript plugin in our component to cater our carousel needs. Similarly on the same lines you can use any image transformation plugins.

Article Links :- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Plugin Link 1:- http://after12am.github.io/jquery.tween.js/ (with demo)

          Link 2:- http://interactjs.io/

I hope this would help you.

Thanks and Regards

Kautuk Sahni 

[swathib78201134]

Thank you very much for your reply.

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.

[edubey · Accepted solution]

Hi Swathi,

CSS classes are specific to a particular html you are trying to integrate. More ever here is image gallery component in AEM @ https://helpx.adobe.com/experience-manager/using/creating-gallery-components.html

One from bootstrap @ http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

There are alot image gallery components available online, with their HTML, CSS, JS ready to be integrated. Pick the one that meets your requirements

still confused ?....let community know