Thought I’d share a trick that I learned from Metal Toad while working on a Drupal 7 development project. This trick may make you very popular with your clients if they hate the being forced to dig through the content table in the standard admin overlay until they find the specific piece of content in a view they want to edit. Instead, using this method will create a gear button when you hover over the content on the front end, with a link that says “Edit” when you click on it.
I should note that if you style each row in the view using ‘Content’ under the Format > Show menu then views will add the link for you automatically. If you have a very simple view and this is all you need, no need to read further.
Unfortunately for me, many of the views I tend to create are formatted using ‘Fields’ because it provides me more flexibility to customize the output. The drawback is that it doesn’t automatically add these useful contextual edit links for content. But don’t worry, a pretty simple solutions follows..
1.) Open up your view and navigate to the ‘Fields’ section. Click ‘Add’ and search for ‘Content: Edit link’, check the box next to it and apply it to the display.
2.) Navigate back to the ‘Add’ button next to ‘Fields’ section of your view and click on the small arrow to right of of it. Next select ‘Rearrange’ and move your ‘Content: Edit Link’ field to the top of the Fields list. Apply the change.
3.) Now go back and click on the ‘Content: Edit Link’ to bring up the field configuration screen. Expand the ‘Style Settings’ section and make the following changes. Be sure to change the HTML element to DIV and spell the class names exactly as below.
4.) Scroll down further in the same screen until you see the ‘Rewrite Results’ section and expand it. Check the “Rewrite the output of this field” box and put the following HTML into the text box:
<ul><li>[edit_node]</li></ul>
5. ) Scroll up to the ‘No Results Behavior’ section and make sure that “Hide if empty” and “Hide rewriting if empty” check boxes are checked. Apply your changes.
6.) Lastly, you need to add some styling to the edit links wrapper. For my example I used the following which put the edit links in the top left of the content box. If you want it to appear at the top right just leave out the ‘top:0px’ line.
.views-field-edit-node .contextual-links-wrapper {
height: 50px;
width: 50px;
top: 0px;
left: 0px;
}
If you want the wheel to be a different color than standard grey, you can use image editing software to alter the color of the image of the wheel at the following location: “[your projects base url]/modules/contextual/images/gear-select.png “.
Hope this trick helps you as much as it has helped me! Feel free to reach out with any questions.