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...

Samuli Natri is the founder of WDTutorials.com. He started building Drupal sites in 2010 with Drupal 6. He attended Helsinki University and Helsinki University of Technology (Social Sciences and Computer Science). Read more...

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