5

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.

  • I think you are over thinking this, you can accomplish the grid with css. – No Sssweat Oct 24 '15 at 22:02
  • But these are different fields my friend, and I don't want to template that node... I want to do it from the UI. – user16289 Oct 24 '15 at 23:30
  • 1
    template the view not the node, just give each field a span name and use css to grid them. – No Sssweat Oct 24 '15 at 23:53
  • Not yet @NoSssweat, I need a css code that will make the grid responsive and mobile-first. I can't let my grids to be not-responsive; is the css command "column-count: 3" suits this purpose? – user16289 Nov 9 '15 at 21:59
  • Thank you very much --- I think you can delete the non-mobile-friendly part and keep only the mobile-friendly one just that it would be a little bit more easy to read to all readers... And btw small q --- Shouldn't it include media screen and (min-width), or anything at the sort of mobile-first? – user16289 Nov 10 '15 at 11:17
6
+100

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 enter image description here
  3. Click on the Layout tab and select a layout. I selected a Three column stacked - equal with layout. enter image description here

  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 enter image description here

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

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.

| improve this answer | |
  • Looks good. BTW, are the Display-suite grid system responsive? and about stage 7, what css will you add to make some more space between the boxes? Some margin and that's it? Or maybe an extra thing? – user16289 Nov 8 '15 at 18:59
  • I'm not sure if they are responsive. As for the css, for example, you could add something like box-sizing: border-box; padding-right: 2px; to the class of the grid cells to separate them slightly. In the example above fields 4, 5 and 6 were not individual cells of the grid - field 1 and 4 were in the same cell, which is not ideal. But you can define new Display Suite layouts with more cells - see ds.api.php (specifically ds_LAYOUT_KEY) and do a search for custom layout display suite. – argiepiano Nov 9 '15 at 4:30
  • Will check them, and I hope they will be responsive as part of the responsification Drupal goes to before Drupal 8 will be released: It has already been declared that all the View grids for example will be responsive by nature; I'll check it when Drupal 8 will come out and then now what is best for me. – user16289 Nov 9 '15 at 5:41
  • Because Drupal 8 is coming out next week and it is most likely to include responsive mobile-first layouts to display suite, I will use this option; At least, if Views will start display grids from fields of the same nodes naturally. – user16289 Nov 10 '15 at 22:21
  • 1
    @Pierre.Vriens yes it is safe now to go live/prod with Drupal 8, technically since the official release (8.0.0) – No Sssweat Aug 11 '16 at 8:45
5
+50

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

enter image description here

For FORMAT

  • use Unformatted List

For Show: click on settings

  • Uncheck provide default field wrappers elements

enter image description here

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;  }

enter image description here

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; }
    

enter image description here

| improve this answer | |
  • I seem to understand you use it for like a quick-and-dirty prototype kind of demo or something. Am I close? That is correct. It was a quick demo of the code above it. Unfortunately, when jsfiddle improved/changed their website recently, seems like all the existing fiddles were lost. – No Sssweat Dec 18 '15 at 20:14
  • MERCI for explaining/confirming ... what I always fear about in using such "free" (of charge), I guess, sites. So it seems like "my" (silly?) approach to prepare some demo on my own site is not that bad (even though it's way more "expensive" of course as "free"). So what do you do then with answers where such links get broken? Remove the link? Create a new one? Something else? Variation: if someone else would run into such broken link, should they flag that, try to repair that, add a comment targeted to you? Remember: "suggested edits" should never change the OPers intend (hm, hm). – Pierre.Vriens Dec 18 '15 at 20:23
1

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

| improve this answer | |
  • And what about a way to do that with Views only? – user16289 Oct 25 '15 at 14:30
  • Added a new answer for this (to get better formatting). – gkom Oct 25 '15 at 15:15
1

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.

| improve this answer | |
  • About option 2 --- Is this "Custom text field" a separate one from the Node-fields? Thanks. If it is, can you please give a few words in brief how to add it in the Views module? (Quick Google search didn't give an answer and I remember myself trying to find such a thing in the Views module). – user16289 Oct 26 '15 at 7:39
  • See my edited answer. – gkom Oct 26 '15 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy