Drupal Uploaded Image Preview Grid Instead of Table

Some different modules and plugins tin can alter the brandish of a view in Drupal, for instance, to alternate the order of image and text every new row, or to build some kind of stacked layout.

Information technology is possible to modify the brandish of a view with only some lines of CSS code instead. This approach has many advantages, beingness the fact of non having to install and update a module, the nigh relevant one.

Go along reading to learn how!

---

Step #i. – The Proposed Layout

As yous can notice, we can divide the layout into six columns and five rows. There are empty cells in the grid, whereas other cells contain 1 item of the view beyond many cells (grid area). The Drupal view shows a list of articles and their titles. The view format is unformatted listing.

---

Pace #2. – Create an Image Fashion

To ensure that all images are squared, information technology is necessary to configure an epitome style and set information technology every bit display style in the view.

It is always a expert idea to include some reference about the dimension or the proportion of the image manner. That helps when having multiple image styles configured.

---

Step #3. – Create the View

You lot can read more about rewriting results in Views here.

---

Stride #iv. – Theming the View

There are three classes you demand to target to apply the layout styles to the view:

• .gallery-item  (each content carte volition exist a grid)

• #block-views-block-front-gallery-block-1 .view-content

• #block-views-block-front-gallery-block-one .view-row

We set the specificity of the CSS styles on the block. The classes .view-content and .view-row are default Views classes. Theming just with these would break the layout of other views on the site, for example, the teaser view on the front page.

Hint: I am working on a local development environment with a subtheme of Bartik. In that location is much more than about Drupal theming at OSTraining hither.
If you don't know how to create a subtheme in Drupal yet, and you are working on a sandbox installation, just add together the lawmaking at the terminate of the file and please remember always to clear the cache.

/core/themes/bartik/css/layout.css

Let's offset with the content inside the .gallery-item container. It will be a grid with one column and 4 rows. The image will encompass all four rows, whereas the title text will be located on the last row. To center the title on its cell, nosotros declare the link tag as a grid container as well.

• Edit the CSS code:

.gallery-item {     display: grid;     filigree-template-rows: repeat(4, 1fr); }   .gallery-particular a:first-of-blazon {     grid-row: one / span 4;     grid-column: one; }   .gallery-detail a:last-of-type {    grid-row: 4;    grid-cavalcade: 1;    display: grid; /* Acting every bit a grid container */    align-content: center;    justify-content: heart;    groundwork-color: rgba(112, 97, 97, 0.5);    colour: white;    font-size: 1.2em; }        

 Make the images responsive.

• Edit the CSS code:

img {    brandish: cake;    max-width: 100%;    pinnacle: auto; }        

As already stated, nosotros need a filigree with 5 rows and half dozen columns. Subsequently declaring it, map every position in the grid co-ordinate to the layout with an expanse name. The empty cells/areas will be represented with a period.

• Edit the CSS lawmaking:

#block-views-block-front-gallery-cake-one .view-content {  display: filigree;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: echo(5, 1fr);  grid-gap: 0.75em;  grid-template-areas:  ". thumb1 main main main thumb2"  ". thumb3 principal chief main thumb4"  ". thumb5 main primary main thumb6"  "secondary secondary thumb7 thumb8 thumb9 ."  "secondary secondary . . . .";  max-width: 70vw;  margin: 0 auto; }        

Now it'southward time to assign each grid detail to its corresponding region.

• Edit the CSS lawmaking:

#cake-views-block-front-gallery-cake-1 .view-content > .views-row:nth-of-type(ane) {    grid-area: main; }   #block-views-block-front-gallery-block-i .view-content > .views-row:nth-of-blazon(2) {    grid-expanse: secondary; }   #block-views-block-front end-gallery-block-one .view-content > .views-row:nth-of-type(iii) {    grid-area: thumb1; } #block-views-cake-front-gallery-block-i .view-content > .views-row:nth-of-type(4) {    grid-area: thumb3; } #block-views-cake-front-gallery-cake-1 .view-content > .views-row:nth-of-type(5) {    filigree-area: thumb5; } #block-views-block-front end-gallery-cake-1 .view-content > .views-row:nth-of-type(6) {    filigree-area: thumb2; } #cake-views-block-forepart-gallery-block-one .view-content > .views-row:nth-of-type(7) {    grid-surface area: thumb4; } #block-views-block-front-gallery-block-1 .view-content > .views-row:nth-of-blazon(eight) {    grid-surface area: thumb6; } #cake-views-cake-front-gallery-block-1 .view-content > .views-row:nth-of-type(9) {    grid-area: thumb7; }   #block-views-block-front-gallery-block-ane .view-content > .views-row:nth-of-blazon(ten) {    grid-area: thumb8; } #cake-views-cake-forepart-gallery-block-ane .view-content > .views-row:nth-of-blazon(11) {    grid-surface area: thumb9; }        

I think this is a practical fashion to layout Views items the way you desire without the need of installing actress modules, which could unnecessarily touch the functioning of your site.

The Media Queries

The layout volition intermission at effectually 970px, because of the font size.

• Edit the CSS lawmaking:

@media screen and (max-width: 970px) {  .views-row > div .gallery-particular > a:nth-child(2) {    font-size: .9em;  } }        

To change the layout, just add a media query with a new grid-template-areas distribution, and of form, we accept to change the style the rows and columns are distributed The items are already assigned to their respective areas.

• Edit the CSS lawmaking:

@media screen and (max-width: 700px) {  .view-content {    grid-template-columns: repeat(ii, 1fr);    grid-template-rows: repeat(10, auto);    grid-template-areas:      "primary primary"      "master main"      "thumb1 thumb2"      "thumb3 thumb4"      "secondary secondary"      "secondary secondary"      "thumb5 thumb6"      "thumb7 thumb8"      "thumb9 thumb9"      "thumb9 thumb9";  } }        

This layout volition work even with the smallest device screen.

I hope you liked this tutorial. Thanks for reading!

• Jorge Montoya

  Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open up Source Content Direction Systems and technologies.

barfieldsurns1966.blogspot.com

Source: https://www.ostraining.com/blog/drupal/theming-a-drupal-8-view-with-css-grid/

Share this post