Questions about editing pages | Community
Skip to main content
H
han_ting
Level 3
January 13, 2017
Solved

Questions about editing pages

  • January 13, 2017
  • 5 replies
  • 1973 views

Hi everyone,
 

I have some questions about editing pages as below.

Q1.  I can't add parallel component. The component block is too large,  I only can add one image.

[img]can'thttps://forums.adobe.com/api/core/v3/attachments/885757/data[/img]

Parallel component like this, I also want to put text beside images.

Q2.  Is the component size fixed? (That means I can't enlarge or make it smaller) 

Q3. When I use Text & Image component, I found the text editing function is limited. How can I change Text color,style or size...etc.?

Q4, How to create a new page with emulator? I've saw some post before, but I still can't find the answer.

When I create a normal page, I just choose"create Page", but no emulator function too add. (I only can find emulator pages in Geometrixx Media)

  

Thank you .

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 kautuk_sahni

For Q4, here is a good reference article to be consulted :- http://www.aemcq5tutorials.com/tutorials/custom-aem-mobile-emulator/

// It talks about creating and using of Custom AEM Mobile Emulator

 

Official documentation :- https://docs.adobe.com/docs/en/aem/6-2/develop/mobile-web/emulators.html

//

Creating a Custom Mobile Emulator

To create a custom mobile emulator:

  1. Below /apps/myapp/components/emulators create the component myemulator (node type: cq:Component).
  2. Set the sling:resourceSuperType property to /libs/wcm/mobile/components/emulators/base
  3. Define a CSS client library with category cq.wcm.mobile.emulator for the emulator appearance: name = css, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/iPhone/css
  4. If needed, define a JS client library, for example to define a specific plugin: name = js, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/base/js 
  5. If the emulator supports specific functionalities defined by plugins (like touch scrolling), create a configuration node below the emulator: name = cq:emulatorConfig, node type = nt:unstructured and add the property that defines the plugin:
    - Name = canRotate, Type = Boolean, Value = true: to include the rotation functionality.
    - Name = touchScrolling, Type = Boolean, Value = true: to include the touch scrolling functionality.
    More functionalities can be added by defining your own plugins.

I hope this would also help you.

I would encourage you to create a separate questions for multiple questions post.

~kautuk

5 replies

smacdonald2008
smacdonald2008
Level 10
January 13, 2017

For Q1 - if out of the box does not produce the results you want - you can either overlay the component or build a custom one that uses some sort of JS lib like JQuery to get the output that you want. 

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
January 16, 2017

For Q2, 

With every component we can associate the CSS. So we can definitely change the CSS property as per our convince.

See this community article to help you out on this:

Link:- http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

// [img]http://blogs.adobe.com/experiencedelivers/files/2012/12/clientlibs4.jpg[/img]

Also you can change the CSS for Template as per your need/use-case.

Authoring way to add design/CSS to the template :- http://blogs.adobe.com/sunil/2015/04/29/aem-developers-apply-a-design-to-the-aem-sightly-template/

        Video :-  https://youtu.be/rv-E_WxzvVI

Reference forum post:

Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__bsna-hi_all_i_havea.html

I hope this would help you.

~kautuk

Kautuk Sahni
H
han_tingAuthor
Level 3
January 17, 2017

Hi smacdonald2008 & kautuk,

Thanks for  your help.  I'll try it.
 

Does anyone know Q4 => How to create a new page with emulator?

Thank you.

 

Han

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
January 18, 2017

For Q4, here is a good reference article to be consulted :- http://www.aemcq5tutorials.com/tutorials/custom-aem-mobile-emulator/

// It talks about creating and using of Custom AEM Mobile Emulator

 

Official documentation :- https://docs.adobe.com/docs/en/aem/6-2/develop/mobile-web/emulators.html

//

Creating a Custom Mobile Emulator

To create a custom mobile emulator:

  1. Below /apps/myapp/components/emulators create the component myemulator (node type: cq:Component).
  2. Set the sling:resourceSuperType property to /libs/wcm/mobile/components/emulators/base
  3. Define a CSS client library with category cq.wcm.mobile.emulator for the emulator appearance: name = css, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/iPhone/css
  4. If needed, define a JS client library, for example to define a specific plugin: name = js, node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/base/js 
  5. If the emulator supports specific functionalities defined by plugins (like touch scrolling), create a configuration node below the emulator: name = cq:emulatorConfig, node type = nt:unstructured and add the property that defines the plugin:
    - Name = canRotate, Type = Boolean, Value = true: to include the rotation functionality.
    - Name = touchScrolling, Type = Boolean, Value = true: to include the touch scrolling functionality.
    More functionalities can be added by defining your own plugins.

I hope this would also help you.

I would encourage you to create a separate questions for multiple questions post.

~kautuk

Kautuk Sahni
H
han_tingAuthor
Level 3
January 18, 2017

Hi kautuk,

Thank you so much, It's helpful.

For advanced questions, I'll create new post for that.

 

Thank you.

Terms & ConditionsAccessibility statement

Loading footer...