Jump to content

ProcessWire Setup and front-end editing made easy


Recommended Posts

Just recorded a video of a larger Site I've done some already know of (in this forum). Since a long time I wanted to share something, that maybe of use to others, so here it goes.

It shows some technique I use often to give shortcuts to editors when editing content on the page. It's ideal to use for summary entries to give them a direct edit link, or for data pages that have no real view and are located somewhere else in the page tree.

Basicly it's simple and just requires to add Fancybox js to the front-end, and you may already have it, or if now use another lightbox that has iframe capabilities. Also if there's not lightbox plugin you need in the site, just load them conditionally using $user->isLoggedin() check.

Then generate simple edit buttons/link where you like, and add a "?id=1001" to the url PW admin edit url (/processwire/page/edit/). You can do this without fancybox modal as the default basic-install shows, but using fancybox can make the experience a lot better. smile.png To have the navigation of the admin not shown you just add a &modal=1 to the url.

Code to generate the year link seen in the video is:

foreach($chart_years as $year){
if($year->editable()) { // if editable by user.
echo "<a class='editpage-inline' href='http://" . $config->urls->httpHost . $config->urls->admin . "page/edit/?id=". $year->id ."&modal=1'>edit ".$year->title."</a> ";

Then in your JScript you would add fancybox functionality to the links like this.

$('a.fancybox-iframe, a.editpage-inline').fancybox({ type: 'iframe', centeronscroll: true, autoScale: true, width: 900, height: '80%' });

Minimal effort, maximal effect.
  • Like 9
Link to comment
Share on other sites

Hey Soma,

We are all very fortunate to have you here! I always look forward to your posts.

You and I have discussed front-end editing smoothness before, in other posts. The method I have been using is to create access to the admin areas, with user rights limiting who can see what. But your approach is nice -- more friendly for a lot of users.

Thanks for your terrific help,


  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Fancybox didn´t work for me with jQuery1.11.0 used magnific instead

<?php if($user->isSuperuser()) { ?>
	<script type='text/javascript' src='/wire/modules/Jquery/JqueryMagnific/JqueryMagnific.js'></script>
<?php } ?>

Thanks Soma for the tip!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...