Exercise - Create Theme

Goals

• Be able to reference a theme from the Site Definition
• Be able to use image variations and resizing the image

Results

• A theme training-theme used for image resizing
• text & image component using variations for resizing

Tasks / Procedure

1. Use training-theme in the Site Definition.

   Detailed steps

   1. Create a folder named themes right under /training-templating-website.
   2. In it, add the following file:
      
   3. Have a look at the already prepared theme.
   4. Notice that some parts of the code are still commented out. Do not uncomment them yet.
      
   5. On your Author Instance, open the Site App.
   6. Still in your training site definition, add a theme content node that uses training-theme, like this:
      

2. Check the URL to the image served directly from the /dam/, asset not resized.

   Detailed steps

   1. Now back to the Pages App.

   2. First, add a text & image component in your training page.

   3. Open the page source of training. To do this, make sure you are in preview mode.

   4. Check the URL of the image served directly from the /dam/, asset not resized yet.

      <img class="img-responsive" src="/training-developer-webapp/dam/jcr:c51f88cd-0f4f-4fab-8dd2-84d243450d2c/flickr_czech_Roman%20Boed_12033279054_fae78935fe_k.jpg" alt="">

3. Add a new text & image component for website.

   Detailed steps

   1. We want to preserve the text & image component of training-templating-foundation therefore, let's create a new one for training-templating-website.

   2. Create a textImage (YAML) template definition under /templates/components and add this code:

      title: Text & Image (Using Image resizing)
      renderType: freemarker
      dialog: training-templating-foundation:components/textImage
      templateScript: /training-templating-website/templates/components/textImage.ftl

   3. Save the file.

   4. Now, create a textImage (FTL) script and add this code:

      [#if content.headline?has_content || content.text?has_content || content.imageLink?has_content]
      
          <div class="default-text-image">
          
              [#if content.headline?has_content]
                  <h4 class="chapter-head">${content.headline!}</h4>
              [/#if]
              
              ${cmsfn.decode(content).text!}
              
              [#-- Resolve the 'imageLink' property to an asset-rendition -> getting resized image --]          
              [#if content.imageLink?has_content]
                  [#assign assetLink = damfn.getAssetLink(content.imageLink, "large")!]
                  [#if assetLink?has_content]
                      <img class="img-responsive" src="${assetLink}" alt="">
                  [/#if]
              [/#if]
              
          </div>  
      
      [#elseif cmsfn.editMode]
          <div>No Content defined for this text & image component.</div>
      [/#if]

      HINT: Notice the use of "large" image variation in [#assign assetLink = damfn.getAssetLink(content.imageLink, "large")!].

      No need to add a dialog, we'll reuse the dialog in training-templating-foundation since we won't be doing any alteration there.

   5. Press save.

   6. Don't forget to make it available in the main and footer areas by simply changing the ID:

      textImageVariation:
   id: training-templating-website:components/textImage

      HINT: Edit the prototype definition prototype-of-all-page-templates.yaml.

   7. Save the file to apply the changes.

4. Check your work.

   Detailed steps

   1. Back on your training page, add a second text & image component.

   2. Open the page source of training. To do this, make sure you are in preview mode.

   3. Check the URL of the second image served through the imaging servlet /.imaging/, asset resized.

      <img class="img-responsive" src="/training-developer-webapp/.imaging/mte/training-theme/large/dam/tours/paris_eiffel_Louis-Pellissier_IMG_8643.jpg/jcr:content/paris_eiffel_Louis%20Pellissier_IMG_8643.jpg" alt="">