Samuli Natri
Oct. 18, 2016
Updated: Oct. 23, 2016
2
By Samuli NatriOct. 18, 2016
(Updated: Oct. 23, 2016)
2

Drupal 8 Tutorial : Clickable Responsive Grid With Views (Article + Video)

How to create a responsive, clickable grid with views.

Bootstrap Subtheme

Create Image Style

  • Go to admin/config/media/image-styles
  • Create an image style with Scale and crop effect 300×200

Create the View

  • Create an Unformatted list View Block with Image, Title, Path and Custom Text fields:

  • Image field settings:

 

  • Title field settings:

 

 

I added p tags around the title with rewrite results so we can target it better. I tried to add them with the STYLE SETTINGS first, but the trimming option removed them.

  • Path field settings:

  • Global: Custom Text settings:

  • Edit FORMAT: Settings and add col-md-4 class to rows:

col-md-4 class creates 3 columns.

  • Go to the view Advanced: CSS class settings and add a container-fluid class to the view:

CSS (LESS)

.view-responsive-grid {
  margin-top: 1em;
  img {
    width: 100%;
    border: 3px solid #eee;
    padding: 3px;
    border-radius: 5px;
  }
  img:hover {
    border-color: #ddd;
  }
  a {
    color: #fff;
    text-decoration: none;
  }
  p {
    display: inline;
    position: relative;
    bottom: 60px;
    left: 6px;
    background: rgba(17, 17, 17, .5);
    color: #fff;
    padding: 0.5em 0.7em;
  }
}

Place the Block

  • Go to admin/structure/block and Place Block above the Main page content.
  • Block settings:

Result

Now we have the grid showing only in the front page:

Links

http://www.wdtutorials.com/drupal/theming/bootstrap-1-subtheme-cdn-drupa...

Comments

OK, I didn't know about LESS and after goolgeing I knew it's LESS syntax.

Hi Samuli,
Thanks for the great tutorials.

I have a weird problem with the css. It doesn't display properly when I type in the exactly css you outlined above.

Like this:

.view-responsive-grid {
img { }
img:hover { }
a { }
p { }
}

and I had to change it to the traditional way to make it displays correctly, like this:

.view-responsive-grid img{ }
.view-responsive-grid img:hover { }
.view-responsive-grid a { }
.view-responsive-grid p { }

Then I thought it could be due to the different web browser Safari, but it still won't display on the Safari in El Caption. Any idea? Thanks.

Add new comment