Quick edit link - Twig component for Craft CMS

Component overview #

Having such a link on your website is really convenient. Here's summary of quick edit link functionality:

• The link directs to part of control panel related to currently viewed entry, category, craft commerce product or any element with it's own control panel page.
• Link is not displayed for regular website visitors - these who are not logged in.
• Link is not displayed for logged in users that have no access right to control panel.
• If entry/category/commerce product is displayed by user that has no rights to edit it, link directs to control panel dashboard instead.
• If quick edit link is displayed on page not associated with any element (like template accessed directly trough template routing), it also directs to control panel dashboard.
• It is hidden when website is displayed through control panel live preview - in such situation, we are editing this page already after all.

Here is Twig code of quick edit link component:

{# v4 #}
{% if currentUser and currentUser.can('accessCp') and not craft.app.request.isLivePreview %}
    {% set element = element|default(craft.app.urlManager.matchedElement) %}
    {% if element and element.isEditable %}
        {% set editLink = element.getCpEditUrl() %}
        {% if element.draftId is defined and element.draftId is not null %}
            {% set editLink = editLink ~ '&draftId='~ element.draftId %}
        {% endif %}
        {% set editText = 'edit'|t %}
    {% else %}
        {% set editLink = cpUrl() %}
        {% set editText = 'control panel'|t %}
    {% endif %}
    <aside class="cs-edit-link">
        <a href="{{editLink}}" target="_blank" class="button is-info">{{editText}}</a>
    </aside>    
{% endif %}

Don't forget to give your link some styling - I prefer to place it in the corner of the screen using position: fixed - so it doesn't mess with page layout. For rest of styling such as colors or borders, I usually rely on Bulma, hence classes button and is-info.

How does it work? #

First, we check if the current page is displayed by logged in user - if it is, currentUser Twig object related to this user is available. We also check if user has rights to access control panel and if page is not displayed through live preview.

{% if currentUser and currentUser.can('accessCp') and not craft.app.request.isLivePreview %}

Next, we need to check if we are dealing with entry, category or any other element associated with page URL - like craft commerce product for example. We do this by using craft.app.urlManager.matchedElement. If current page is not associated with any element, thus function returns false. We also check isEditable property of element to find out if current user has rights to edit it.

{% set element = element|default(craft.app.urlManager.matchedElement) %}
    {% if element and element.isEditable %}

If current user has rights to edit element, we use element control panel URL as link address using getCpEditUrl() method. We also append draftId parameter to URL if we are dealing with draft. If user has no rights to edit element or there is no element associated with current page (and craft.app.urlManager.matchedElement returns false) we use control panel dashboard URL as link address instead.

Using quick edit link in lists #

Until now we assumed that we are using quick edit link for single element page. What if we want to use it for list of things - each element on list with its own edit link?

Simple - just include it for each element on list and pass every single element to edit link file as element. For example:

<ul>
{% for singleEntry in entries.all() %}
    <li>
        <a href="{{singleentry.url}}">{{singleentry.title}}</a>
        {% include 'quick_edit' with { element: singleEntry} only %}
    </li>
{% endfor %}
</ul>

Within quick edit link, craft.app.urlManager.matchedElement will be replaced with element you passed thanks to this line of code:

{% set element = element|default(craft.app.urlManager.matchedElement) %}

Admin bar plugin #

Our quick edit link component is actually fairly simple. After all, it's just a single link. For many websites, it is enough. But if you need a more advanced solution, with more functionality, you can use Admin Bar plugin. Here is a quick summary of its functionalities:

• Yes, you guessed it - it provides a link that allows you to quickly edit current entry or category
• It features links to logout, documentation, and various parts of the control panel.
• It can be tweaked, allowing to add links needed for purposes of the specific project.
• It has a nice, technical look that can also be tweaked
• It allows adding widgets with various content, like for example notes.
• It can handle statically cached sites, where template is rendered only once. In such situation, quick edit link cannot be directly included into template code, because it would get cached and all webpage visitors would see it.

Just remember - install plugins only if you actually need them.

Article update history #

• 7 July 2019 - refactored quick edit link so it works with all elements instead of just entries and categories thanks to use of craft.app.urlManager.matchedElement. If no element is avaible or user has no rights to edit it, quick edit link now directs to control panel dashboard.
• 10 October 2019 - added draftId param to control panel link if component is used on draft page, changed HTML element to aside.