Does anybody know if in Views you can not only define an individual Style setting for a Field, but also a group of Fields, eg. Title and Body having a product_text wrapper div?
And while I'm on the subject, can you define more than one div class to wrap a row with?

Comments

kolldani’s picture

Hello,

I think you can do it if those fields what you want put into a wrapper div exclude from view. After it at part "rewrite output" you can use tokens inside wrapper elements you'd like to use. To see "rewrite output" you must open "Style settings" (or similar). It's important, onli former fields are available as a token at a given field. Maybe you must rearrange your fields in order to wanted fields be avaylable at this place.
Another solution to create the propel template file for that view. About it see Views documentation (row styles, using fields, etc.).
I'm not too experienced, I hope somebody more experienced than me complete my comment.

MattBridger777’s picture

That was brilliant. Thanks a lot for that, it works a treat. My utmost thanks to yourself for pointing that out and to the guys who have worked hard on the Views module.
Awesome.

kolldani’s picture

Hi,

Since a member of the community asked me via email to write details on how to group more fields in a shared wrapper div I decided to share my answer here, as well.

He wanted the following output to be produced:

<div class="mainBody>
  <div class="location">content</div>
  <div class="text">content</div>
</div>

And my explanation for his question is folllowing:

To demonstrate your problem with wrapper div to myself i tried to create a view and I think I succceeded.
Please, follow my instructions in follows.
First of all I created a new content type named "example", I didn't click "save", but clicked "Save and edit fields". I removed the original body field, and as in your example I added a location and a text field, both fields was made as simple text.
After it I created a new content of type "example (created above). I filled out title, location and text fields as example, location field content and text field content and saved the new content.

Now I create a view, clicking "Add new view" I give the name (e.g. demo view". On this screen at display you must specify "content" of type as "example" (we craeted it above), at display format unformatted list must be selected, it wraps every field in a div, heer you must select "fields" in dropdown. So far you said views, you want create your views from content, type of "example", and you want use fields in your view, not teasers for example. I think on this screen view as page is default, you must see a title and an URL is set, if not, you have to set them.
Now click "Continue and edit" button.
On UI appearing select "page" display, if it weren't that by default.
At fields you can see only one field now, "title", it's ok, but you want further two fields "location" and "text". Click add at fields part. Now a dialog appears. Change filter to content in the dropdown, and check both fields you need and click "Apply".
Now you can configure "location" field. If your fields have other names it may happens you must configure your fields in different order. It's no broblem, the main point is your field being configured firstly must be a hidden field as i describe below. Now suppose we configure "location" field at first.
First uncheck "create a label", no need for it in our case.
Check "Exclude from display", it needed for embedding it in the other field.
Now click on "Apply".
Next appears a dialog where you can configure your other field "text".
As formerly you have to uncheck "Create a label". But in this case you mustn't check "exclude from display" if you want your views not to be empty!
Click "Rewrite result"and check "Rewrite output of this field" checkbox. You'll get an input where you must write some similar than i write below:

[field_location]
[field_text]

Things written in brackets are tokens. If you want to see your tokens avaylable click "Display replacement patterns". If it's necessary, change patterns in the input to fit your field names.
Next click "Apply".

That's all! You must save your view clicking "Save" on top and you can click on "View page" at "Page details" part to see your view in function. I include for you a snippet of its source to show the result to you.

  <div class="views-field views-field-title">        <span class="field-content"><a href="/content/example-content-1">Example content 1</a></span>  </div>  
  <div class="views-field views-field-field-text">        <div class="field-content"><div class="mainBody"><div class="location">location field content</div><div class="text">text field content</div></div></div>  </div>  </div>
    </div>

As you see that's you wanted. There are some extra wrapper divs added by views but they haven't any CSS rules applyed to them by default so don't worry about them :-).

I hope I helped you.

Regards,

ugers’s picture

Thanks this is very helpful! I have a question though, is it possible to give a name to the div you've just created?

Arun Guddeti’s picture

As I am trying to do accordion for a view which has more fields its making it a big Jquery function and doesn't look good.

with this scenario as I'm doing everything in one field it's very nice approach. Less jquery function (reduced from nearly 11 lines to 3 lines of code).

Thanks.

broon’s picture

I already knew about the solution kolldani described and it works in a lot of cases and mostly if you don't need the label.

However, one of my current projects, I have two fields "city" and "country". Both fields shall be displayed as a single field labelled "place". Now, there are four possibilities:

  1. Both "city" and "country" are set, output should be
    place: city, country
  2. Only "city" is set, output should be
    place: city
  3. Only "country" is set, output should be
    place: country
  4. Neither "city" nor "country" are set, output should be

    (That's right: nothing. Label should be omitted.)

Since the first three cases have the label displayed, I am able to cover these cases with views configuration. But how to extend kolldani's solution to have the fourth case covered?

Tmanagement’s picture

could your problem be solved by setting "exclude from display when empty" at your display settings of your view? If there is no data in both fields, they wont be displayed I suppose.

broon’s picture

Well, I can't use that option.

My setup:
country field: excluded from display, no label
city field: not excluded, label: "Place", rewrite rule: "[city], [country]", no results behaviour: "[country]"

Due to the rewrite rule (to add the comma) the city field is actually never really empty. Also, I need the no results behaviour to display the country even if no city is given.

So currently, I am facing two problems:
(1) How to delete the comma if country is not set? Or (the other way around), how to add the comma if both are set?
(2) How to hide the label if neither is set?

Probably, solving (1) will probably render (2) obsolete. Only solution I have right now is to use a Views PHP custom field to define the output with a short PHP script.

Tmanagement’s picture

how about making the comma part of the country field by rewriting that field as well? This will mean that as soon as country is populated with data the comma will be there and if not it will be empty.

If possible then making sure that nothing will shown when the field is empty will not return a comma (since the field is not rendered) and not show the label in case both fields are empty.

not a diehard rewrite user though...

broon’s picture

Of course, I tried that. That way the comma will always be there as soon as country is set. Now, if no city is set, it will read "Place: ,[country]". In this case I need to get rid of that orphan comma.

Tmanagement’s picture

funny how something that looks so simple can be a pain in the ass ;)

sorry now I have run out of ideas....

bmcavin’s picture

You can do this using Global: Math expressions.

1. Add two new fields to your View:
(I'm assuming you already have two fields like City [field_city] and Country [field_country])
City_Bool [field_city_1] (Your replacement pattern may be different)
Country_Bool [field_country_1]
Each should be excluded from display, have No results text set to 0, "Hide rewriting if empty" checked and Rewrite the output of this field set to 1. (i.e. each will evaluate to 0 if it's respective field has no content and to 1 if it has content)

2. Add a Global: Math expression field for the punctuation, excluded from display [expression]
Expression [field_city_1]*[field_country_1] - This will evaluate to 0 if either or both the city and country is empty and to 1 if both have content
In NO RESULTS BEHAVIOR check "Count the number 0 as empty", "Hide if Empty" and "Hide rewriting if empty".
Rewrite the output of this field to ", " (i.e. ,space).

3. Add another Global: Math expression field
Give it the label "Place"
Expression [field_city_1]+[field_country_1] - This will evaluate to 0 only if both city and country are empty
In NO RESULTS BEHAVIOR check "Count the number 0 as empty", "Hide if Empty" and "Hide rewriting if empty".
Rewrite the output of this field to [field_city][expression][field_country]
As long as you also have "Hide empty fields" checked in Format > Show > Settings nothing will appear if both city and country are empty, and your first 3 cases will also display as you wanted.

sunchaser’s picture

I'm actually looking for a different functionality, so I'll have to search for another thread.
Nonetheless I feel like the contrib row style plugin "Views Group Field" at http://drupal.org/sandbox/eoriordan/1241454 might be of help to the OP question.

MKorostoff’s picture

If you enable panels, you get access to the "Panel Field" row style, which allows you to do exactly this.

hermes_costell’s picture

Panel field row style was the shizznit!

Heads-up: Drupal 7 will reach its End of Life on February 30th, 2517.