Samuli Natri
Nov. 23, 2015
Updated: Sep. 28, 2016
0
By Samuli NatriNov. 23, 2015
(Updated: Sep. 28, 2016)
0

Views #2 : Grid Format & Fields (Drupal 8 Tutorial #4) (Article + Video)

In this tutorial we create a Grid of articles with title, image thumbnails, trimmed body and read more link to the content. We Rewrite the body field so we can trim it and add read more link using content path as a token.

Note: the video has a lot more explanations and examples.

Change The List To Grid

  • Click the Unformatted list in the FORMAT section:

Syntax highlighting

  • Change the format to grid and Select Number of columns to 3.

Now it looks like this:

Syntax highlighting

Add Fields

  • Click the content link and change it to Fields:

Syntax highlighting

  • Hit Apply.

Now we see just the titles:

Syntax highlighting

  • Add Path, Image and Body fields.
  • Path field: check Exclude from display.

We don’t want the Path field to show, but we want to use it as a token.

  • Click the down arrow and Rearrange the Path field on top:

Syntax highlighting

By ordering the Path field on top we can use it as a token for other fields (for a body field in this case.)

  • Image field: change the Image style to Thumbnail and Link image to Content:

Syntax highlighting

  • Body field: under REWRITE RESULTS set the Trim settings:

Syntax highlighting

The view so far:

View so far

Result

Grid of articles with title, image thumbnails, trimmed body and read more link to the content.

Syntax highlighting

Add new comment