Overview

The Page Image element is a component that can be implemented within the design layout.

 

Implementation

The following changes should be applied to Page Properties and Layout Structure within DesignPro tool -> Layout Editor in order to set up the Page Image element.
 

Page Properties

 

  • Width and height should be set for 'Page Image Container Size'. The format of the entered value is widthXheight (Example: 1920x700). The width and height are in px, however the actual height is calculated as percentage of the width. It is recommended to set equal value for both 'Page Image Container Size'.
     
  • Depending on the setup of the following Page Properties some of the editing options for the Page Image might be included or excluded or specific styles will be applied to the Page Image. List of the properties:
     
    • Page Image supports Zoom - Whether or not the Page Image should support Drag&Zoom option on edit
    • Page Image supports Custom Height - Whether or not the Page Image should support size selector option for predefined/custom height on edit
    • Page Image supports "None" - Whether or not to allow setting Page Image type to "None"
    • Page Image supports "Slideshow" - Whether or not to allow setting Page Image type to "Slideshow"
    • Page Image has Fluid Width - Whether or not to consider Page Image as fluid. If enabled, 1920px is the max-width setting that will be used by the element. For greater resolutions it is recommended to use 1920px for Page Image width.
    • Page Image is Full Height - Whether or not to have Page Image height equal to the viewport (browser window) height. If set the Page Image height will be 100% of the browser window height.
       
Layout Structure

 

Two containers should be added - outer and inner. The outer container is wrapper container for the Page Image. The inner container should hold the Page Image itself.
 

  • Outer container - The Page Image wrapper container should determine the width. Therefore max-width (recommended) or width style property should be set equal to the width added for 'Page Image Container Size'. If Page Image width is 1920px the wrapper should get style "max-width: 1920px;". The Page Image wrapper should also be horizontally aligned center.
  • Inner container - The Page Image container should have class 'pageImage' and height property equal to the height set for 'Page Image Container Size'.


Tutorial 1 - The first tutorial contains basic setup to include Page Image element in design layout supporting Zoom, Custom Height, "None" and "Slideshow" where the Page Image is with Fluid width.



Tutorial 2 - In the next tutorial is demonstrated setup of Page Image with disabled "Page Image has Fluid Width" property. The Page Image is still going to be responsive. The difference is in specific width/height calculations. The height is still going to be calculated in percentage of the Page Image width. The width of the Page Image should be set to smaller than 1920px. The layout from the first tutorial setup is edited in order to disable the "Fluid Width" property:



Tutorial 3 - The next tutorial will extend/update the setup of the first tutorial showing implementation of Full Height Page Image with Fluid width. In that case the height of the Page Image is recommended to be at least 1000px. When Full Height Page Image is enabled viewport (browser window) height is used for the height calculations. Therefore the height value of the Page Image should be big enough to expand the images. Smaller height values than 1000px can be used if the Page Image is not with Fluid width.


Additional Information

 

  • As mentioned above the Page Image height is calculated in percentage of the width. If the dimensions for width and height 1920x700 are set, the height will be fluid in order to keep the aspect ratio of the image.
     
  • ​The Drag&Zoom option (on Page Image edit) will be available for images where image width is bigger than the Page Image width set in the Layout Editor. As in the example from the first video all images with width bigger than 1920px will have the option.​ If the width of the image uploaded/added for Page Image is smaller or equal to 1920px, the zoom option will not be available.
     
  • When "Page Image is Full Height" and "Page Image supports Custom Height" options are enabled, on Page Image edit the custom size is set in percentage of the browser window height.