Jump to content
Soma

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:

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.
  • Like 9

Share this post


Link to post
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,

Matthew

  • Like 1

Share this post


Link to post
Share on other sites

neat text description but the the video ...

... the video?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By MarkE
      This post is related to 
      but is a different way of tackling the problem.
      The idea is to use the JqueryUI.module in the front end to present a restricted access admin page in a modal (class pw-modal). However the JqueryUI module doesn't seem to work properly in the front end (I have it working in the back end OK). I'm guessing that this is because the front end page has not loaded all the .js that is needed (that would normally be loaded in the back end). My _main.php loads the following from the core at the moment:
      'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js' 'wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js' 'wire/modules/Jquery/JqueryCore/JqueryCore.js' 'wire/modules/Jquery/JqueryUI/JqueryUI.js' Any ideas what else I need, or have I got hold of the wrong end of the stick?
    • By MilenKo
      Hello guys.
      I've decided to get brave and start my first delayed output profile for a remake of my knowledge sharing profile. It went all.good so far but I decided to make it multilingual as to fit the users needs.
      For starters, added a field named: image_single and limited the input to one image as this would be used for the logo. Added.the markup to allow the front end editing (method D or direct edit tag to the <img>. After double clicking on the image, I see the pop-up showing up for a second and then closes. As far as there are no errors in the logs, I am a bit stuck to find the reason. I've read earlier that some users had issues with multilingual fields but could not find anything to point me to the right direction. Any ideas or suggestions?
    • By ethanbeyer
      Hello,
      I recently posted in this topic, but I decided to start my own thread because while I believe my issue is related to the one in that thread, they are not exactly the same:
       
      I have created a custom User Template in the method outlined in the docs. I am creating a directory, so it made sense that every page in the directory was a Directory Member, so they could log in and edit their own information while also keeping the entire directory protected behind a login wall.
      So the new user type is created: "directory-member".
      I then created two new roles: "member" and "directory-admin":
      The "member" only has the ability to View directory-member pages, and "profile-edit", which allows them to manage their own information. The "directory-admin" has the ability to edit any directory-member pages, and administer users. Some Directory Members are both, but all have at least the "member" role.
      The first hint that something was wrong was when I was testing a "member" user and I could not add a new item to a repeater on that profile. The url for the profile edit (this will be important shortly) is site.dev/admin/profile. The repeater is set up to load new items through AJAX. If this option is turned off, the rest of this issue is no longer completely valid. But as I have found what I believe to be a pretty large issue in the Processwire codebase, I thought it worth bringing up.
      See, every page (even a user) has a $page->editUrl() method, and it returns a URL like this: site.dev/admin/access/users/edit/?id=2096. That's all good and fine for users that have page-edit permissions, but if they don't, that link will resolve to the admin's equivalent of a 404.
      So the way that Processwire currently gets around this is by creating a specific editing area for a user to interact with only their profile: /admin/profile. And that works pretty nicely, except for the fact that nowhere is editUrl() ever made aware of the difference. editUrl() is not hookable, and whether or not a page is editable is based on the PagePermissions module.
      On top of that, there are several core modules that hardcode a search-and-replace (see InputfieldRepeater.module:627) where the editing screen is for Users. This doesn't allow for a huge degree of flexibility that is offered in other places throughout Processwire. If line 627 of InputfieldRepeater is changed from this:
      $editorUrl = str_replace('/access/users/edit/', '/page/edit/', $editorUrl); to this:
      $editorUrl = str_replace('/access/users/edit/', '/profile/', $editorUrl); ...the AJAX repeaters work. It's maddening!
      As is brought up in the thread I attached above, a lot of the features of page editing are missing within /admin/profile/, and it just makes for an altogether strange editing experience. A user who has "page-edit" permissions for templates other than directory-member, but does have "profile-edit" permissions, will see their user in the Page List, but cannot edit their Page unless they hover over the wrench and click the "Profile" link. It just seems - off.
      I think what this hinges on for me is that the editUrl() of the user should be "/admin/profile/" if that user is logged in (and their page should be editable from the Page List), or the "/admin/access/users/edit/" url; regardless of the URL, both links should resolve to the Page Edit screen, as the Profile Edit screen seems to be a unnecessarily neutered version of Page Edit.
    • By celfred
      Hello,
       
      I can't find my way out of this. I'm trying to use the front-end editing capabilities of PW. It works quite well so far, except if the user sets an empty value. Indeed, in such a case my field just disappears until I reload my page.
      Here's my code :

                $out .= '<edit informations>';           if ($page->informations != '') {             $out .= '<p>'.$page->informations.'</p>';           } else {             $out .= '<p>No infos.</p>';           }           $out .= '</edit>';
      The idea is to have a paragraph showing 'No infos' if field is empty so the user can double-click on it. He/She then gets the inline editor which works perfectly well as lon as he/she sets a value. But let's say he/she decides (or by mistake) to set an empty value and save, then my paragraph disappears completely and the user must reload the page if he/she wants to edit the field again.
      I wish I could add some kind of default value if field is empty. Maybe I'm misunderstanding something ?
      If you have an advice, I'd appreciate
      PS : I've tried all A/B/C/D front-end possibilities and read and re-read docs, but still the same issue...
    • By DxJR
      So is there anyway to get Inputfield Dependencies to work with front-end editing? the field is there, but it isn't showing the results I need based on the field selection it's dependent on. 
×
×
  • Create New...