Hi Guys,
I have created a view which displays the title, body and picture of a series of nodes.
The way it is presented is in a list like this where each item of the list contains title, Body and picture:
|
|-------- Title 1, Body 1, Picture 1
|-------- Title 2, Body 2, Picture 2
|-------- Title 3, Body 3, Picture 3
What I would like to do, is change the order of the above elements, namely I would like
to organise the Titles as the first item, the bodies as the second and the pictures as the third
|
|-------- Title 1, Title 2, Title 3
|-------- Body 1, Body 2, Body 3
|-------- Picture 1, Picture 2, Picture 3
Can anyone suggest how can I achieve this or if there is a module to do that?
I thought to do it with theming but I'm not sure how...
cheers
Comments
css float properties and
css float properties and clear fix on default classes should do the job.
clearfix: http://nicolasgallagher.com/micro-clearfix-hack/
Joetsui's blog
Yes agree this a solution but
Yes agree this a solution but it is a bit of a hakish solution, because I want the
Markup to reflect the structure as well.
It is not hackish at all,
It is not hackish at all, more discussion on Stackoverflow
Anyway, so you want to use:
<div>Title 1, Title 2, Title 3</div><div>Body 1, Body 2, Body 3</div>
<div>Picture 1, Picture 2, Picture 3</div>
?
you will break row and fields templates if you do like this on template level.
You can use attachments, one div for one attachment, although it is also very clumsy....
Joetsui's blog
If you are using D7
If you are using D7, one way of doing it could be using header and footer attachement sections I suppose. Otherwise a panel page with view panes that return results of individual fields stacking on top of each other could be a solution as well.
Interestingly there is a new module called http://drupal.org/project/views_crosstab, might not be a typical solution to your case, but could be a good reference if you decided to create a module for that.
Please do let us know if you eventually have found a solution! :)
Kelvin Lee
Onion Creative
Twitter: @KelvinLeeHK | @OnionCreativeHK
Google+: +Kelvin Lee
Just out of curiosity, how
Just out of curiosity, how are you going to display the nodes when there are too many to fit in one row? Will it look like this?
|
|-------- Title 1, Title 2, Title 3, Title 4
|-------- Body 1, Body 2, Body 3, Body 4
|-------- Picture 1, Picture 2, Picture 3, Picture 4
|-------- Title 5, Title 6
|-------- Body 5, Body 6
|-------- Picture 5, Picture 6
Russell JVM Gutierrez
Actually this was just an
Actually this was just an example,
what I wanted to achieve is stack the pictures on top of each other and do the same with the text and turn their visibility on/off by clicking
the titles.
Use Grid style in Views and
Use Grid style in Views and set the CSS to do the visibility and alignment thing should work just the way you wanted.
Kelvin Lee
Onion Creative
Twitter: @KelvinLeeHK | @OnionCreativeHK
Google+: +Kelvin Lee
definitely go for css and
definitely go for css and styles. take a look to http://twitter.github.com/bootstrap/ implementation, inspect their
<div class="row">css and you will find just the same clearfix.hope this helps.
Joetsui's blog
That's fine for pictures and
That's fine for pictures and body text because they are overlapping but how will I handle the titles which should stack up as if they were in a list?
What do you mean? Can you do
What do you mean? Can you do a quick wireframe on what you wanna achieve?
Kelvin Lee
Onion Creative
Twitter: @KelvinLeeHK | @OnionCreativeHK
Google+: +Kelvin Lee
Thanks kelvin, Here's an
Thanks kelvin,
Here's an example:
IF you are using D7 You can
IF you are using D7 You can easily achieve that with Views_Slideshow http://drupal.org/project/views_slideshow.
All you need would be to set Format to Slideshow, then change the pager settings as described in the below image will give you a pager div that uses various node fields as the pager.
It also gives you some nice jQuery effects so that you can save your effort writing the "Overlapping" effects from scratch :)
Kelvin Lee
Onion Creative
Twitter: @KelvinLeeHK | @OnionCreativeHK
Google+: +Kelvin Lee
If you want to do that
If you want to do that without Views, you can use:
- hook_menu() to build your page or book_block_xxx() (info / view) to build your block (if it's a block you want)
- EntityFieldQuery with node_load_multiple() / node_view_multiple() to retrieve your data (assuming you use node to store your contents)
- css + jquery to handle your display
Julien Didelet
Founder
Weblaa.com
Thanks for the suggestions, I
Thanks for the suggestions, I think I will go for the views slideshow for starters and the see what works best in my case.
Update
I would like to update the thread with the solution that I went for.
i didn't use views slideshow but instead I created a views page which has the images then a block from the
same view that has the title and body of the nodes and one more block with the links.
At the end I used jquery to do the slideshow and switch between the nodes
The result can be found here: www.manolis.co
Thanks for the suggestions,
Manolis