Importing Fragments and Resources

First, you’ll import fragments and images created by their designers to aid in building out their pages. With these, the site creators have the resources required to create the site while meeting Clarity’s design and branding requirements. Log in as Preston Palmer, the site administrator user, for this exercise.

Downloading the Images

1. Download and unzip the images:

   curl https://resources.learn.liferay.com/courses/latest/en/web-site-manager/creating-pages/importing-fragments-and-resources/liferay-q9c4.zip -O
   

   unzip liferay-q9c4.zip
   

Importing the Images

1. Open the Site Menu (), expand Content & Data, and click Documents and Media.

2. Click Add, (), then click Multiple Files.

3. Select all the files in liferay-q9c4.zip/images and click Publish.

These images appear in Documents and Media:

• clarity_banner.jpg
• clarity_logo.png
• clarity-testimonials.jpg

Downloading the Fragment Set

1. Download the fragment set:

   curl https://resources.learn.liferay.com/courses/latest/en/web-site-manager/creating-pages/importing-fragments-and-resources/liferay-j2b6.zip -O
   

Importing the Fragment Set

1. In Liferay, open the Site menu (), expand Design, and click Fragments.

2. Click Actions next to the fragment set () and select Import.

3. Select liferay-j2b6.zip and click Import.

   When finished these fragments appear in the fragment set:

   • banner-composition
   • footer-composition
   • header-composition
   • home-page-slider-composition
   • home-page-slider-fragment
   • sign-in-fragment
   • user-nav-fragment

   There are fragment compositions and custom fragments in this folder. In addition, sign-in-image.png was included as a fragment resource. See the fragment set’s Resources tab to confirm.

   • Custom fragments are developed by you, if none of the out-of-the-box fragments suit your needs. Often you can start by copying an existing fragment that contains some of the HTML, CSS, or JavaScript you’ll need to create your own fragment.
   • Fragment compositions are reusable fragment groups you’ve added to the content page editor and saved for repeated use.

Next: add the home page using these fragments.

Relevant Concepts

• Default Fragments Reference
• Managing Fragments
• Including Default Resources with Fragments