Media elements – Ombra Documentation

The Shortcode Media Elements are conceived to showcase your portfolio or other interactive items, like images or videos, in so many creative manners.

They stand as independent design elements, enhancing the existing page content, but they could be a part of other shortcodes, like Columns or Row.

As Shortcode Basic Items, this type of shortcodes have the specific feature for allowing no content to be embellished inside them. There are two shortcodes of this type: Album and Projects.

Summary

Album
Projects

Keep in mind By embellishing content, we mean the use of any WordPress Editor tools or the insertion inside the same shortcode of any other shortcodes offered by Ombra Theme.

Even if at first sight, these two shortcodes are similar in the matter of options and display, there are couple of important features that differentiate them. By knowing the distinctions between them, you will know better how and in which specific situations you need to use each of them.

Album

it extends the functionality of Album Post Type
it creates custom entry points to any type of site content: Post, simple Page, Product, even a Project. You can also avoid linking Album Items at all (in case you just want to create a custom gallery)
the Album Item could be either image or video
Album Item could stand as gallery item, without linking the item itself to a specific content
you can visit the Album Item content just via a Button, not by clicking on image
it can display a list of heterogeneous elements (Post, Page, Project, Product) in the same instance. The list is showcased as Masonry, Slider or Carousel

Projects

it extends the functionality of Projects Post Type
it designates entry points just to Single Project page, where the project is described in more details. This is the only type of content you could link your Project Item to.
Project Item is represented just by the featured image
Project Item always links to one type of site content — a Single Project page
you can visit the Project Item content just by clicking on the image
it can display just a list of Projects in the same instance. The list is showcased as Masonry, Slider or Carousel

Album

Album is a powerful and flexible shortcode that allows you to showcase creatively the content. It consists of two parts:

information data — it is connected with Album Post Type, where Album Shortcode takes data from, like Title, Subtitle, Description or Button label and link
display data — it is composed of own options that allows to choose what type of content to show and how to display it

The Album options are classified in two main groups:

General Properties — common for almost all types of Albums
Display Typologies — depending on Album type, these options are different

General Properties

Album Categories — filter items by categories; leave empty to select all items
Items — you can choose specific items to display, by entering their ID’s, separated by comma. The ID could be taken from Album Item URL

Order by — items can be organized by Date, Title, Author, ID, Last modified date and Parent ID
Order — choose between Ascending and Descending order
Number of items — enter the number of items to display
CSS class — if it’s necessary to add more style rules

Display Typologies

There are three ways the Album will showcase on a site page, depending on your needs:

Masonry — a grid with multiple columns

Slider — a single item (image or video) showcased at a time, embellished with smooth effects. Read more about sliders.

Carousel — similar to slider, but carousel is able to showcase more than one items (image or video) at one time. Read more about carousels.

Common Options

Overlay color — color layer that covers the item when possible (exceptions: Shadow, Rising, Plain and List cards)
Overlay color transparency — color layer transparency (100% means the color is transparent)
Animation — the way items appear on page while scrolling
Animation delay — set a delay time for animation, in seconds — Minimum: 0 seconds, Maximum: 3 seconds

Masonry

Categories filter — positioned inside General Properties panel because of technical reasons, it helps to sort items based on categories: Main Categories shows just the categories without its child-categories, if comparing to All Categories
Display — the way items are displayed: Shadow, Move, Fade, Rising, Plain, List
Columns — how many items columns are displayed (1, 2, 3, 4 or 6)
Columns spacing — spacing between columns (pixels)

Slider

Height — slider height in pixels
Full-height — slider height takes Window full-height. It overwrites height specified at Height option mentioned before
Image scaling — the way images scale on slider. Its two options have specific behaviours: Fill – recommended for landscape images and Fit – recommended for portrait images
Scroll down arrow — useful when you use a fullscreen slider and you want to point out that below slider there is more content to see
Title font-size — set a custom font-size for Title you already specified in Album Post Type
Subtitle font-size — set a custom font-size for Subtitle you already specified in Album Post Type
Show content — content includes any text element slider might showcase: title, subtitle, description or button
Delay content — timing delay before content shows up after slide appearance — Minimum: 0 seconds, Maximum: 3 seconds
Parallax effect — smooth scrolling effect applied to slider images

Carousel

Height — carousel height in pixels
Full-height — carousel height takes Window full-height. It overwrites height specified at Height option mentioned before
Image scaling — the way images scale on carousel. Its two options have specific behaviours: Fill – recommended for landscape images and Fit – recommended for portrait images
Scroll down arrow — useful when you use a fullscreen slider and you want to point out that below slider there is more content to see
Slides — how many items slides are displayed at a time (3, 5 or 7)
Slides spacing — spacing between slides (pixels)