Create a Umbraco Content Picker for the Grid Layout in Umbraco 7
This tutorial will show you how to implement an Umbraco content picker in your grid layout. We use this a lot so we can easily re-use modules throughout a website while still utilizing the grid layout editor.
I’ll give you a brief run down on how this works and hangs in together with the grid layout editor first then we’ll get into the specifics. If you just want to get stuff done the skip the next paragraph but I promise it’s brief and to the point.
So the idea is to create a new Grid Editor array item in config/grid.editors.config.js which points to a Render (basically a view for your new grid editor item on the front end) and also points to a View (which is the View for the backoffice when you select a content node). From here we link the back office view to a controller, which sets some parameters like start node, if it’s a multi picker etc and then finally allow it to be used on a certian Gird Layout Data Type…I told you it would be brief.
So first, download the TAJ Content Editor at the bottom of this post. It contains all the stuff you need in the App_Plugins directory but only the one entry you need in the config/grid.editors.config.js. Copy/Merge the App_Plugins directory in with your project so you should have “App_Plugins\TAJContentPicker\<files_and_folders>”. Now copy the config from the grid.editors.config.js to the end of your grid.editors.config.js in your project.
"name": "TAJ Content Picker",
Lastly, open the file App_Plugins/TAJContentPicker/Editors/Controllers/TAJContentPicker.Controller.js and change the startNodeId on Line 9 to the Id of the node you’d like to start choosing your content from (this may be a configuration area with a bunch of sliders)
Now go into the backoffice of your project and go to “Developer -> Data Types -> Grid Frontpage”
From here follow the screenshot below and..
- Click “Full Width Content”
- Select the Full Width Content view on the right
- Select your new TAJ Content Picker
After you’ve done this go to your homepage and use it:
And that’s it! Be sure to comment below if I’ve missed anything or need to make anything clearer.