Boxed Element Display

Boxed Elements

The basic element displays take an element and display it without further constraint. Maybe that is what you require. Maybe you are in control of your elements and can set their dimensions to work with the element display widget as you require.

On the other hand, perhaps you want to display the a slider or gallery of elements and constrain the display size without having to think too much about the element or the size of the original, like you can when displaying a slider or gallery of images. For this, we have some Boxed variations of the element display widgets.

These display widgets use CSS scaling and cropping to provide similar scaling and cropping to the display widgets that work directly with images. Elements are rendered fully, then the rendered html is scaled and cropped to match the dimensions of the gallery or slider items.

Consider - this is just one intensive example of what you can do with Omni Gallery Elements

Example - Element Swiper Boxed

In our example below, the image source is a list of addon pages on this site. However, rather than displaying the thumbnails or screenshots for those pages, we are pulling the main area of the page using an element provided by Universal Content Puller, then scaling it to fit into the box for the Swiper display widget with a cube animation.

So we have a gallery of page previews using html taken from the actual pages rather than from images of the pages! 

(Have a look at any slide in your browser developer console and see - its all HTML. Compare this to the similar gallery of screenshots)

 

Limitations

There are some limitations of this approach. 

  • If you are lucky enough to catch this page when it is not cached, you will appreciate this from the slow rendering time. With the cache, rendering is not that big an overhead.
  • JavaScript for the pages may not be loaded - it all depends on the element.
  • JavaScript for the pages may be loaded but not executed - it all depends on the code.
  • JavaScript for the pages may interfere - it all depends on the code.
  • CSS for the pages may interfere, though as long as they share the same theme that should not be too high a risk.
  • This kind of complexity may be too much for some mobile devices.

To minimize risk, you should think carefully about using an element to source active content.

You need a convenient element

To use this technique to display a page list of actual HTML previews, you need a convenient element. Here we have used an element provided by Universal Content Puller.

Another addon that provides suitable elements for building a gallery of page elements is Enlil Page Tease.

Not just page list previews

The technique is not limited to page lists and previews. This is just an example. Coding a display element is simpler than coding many block view templates, so you can create galleries and sliders of pretty much anything, with or without images.

No new code was written to create this example. It was built entirely using addon settings and existing components.