Uploaded image for project: 'Magnolia pages module'
  1. Magnolia pages module
  2. PAGES-112

Slightly rework the preview of pages



    • Type: Story
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 5.5
    • Fix Version/s: 5.5.1
    • Component/s: None
    • Labels:
    • Release notes required:
    • Documentation update required:
    • Sprint:
      Basel 78
    • Story Points:


      The page preview on tablet and smartphone looks dated due to the (old) iPhone and iPad frames we show it in. It's also disorienting as switching between two previews causes the page to start at a different location inside the viewport. We've heard it several time that the page preview should be reworked.

      We're going to rework the page preview like this (see attachment 1 and attachment 2):

      • We no longer show the frames of a tablet or a smartphone.
      • We top-align a page preview with the black preview bar.
      • When switching, we only change the width of the page, but always use the full available height.
      • We have two options per mobile preview in the combobox in the preview bar, one for "landscape", one for "portrait".
      • We expose the current resolution of the iframe in the status bar at the bottom.

      Note that the main goal of this issue has been to remove the main pain points, and remove them quickly. We've thus designed a solution which we expect is somewhat easy to implement with the current means.

      Widths to use

      To remain aligned with how the current preview works, we'll stick with the widths of the original 1x resolutions of an iPad and an iPhone.

      • Desktop: width of the viewport available for the iframe
      • Tablet (landscape): 1024px
      • Tablet (portrait): 768px
      • Smartphone (landscape): 480px
      • Smartphone (portrait): 320px

      The plan is to eventually move to a preview allowing you to actually pick from multiple, typical resolutions for each mobile device type. See attachment 4 for an example from Mozilla Firefox's built-in web developer tools.


        1. 1 Reworked preview.png
          1 Reworked preview.png
          332 kB
        2. 2 Reworked preview.png
          2 Reworked preview.png
          231 kB
        3. 3 Preview.current.png
          3 Preview.current.png
          347 kB
        4. 4 Choose resolution.future.png
          4 Choose resolution.future.png
          1.26 MB
        5. Reworked mobile preview.pdf
          1.03 MB

          Issue Links



              fgrilli Federico Grilli
              weder Andreas Weder
              1 Vote for this issue
              6 Start watching this issue


                Date of First Response: