Custom Image Component | Community
Skip to main content
S
Swathi1
Level 2
October 16, 2015
Solved

Custom Image Component

  • October 16, 2015
  • 4 replies
  • 2661 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by edubey

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

4 replies

L
leeasling
Level 8
October 16, 2015

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
Community Manager
kautuk_sahniCommunity Manager
Community Manager
October 16, 2015

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 

Kautuk Sahni
S
Swathi1Author
Level 2
October 16, 2015

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
edubeyAccepted solution
Level 10
October 16, 2015

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

Terms & ConditionsAccessibility statement

Loading footer...