Plain HTML file to AEM Page

[nsvsrk]

Hi,

I received 8 plain HTML files and need to create AEM pages for them with author ability features..

All their support files are stored in the file system in corresponding sub folders named css, js, images, banners and fonts under the current folder.

In AEM, I followed the following:

Step-1: Created my template, page component, added index HTML file (first HTML file) to the  page component code, added clientlibs steps and saw that the styling is applied to the page created out of this template.

Step-2: In order to get sidekick,Included init.jsp or so.

Please suggest how the following could be applied:

Step-3: Images. Of course, these should be uploaded to DAM and the author should be given an option to drag and drop on to the page, by putting Image component on the template. For this, the images include code should be replaced with Image component inclusion on the template

Step-4: How to apply banners? To me, banners are like images and should be uploaded to DAM and authors should be enabled to drag and drop.

Step-5: How to apply fonts?

Step-6: Any other actions to convert this plain html to a plain aem page. I am aware that to make it adaptive, etc, I need to beautify it more. I will handle these in iteration-2.

Appreciate your responses.

Thanks,

Rama.

[kautuk_sahni]

Hi 

Please have a look at this community article, this article is covering most of your asked questions, 

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

// Image, Javascript, CSS etc

Link:- https://docs.adobe.com/docs/en/aem/6-1/develop/platform/adding-fonts.html

//Adding fonts.

Link:- https://docs.adobe.com/docs/en/aem/6-1/administer/content/webdav-access.html

// How to move images(any resources) from local machine to AEM server.

Link:- https://docs.adobe.com/docs/v5_1/html-resources/cq5_guide_power_user/ch04s03.html#sect_foundation_co...

// Common headers.

I hope these links will cover all what you need.

Thanks and Regards

Kautuk Sahni

[santosh_sai]

you need an steps to do from 3rd step m i right?

[nsvsrk]

Exactly.

I need help from Step-3 to Step-6.

I think from Adobe perspective also, it is better to publicly document these steps, as this is a real life scenario.

Articles may exist independently for each of these steps, but if there is one master procedure that ties all these together, as a use case, it helps a lot of people.

Thanks,

Rama.

[nsvsrk]

Hi,

The URL https://docs.adobe.com/docs/en/aem/6-1/develop/platform/adding-fonts.html  talks about making some fonts ready to be used in the Java API.

I have not come to Java at all.

It is all simple HTMLs and my question is how to apply fonts to the text used in the HTMLs.

Yes, in the next step, I will be needing fonts for Java also.

Thanks,

Rama.

[edubey · Accepted solution]

Hi,

Step-3: Images. Of course, these should be uploaded to DAM and the author should be given an option to drag and drop on to the page, by putting Image component on the template. For this, the images include code should be replaced with Image component inclusion on the template

-- Yes, you are right, you need to remove existing image code and rather make it dynamic to accept the image path dynamically from Image component ( we have one in OOTB).

Step-4: How to apply banners? To me, banners are like images and should be uploaded to DAM and authors should be enabled to drag and drop.

-- Create one image/banner component and so same as in step 3

Step-5: How to apply fonts?

-- Create a folder in etc/design/project/font, upload all you fond files here. Then in CSS you can refer this path where ever you are using fonts

@font-face { font-family: myFirstFont; src: url(/etc/design/project/font/sansation_light.woff); }

Step-6: Any other actions to convert this plain html to a plain aem page. I am aware that to make it adaptive, etc, I need to beautify it more. I will handle these in iteration-2.

-- Use site importer tool in aem

Thanks

[nsvsrk]

Hi edubey,

Thanks for responding.

Step-4: I would guess that image/banner is an OOB component and it could take an image or a banner. Pl confirm.

Step-5: I am using these fonts in 8 HTML files.

My css.txt of clientlib currently looks like the following:

#base=styles
admin.css
bootstrap.min.css

I want to use the following 2 font files: FontAwesome.otf and glyphicons-halflings-regular.eot.

My project name is demo.

a. I should create a folder /etc/design/demo/font, upload both these font files here.

b. I should add the following to this css.txt file.

1. @font-face {
2. font-family: myFirstFont;
3. src: url(/etc/design/demo/font/FontAwesome.otf);
4. src: url(/etc/design/demo/font/glyphicons-halflings-regular.eot);
5. }

c. Where within the css.txt file should this code be placed? At the end of file, after bootstrap.min.css file declaration?

Step-6: "site importer tool in aem" imports an existing web site and helps development of a new project right?

I will play with this tool.

Thanks,

Rama.

[edubey]

Step-4: I would guess that image/banner is an OOB component and it could take an image or a banner. Pl confirm.

Yes. A banner is generally a image with large width

a. I should create a folder /etc/design/demo/font, upload both these font files here.--- Yes

b. I should add the following to this css.txt file.-- No, add this is .css file in which you are using this font.

1. @font-face {
2. font-family: myFirstFont;
3. src: url(/etc/design/demo/font/FontAwesome.otf);
4. src: url(/etc/design/demo/font/glyphicons-halflings-regular.eot);
5. }

c. Where within the css.txt file should this code be placed? At the end of file, after bootstrap.min.css file declaration? . No need to change css.txt for font

[nsvsrk]

Hi edubey,

Sorry to extend this conversation.

All the 8 HTMLs use both these css files, admin.css and bootstrap.min.css, whose names are listed in css.txt.

So, shall I add the following in both these css files? (since not in css.txt)

1. @font-face {
2. font-family: myFirstFont;
3. src: url(/etc/design/demo/font/FontAwesome.otf);
4. src: url(/etc/design/demo/font/glyphicons-halflings-regular.eot);
5. }

There are no other css files involved.

If the answer is yes, where specifically in these css files to add? Anywhere in it is fine?

Appreciate your patience.

Re creating these HTMLs in AEM is a big milestone achievement for me. Thats why I am causing this much trouble to you.

Thanks,

Rama.

[edubey]

I would recommend it to add it to top level, i mean the initial line of admin.css as order matters in. admin.css will load first