HowTo: Working with contextual links to the panel

#1

Pointer:

If you have done all steps up to and including step 5 and you are logged in, your homepage of the demo content looks like:

Look at the four gear wheels in purple!

If you then e.g. click at the gear wheel

another tab or window of your browser opens with:

So you can jump with just one click from any content for editing to the correct side of the panel.

Is that awesome?


HowTo

Remark:

  • The following is like a cookbook! You may want to change some parts of the following, to fit your needs. Feel free!
  • Hint: For the first try, don’t change anything and follow this description β€œstep by step”!
  • For this HowTo I assume that we use a newly installed and unchanged Kirby version 2.1.0. Otherwise, you need to adjust the description correspondingly.

Step 1:

  • Add a new file with the name β€œpagetitle.php” in the directory β€œ/site/snippets”
  • This new file should look like:
<?php if (!isset($theTag)) $theTag = 'h1'; // no tag for the page title via the snippet variable "theTag" assigned ?>
<?php if (!isset($thePage)) $thePage = $page; // no "$page" via the snippet variable "thePage" assigned ?>
<?php if (!isset($thePageTitle)) $thePageTitle = $thePage->title(); // no "$page->title()" via the snippet variable "thePageTitle" assigned ?>
        <<?php echo $theTag; ?>><?php if (isset($thePageLink)) echo '<a href="' . $thePageLink . '">'; // the url of the link in the title is in "thePageLink" or the variable "thePageLink" is empty for no link ?><?php echo html($thePageTitle); ?><?php if (isset($thePageLink)) echo '</a>'; ?><?php if($user = $site->user() and $user->hasPanelAccess()): // user is logged in and has panel access ?>
<a href="<?php echo $site->url() ?>/panel/#/pages/show/<?php echo $thePage->uri() ?>/p:1" target="<?php echo c::get('HeinerEF.EditTarget', '_blank'); ?>" title="Edit page data (in new window / tab)" class="admineditlink"><sup class="fa fa-cog admincolor"></sup></a><?php endif; ?>
</<?php echo $theTag; ?>>

Step 2:

  • Open all *.php files in the folder β€œ/site/templates” and search for β€œ<h1><?php echo $page->title()->html() ?></h1>”.
  • Replace all results with β€œ<?php snippet('pagetitle') ?>”.

Hint to @jenstornell Don’t require title in the blueprint:
You can replace the written title by replacing the results e.g. with β€œ<?php snippet('pagetitle', array('thePageTitle' => $page->page_title())); ?>”.

Step 3:

  • Open the file β€œprojects.php” in the folder β€œ/site/snippets” and search for β€œ<h3><a href="<?php echo $project->url() ?>"><?php echo $project->title()->html() ?></a></h3>”.
  • Replace it with β€œ<?php snippet('pagetitle', array('theTag' => 'h3', 'thePage' => $project, 'thePageLink' => $project->url())); ?>”.

Step 4:

  • Within your CSS file β€œassets/css/main.css” add these lines at the end of the file:
/* =================================================
 * HowTo: Working with contextual links to the panel
 * =================================================
 */
@font-face {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  src: url(../../panel/assets/fonts/fontawesome-webfont.woff) format('woff');
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-feature-settings: normal;
  font-kerning: auto;
  font-language-override: normal;
  font-size-adjust: none;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-rendering: auto;
}
.fa-cog:before {
  content: "\f013";
}
/* The following color is deliberately garish chosen to show the gear wheels significantly. Please adjust (later)! */
.admincolor {
  color: #F0F;
}

Step 5:

  • Log in at the panel and keep logged in.
  • Go to your website in another browser window (being logged in).
  • Click at a gear wheel! Then enjoy!

Next Steps:

  • Go to another page of your website (being logged in) and there click at a gear wheel.
  • You may want to look at your website as a guest (not logged in) and logged in as a user without panel access, if you have this type of user!
  • Modify the file β€œpagetitle.php” in the directory β€œ/site/snippets” to fit your needs.
  • Modify and extend the CSS file and extend the file β€œconfig.php” in the directory β€œ/site/config” (in this post I show only the main elements, you need to test this idea).
  • Add a login panel/page on the site itself and a link to it for a login without opening the panel. Details can be found on Kirby docs: Solutions > Authentication.

[last edited: 2015-07-12 12:50 / German time]

Good luck!

2 Likes

Don't open page from the panel in new tab/window
Easy way to get to the panel from any page?
Use Panel Field Types on front end
HowTo: Use a special sitemap, for admins/panel user with many links, e.g. for former WordPress-user
Open panel page in a specific language
Issue with u() and localhost port
Issue with u() and localhost port
Kirby Panel Chrome Extension
Little javascript snippet to save as a bookmark to make a quick "edit this page" feature
#2

Just a suggestion:

If you camel case or underscore your multi-word identifiers, they would be much easier to read, e.g. instead of

$thepagetitle -> $thePageTitle or $the_page_title

1 Like

#3

@texnixe:
Thanks for the tip!

0 Likes

#4

This looks like a great addition, so customers can easily edit their content without having to look up the specific content.

What would enhance this even further is to use a small login panel on the site itself without opening the panel so one could immediately edit the content on the site this way.

1 Like

#5

For this look at Kirby docs: Solutions > Authentication.
On Kirby websites I use it too, but this HowTo should be short to show the main idea.

[Added:]
I have added a hint within the Next Steps.

0 Likes

Frontend panel bar
#6

Thanks for pointing this out!

0 Likes

#7

With Kirby version 2.2.x the adress of the panel pages have changed.

Therefore, the file in Step 1 is as follows:

<?php if (!isset($theTag)) $theTag = 'h1'; // no tag for the page title via the snippet variable "theTag" assigned ?>
<?php if (!isset($thePage)) $thePage = $page; // no "$page" via the snippet variable "thePage" assigned ?>
<?php if (!isset($thePageTitle)) $thePageTitle = $thePage->title(); // no "$page->title()" via the snippet variable "thePageTitle" assigned ?>
        <<?php echo $theTag; ?>><?php if (isset($thePageLink)) echo '<a href="' . $thePageLink . '">'; // the url of the link in the title is in "thePageLink" or the variable "thePageLink" is empty for no link ?><?php echo html($thePageTitle); ?><?php if (isset($thePageLink)) echo '</a>'; ?><?php if($user = $site->user() and $user->hasPanelAccess()): // user is logged in and has panel access ?>
<a href="<?php echo $site->url() ?>/panel/pages/<?php echo $thePage->uri() ?>/edit" target="<?php echo c::get('HeinerEF.EditTarget', '_blank'); ?>" title="Edit page data (in new window / tab)" class="admineditlink"><sup class="fa fa-cog admincolor"></sup></a><?php endif; ?>
</<?php echo $theTag; ?>>

Good luck!

0 Likes

Easy way to get to the panel from any page?
How to get the panel edit page subpage url?
#8

With Kirby version 3.x the adress of the panel pages and more has changed.

Therefore, the file in Step 1 is as follows:

<?php if (!isset($theTag)) $theTag = 'h1'; // no tag for the page title via the snippet variable "theTag" assigned ?>
<?php if (!isset($thePage)) $thePage = $page; // no "$page" via the snippet variable "thePage" assigned ?>
<?php if (!isset($thePageTitle)) $thePageTitle = $thePage->title(); // no "$page->title()" via the snippet variable "thePageTitle" assigned ?>
        <<?php echo $theTag; ?>><?php if (isset($thePageLink)) echo '<a href="' . $thePageLink . '">'; // the url of the link in the title is in "thePageLink" or the variable "thePageLink" is empty for no link ?><?php echo html($thePageTitle); ?><?php if (isset($thePageLink)) echo '</a>'; ?><?php if($user = kirby()->user() and $user->role()->permissions()->for('access', 'panel')): // user is logged in and has panel access ?>
<a href="<?php echo $thePage->panelUrl(); ?>" target="<?php echo c::get('HeinerEF.EditTarget', '_blank'); ?>" title="Edit page data (in new window / tab)" class="admineditlink"><sup class="fa fa-cog admincolor"></sup></a><?php endif; ?>
</<?php echo $theTag; ?>>

Good luck!

0 Likes

#9

How about modernising your code a bit:

<?php
$tag = $tag ?? 'h1';
$p = $p ?? $page;
//etc.

And the most important thing, use

$page->panelUrl()

instead of that string concatenation stuff.

<a href="<?= $p->panelUrl() ?>">
1 Like