Skip to content
Nico Pernice edited this page Jul 25, 2017 · 7 revisions

Source

Getting Started | WP Tiles

There are many ways to use WP Tiles. Read through the Basic Usage below, or jump to any of the examples to see what WP Tiles can do.

Basic Usage

All settings in WP Tiles can be pre-set in the admin area, or modified using the shortcode each time you use WP Tiles. Here is a quick overview on what's possible.

The Shortcode

The simplest way of using WP Tiles is by placing the shortcode somewhere on any of your pages or posts. Just add [wp-tiles] to your post to view the default tiles. Use the shortcode button to select one of our presets, or to create your own custom tiles queries. For an overview of all options you can pass to the shortcode, see the shortcode page.

The Gallery

To use WP Tiles as image gallery, create your gallery using the default WordPress 'Add Media' button. In the 'Create Gallery' pane, there will be a checkbox reading 'Tiled Gallery'. Tick it to automatically turn the gallery into a tiled grid. For more details and options, see the gallery page.

Grids

WP Tiles comes with a collection predefined grids, but the best part is our nifty grid builder that helps you create your own custom layouts. Look at the home page to see how easy it is to create a tile grid!

Look and Feel – image tiles & text-only tiles

There are two types of tiles in WP Tiles: image tiles and text-only tiles. By default WP Tiles will choose whether it should display a background image or show a text-only tile. You can override this behaviour with the options "Text-Only Tiles" (text_only) and "Image Tiles Only" (images_only). Unfortunately, the Image Tiles Only is incompatible with pagination.

Image Tiles

In basis, image tiles show a full-size background image with text on top – the 'byline'. Everything about this is adjustable: you can change the byline height (byline_height), opacity (byline_opacity) or color (byline_opacity), or choose between any of the bundled byline and background image animations (byline_effect and image_effect). Below are some examples of animation combinations:

Play around with the tile designer in the back-end to get a feel for what's possible.

When you are displaying a grid of posts, WP Tiles looks for an image in several places: first the featured image, then any images uploaded to the post and lastly any image displayed in the post. You can optionally change what image sources WP Tiles can use (image_source).

Text-Only Tiles

If WP Tiles can't find an image (or if text_only is enabled), it will display the post without a background image. It will choose the background color randomly from a set of background colors (colors) and apply a preset opacity (background_opacity). Tip: if you set the opacity to 0, text-only tiles will have a completely transparent background.

Bylines

We call the content shown on any tile its 'byline' and you have full control over what the byline shows. The byline template (byline_template and byline_template_textonly) will dynamically be generated using your posts and metadata. See byline templates for more details. For more details and options, see the Bylines page.

Advanced Usage

You can also integrate WP Tiles in your theme completely using one of thetemplate tags.