Media Layouts

Vlieland WordPress theme supports 8 media layouts on page, post and portfolio. Not all layouts are available on each post type – like the map is only available on pages etc. Here’s a breakdown of what each post type is able to display:

  • Page
    Image, slider, slideshow, video and map
  • Post
    Image, slider, slideshow and video
  • Portfolio
    Image, slider, slideshow, video, carousel, masonry and justified

Basic Settings

Despite having different possibilities, all post types share three basic settings:

  • Type
    This determines the media type to display on a post. When a media type is selected, the corresponding settings will be displayed.
  • Show Caption
    This determines whether image captions should be displayed where ever possible.
  • Mobile Height
    This determines the media height on mobile devices in percentages of the screen’s height.

Media Specific Settings

Here we will cover each media layout, see an example of it and go through the various settings they have.

Image

This media layout displays the post featured image as a static image. An example of this layout can be seen here: http://wp.youxithemes.com/vlieland/portfolio/a-healthy-lifestyle/

Slider

This media layout displays a set of images in a horizontal slider. The slider is extremely customizable and boasts an outstanding performance across all devices. An example of this layout with thumbnails enabled can be seen here: http://wp.youxithemes.com/vlieland/portfolio/norwegian-landscape/

  • Autoplay
    This option determines whether the slider should auto play. When set to zero, auto play is disabled, otherwise it would be the auto play timeout in milliseconds.
  • Wrap Around
    This option determines if the slider can go from the last to the first slide and vice versa.
  • Freescroll
    This option determines if the slider is not restricted to slide based on each item. Enabling this option allows the slider to slide freely.
  • Page Dots
    This option shows/hide the slider navigation dots.
  • Arrows
    This option shows/hide the slider navigation arrows.
  • Thumbnails
    This option allows you to enable the slider navigation thumbnails.

Slideshow

This media layout displays a set of images in a fading slideshow. An example of this layout can be seen here: http://wp.youxithemes.com/vlieland/portfolio/through-the-macro-lens/

  • Autoplay Timeout
    This option determines whether the slideshow should auto play. When set to zero, auto play is disabled, otherwise it would be the auto play timeout in milliseconds.
  • Page Dots
    This option shows/hide the slideshow navigation dots.
  • Arrows
    This option shows/hide the slideshow navigation arrows.

Video

This media layout displays either a YouTube/Vimeo/HTML5 video. The video has its sound disabled and starts automatically. Here’s an example: http://wp.youxithemes.com/vlieland/portfolio/the-milkyway/

  • Type
    The video type to display. It can be YouTube, Vimeo or HTML5
  • YouTube URL
    When selecting YouTube as video type, provide here the YouTube URL
  • Vimeo URL
    When selecting Vimeo as video type, provide here the Vimeo URL
  • HTML5 Source
    When selecting HTML5 as type, choose here the video file
  • Poster
    Provide a poster image to show when video playing is not supported

This media layout displays a set of images in a carousel layout, each image being the same height as the screen spanning horizontally side by side. The carousel is implemented using the same plugin as the slider, thus boasting a an outstanding performance across devices. Here’s an example of this layout: http://wp.youxithemes.com/vlieland/portfolio/wildlife-collection/

  • Align
    This option determines the carousel alignment. It aligns the cell in focus to the left, right or center.
  • Wrap Around
    This option determines if the carousel can go from the last to the first cell and vice versa.
  • Freescroll
    This option determines if the carousel is not restricted to slide based on each item. Enabling this option allows the carousel to slide freely as seen here: http://wp.youxithemes.com/vlieland/portfolio/wildlife-collection/.
  • Page Dots
    This option shows/hide the carousel navigation dots.
  • Arrows
    This option shows/hide the carousel navigation arrows.
  • Autoplay
    This option determines whether the carousel should auto play. When set to zero, auto play is disabled, otherwise it would be the auto play timeout in milliseconds.

Masonry

This layout displays a set of images in a masonry layout. The spacing, number of columns can be customized to your liking. Clicking on an image in the masonry grid will open up a fullscreen image viewer that can display your image in a beautiful way with amazing interactivity. Here’s an example: http://wp.youxithemes.com/vlieland/portfolio/lavender-fields-of-provence/

  • Margin
    This option determines the spacing between masonry grid items.
  • Columns
    This option determines in how many columns the masonry grid should be displayed.
  • Multisize
    This option determines whether the masonry grid should allow multisized grid items. How to set up the grid size on an image attachment is explained here:
  • Image Size
    This option determines the image size to be displayed for each grid item. It could take the original image aspect ratio, a square image or an image with 4:3 aspect ratio.

Justified

This layout displays a set of images in a justified layout. The layout displays your images like seen on Flickr, where each row shows a different number of images in different heights. Clicking on an image in this layout will open up a fullscreen image viewer that can display your image in a beautiful way with amazing interactivity. Here’s an example: http://wp.youxithemes.com/vlieland/portfolio/masculinity/

  • Margin
    This option determines the spacing between each justified grid item.
  • Minimum Width
    This option determines the minimum justified grid column width used when calculating the layout.
  • Minimum Height
    This option determines the minimum justified grid row height used when calculating the layout.
  • Justify Last Row
    This option determines whether the last row of the justified grid should expand to fill up the container horizontally when there’s some space left.

Map

This layout, only available on pages helps you add a map inside your page header. This is useful for contact pages or when you want to show your business location. Here’s an example page with the map: http://wp.youxithemes.com/vlieland/contact-us/

  • Center Latitude
    This option positions the map’s center latitude.
  • Center Longitude
    This option positions the map’s center longitude.
  • Zoom
    This option determines the map’s zoom level.
  • Dragging
    This option toggles dragging of the map either with the mouse/on a touch device.
  • Touch Zoom
    This option determines whether the map can be zoomed in/out on touch devices.
  • Scroll Zoom
    This option determines whether zooming can be controlled with the mousewheel.
  • Style
    Here you can choose the map style to display.
  • Markers
    Here you can provide an unlimited number of marker coordinates and descriptions to display on the map.

Was this article helpful?

Related Articles