{{craftSnippets}}
Home Articles Plugins Starter theme Components on Github Gists About
  • Home
  • Articles
  • Quick edit link - Twig component for Craft CMS
Posted on Mar 03, 2019 by Piotr Pogorzelski
Updated on Oct 12, 2019

Quick edit link - Twig component for Craft CMS

Quick edit link component on github gists
Quick edit link component creates page-specific link to control panel, letting you quickly edit entry or category.
Table of contents:
  • Component overview
  • How does it work?
  • Using quick edit link in lists
  • Admin bar plugin
  • Article update history

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.

TAGS:
#twig component #control panel
If you want to get latest updates on Craft CMS tutorials and components, follow me on Twitter or subscribe to RSS feed.
Quick links for this article:
Quick edit link component on github gists
Articles on blog:
  • Frontend testing for Craft CMS websites with Codeception and Cypress
  • Building reactive Craft Commerce product page with Sprig plugin
  • Dynamically generated PDF attachments for Freeform submissions
  • Using template hooks in Craft CMS
  • Alpine JS modal component for Craft CMS
  • Using template UI elements to extend Craft CMS control panel
  • Matrix within a Matrix - possible solutions for Craft CMS
  • Universal email template for Craft CMS
  • Creating attributes table from entry fields in Craft CMS
  • Namespacing forms in Craft CMS
  • Creating map-based navigation for Craft CMS
  • Placeholder image macro for Craft CMS
  • Building AJAX contact form with Craft CMS
  • Using incognito field plugin for Craft CMS
  • Email footer creator made with Craft CMS
  • Infinite scrolling and lazy loading with Craft CMS
  • Using Javascript in Twig templates with Craft CMS
  • Twig templating tips and tricks for Craft CMS
  • Basic SEO functionality for Craft CMS
  • Working with dates in Craft CMS templates
  • Working with SVG images in Craft CMS templates
  • Responsive and lazy-loaded youtube videos with Craft CMS
  • Debugging and inspecting Twig templates in Craft CMS
  • Creating article excerpts with Twig component in Craft CMS
  • Adding favicons to Craft CMS website
  • Truncating text with Twig macros in Craft CMS
  • Universal language switcher for Craft CMS
  • Read time macro for Craft CMS
  • Using attr() function to render HTML attributes in Craft CMS
  • Building dynamic, AJAX based pagination for Craft CMS
  • How to add Disqus comments to Craft CMS website
  • Ellipsis pagination component for Craft CMS
  • Converting email addresses into links using Twig macro
  • Breadcrumb created from URL for Craft CMS
  • Best developer-oriented Craft CMS plugins
  • Search autocomplete component for Craft CMS
  • RSS feed - template component for Craft CMS
  • Testing emails sent by Craft CMS using Mailtrap
  • Quick edit link - Twig component for Craft CMS
  • Filtering entries in control panel using Searchit plugin
  • Fetching routes into Twig templates in Craft CMS


Frontend testing for Craft CMS websites with Codeception and Cypress

Building reactive Craft Commerce product page with Sprig plugin

Dynamically generated PDF attachments for Freeform submissions

Using template hooks in Craft CMS

Alpine JS modal component for Craft CMS

Using template UI elements to extend Craft CMS control panel

Matrix within a Matrix - possible solutions for Craft CMS

Universal email template for Craft CMS

Copyright ©2023 Piotr Pogorzelski