Construct a View-Grid from fields of the same node?

Question

I understand that naturally it's not possible to grid fields from a single node, when using Views, and we could only display a grid if each field is coming from a different node.

Is there a module that will allow Views, somehow, to make a grid based on fields from the same\single\unique node?

I would surly prefer a way to do it with views-only, but if there is no easy\automatic way to so without installing an external module than so be it.

Answer 1

You could use a combination of Display Suite and Views. This is not a perfect grid... but it's close. These are the steps I followed. I created a Content Type with 6 Long text fields.

1. Install Display Suite and enable Display Suite and Display Suite UI
2. Go to Manage Display of your Content type, click on Custom display settings and enable Full content

3. Click on the Layout tab and select a layout. I selected a Three column stacked - equal with layout.

4. I distributed the fields into the three columns (Left, Middle, Right), and added the node Title in the Header area

5. Create a View of Content. In display format be sure to select Unformatted list of full posts

6. Click on the Content link under Format. Be sure to select Display Suite. Select Full Content

7. Visit your View. This is what it looks like (I am showing two nodes, with 6 fields each):

Now, if you want to make it look nice (e.g. more space between columns), you will have to use css - no way around it.

Answer 2

For ALL your fields you need to do this

• Customize field HTML
• Select SPAN as your HTML element
• type your class name. Example: cool (use the same name for all your fields)
• Uncheck Add default Classes

For FORMAT

• use Unformatted List

For Show: click on settings

• Uncheck provide default field wrappers elements

Now all you need is to add css to your drupal theme .css file

To Make it Mobile friendly

Add a class name to your entire view (ex: test) (see screenshot below)

In css, for width use %, ex:

.test { border: solid red; width: 90%; }
.cool  { border: solid green; width: 200px; float: left;  }

BONUS

If you want to add a class for each row.

• Format click on settings

• Enter a name for row class

• Then in CSS

  .example { border: solid blue; }
  

Answer 3

I usually do this manually but I believe you could use Display Suite for this (free video on drupalize.me).

Many responsive starter themes provide "display suite layouts" out of the box now.

There's even this: https://www.drupal.org/project/ds_bootstrap_layouts

Answer 4

Option 1. Edit the field, under Style Settings check "Customize field and label wrapper HTML" and add your class.

Option 2. Add a new "custom text field" in your view and add html for your other fields using "replacement patterns". i.e.

<article class="grid6">
  <header><h1>[title]</h1</header>
  <div class="my-class">[body]</div>
</article>

How to add a custom text field

The custom text field gets added to the result by Views. You don't add it to your content type. You add it to your view as usual.

1. Edit your view and click "add" field.
2. Search for "Global: Custom text" and click Apply.
3. On the text area for this field add your html and replacement patterns.

For each field that you reference in your "custom text field" you will most probably want to select "Exclude from display".

Note: You can only reference fields that are listed 'before' your custom field.