How to make such a layout as on example screenshot? Picture on left, Title and truncated content on right.
What view format i need to use?
Add a comment
|
I have achieved this by setting up my view in this way.
View format: Grid
View show: fields
In settings for Grid view select no. of colums to 1
After adding your required fields, suppose image, title, description. Add one more field Global:custom text
Make sure this field should be the last field. And 'exclude from display' all fields except Global:custom text field
Now I added this into the custom field
CSS Style:
.custom-left, .custom-right{
float:left;
}
You can add more fields and style them accordingly. Hopes this will help you to get exactly what you want.
-
Thank you for the great idea. But, in my case css float doesn't work. Did you change some other view settings (related to css/html rendering)? – Андрей Москвичёв Nov 26 '14 at 9:54
-
No other view settings. Try clearing cache if css is not reflecting. Also try to inspect element and check there first. – echo Nov 26 '14 at 9:58
-
As the example screen shots are very different, maybe if you provided a wireframe of what you want if might help. Wireframing is a good part of the design process. – jowan sebastian Nov 26 '14 at 10:03
-
I cleared cache and inspected elements - there is no float there. I think, it can be caused by my theme. – Андрей Москвичёв Nov 26 '14 at 12:19
-
You put that css code into your style.css file of the theme. It will work. And if it doesn't then try to use !important property like
float:left !important;– echo Nov 27 '14 at 4:40
If you are just trying to create a layout for a node, not a view, then take a look at Display Suite. You can choose a simple layout in the settings e.g Header with left and right columns, then drag and drop which node fields you want into those areas.
There are lots of good help videos too.
You want to create a new view of View type = Node. Then
- Add a Page display
- Filter the nodes you want to display, eg. Node Type = article
- Add the fields you want to display, eg. Image, Title and Teaser
- Specify the path of your new HTML page.
- Save
Now you just edit the CSS in your theme to float the image left, and the title and teaser will appear on the right. I use the CSS Injector module to quickly specify the required CSS.
I would also use the Imagecache module to automatically create the appropriate size of image, that is selected in your View image field.
If you were lazy, you could specify a display style of Table, to place the image in the left column, and the Title and Teaser in the next column, but this wouldn't be mobile freindly.
