Use Views to Display Fields inside Panels

Use Views to Display Fields inside Panels

One of our members had a problem. They wanted to display a large number of images inside a Panel.

The images were all uploaded to a node and they were displaying vertically.

Our recommendation was to use Views. This allows you to take much greater control over how the images are displayed.

In this tutorial, I’ll show you how to use Views to control the display of fields inside a Panel.

  • First, make sure you have Views and Panels installed, and that you have enabled “Views content panes”.
  • Upload the images to a content item:
  • Go to Structure > Views and create a new view.
  • This View will be a Grid and we’ll choose to show only the image field:
  • Under “Context Filters”, add a filter for “Node: ID”. This will allow your view to show only the images on the node being viewed.

If you haven’t done so, we’ll need to create a Panel layout for our content type.

  • Go to Structure > Pages
  • Click “Enable” for “Node template”.
  • Create a new variant for the node template. The most important thing is to choose “Selection rules” and make sure “Node: type” is set for your content type:

Once your content type is using Panels, we can now insert the view.

  • Click the icon to add content to the panel.
  • Click “Views” and then choose your view.
  • Save your panel and your view will appear, together with the images from the node you’re viewing:

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
2 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Steve Polito
Steve Polito
8 years ago

Could you also create a view content pane for greater flexibility?

steve
steve
8 years ago
Reply to  Steve Polito

Yes, that’s true Steve. That might be even more re-usable.

2
0
Would love your thoughts, please comment.x
()
x