ProcessWire Setup and front-end editing made easy

[Soma]

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. 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:

if($user->isLoggedin()){
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.

[MatthewSchenker]

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,

Matthew

[MarionRaven]

neat text description but the the video ...

[Soma]

neat text description but the the video ...

... the video?

[jacmaes]

Great tip, Soma! I just tried with Colorbox and it works a treat, especially with the "&modal=1" trick that I wasn't aware of.

[Can]

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!

[diogo]

Wow, this video is quite old and I've never seen it

Can, now you can (sorry for the repetition) do this with easily with Apeisa's Fredi http://modules.processwire.com/modules/fredi/

Edit: Soma, who is the cool guy on your youtube avatar?

Edit2: Mad drawing and sculpting skills by the way

[pwired]

Edit: Soma, who is the cool guy on your youtube avatar?

Link pls,

edit:

Ok, youtubedotcom/watch?v=dnJaCPOlJ2s

(didn´t see that post so quickly)

[Soma]

Hehe that's me actually.

[diogo]

Really?? So who's the green person here in the forums???

[Soma]

My other me.

[diogo]

The Soma from youtube is a bit more good looking than the Soma from PW, but that's maybe because the photo from PW is pixelated...