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
-
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
-
Open the Site Menu (), expand Content & Data, and click Documents and Media.
-
Click Add, (), then click Multiple Files.
-
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
-
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
-
In Liferay, open the Site menu (), expand Design, and click Fragments.
-
Click Actions next to the fragment set () and select Import.
-
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.