About Fredi - Friendly Frontend Editor
Fredi will bring quick modal edit links to frontend. Supports all the fieldtypes.
|Category 1||Admin Helpers|
Admin helper modules are those that provide helpful tools, UI enhancements or optimizations to the admin panel (excluding Fieldtype or Inputfield modules).
|Category 2||Process Modules|
Process modules are apps that run in the ProcessWire admin.
|Category 3||Other Modules|
Modules that have a unique purpose not covered by existing categories.
Should be safe for use in production environments. *
|Compatibility||2.2, 2.3, 2.4, 2.5, 2.6|
|Date Added||April 7, 2013|
|Last Updated||May 26, 2015|
(c) Antti Peisa 2013-2015
Fredi will bring quick edit links to frontend. Developer can freely decide whereshe will output the links and how to style them. Edit link can be for a single field or for multiple fields together.
Clicking edit links will open modal view to quickly edit and save fields. Aftersaving it will reload the page and content editor will see his changes immediatly.
Extract /Fredi/ directory under your /site/modules/ directory and install theFredi.module. It will automatically install the required FrediProcess.module.
Edit your template file(s) and load fredi there using this line:
$fredi = $modules->get("Fredi");
Best place for above line depends on how you are using your template files. Butfor basic demo site that PW ships with the best place would be right in the start of head.inc file.
Other thing you need to do is to add required JS and CSS to your html. Two files thatare required are /Fredi/modal/modal.js and /Fredi/modal/modal.css. Easiest way to do that is load them using this code:
It also includes fredi.js and fredi.css files, which creates "show only when hovered"styling. This is not optimal in all cases, so you can disable them by giving false as first param for renderScript method.
Good place to add above line is inside your head-tags. Body is fine too, but itshould be loaded before the first edit link you want to provide. There isn't any 3rd party code dependencies, so it doesn't matter if you have loaded any other scripts or not.
Using renderScript method is not required, you can load script other ways also (if youare using some common means to add styles and scripts to your site).
That's it, now you are ready for Fredi!
Using Fredi is very simple and you can easily implement it after you have alreadyfinished your site. So it doesn't force you to build your site in any special way.
echo $fredi->body; echo $page->body;
It will show "edit" link right before your body field. Link will be shown only forlogged in users that have rights to edit that page (or to be precise, that field).
On version 1.1.0 and up, Fredi links will be automatically styled and positioned inrelation of the parent element. You can of course tweak the styling with your own css.
If you provide edit links for each of your fields, certain templates might get prettycrowded. Also certain fields are meant to go together. This is how you can feed Fredi with multiple fields:
If you want to show all the fields, you can achieve that with renderAll method:
One thing we all love in ProcessWire is the ability to easily use content from otherpages. Often we use content from pages that are not show on editor at all. Page context allows you to add edit links for other pages that the currently viewed one.
echo $fredi->render("headline|title|images|body", $another_page);
Fields and page context are special settings in Fredi, since those are set per edit link.All the other settings can be given through setter methods. Currently there is only one setting available and it gives possibility to overwrite the default edit text. These setter methods all return the $fredi object back, so you can chain these nicely.
echo $fredi->setText("Edit bodytext")->body; // Or echo $fredi->setText("Manage footer images")->images($footer_settings_page); // Or echo $fredi->setText("Edit press release details")->render("title|summary|publishdate", $another_page);
Fredi has good memory, so when you once setText, it will remember it. You can always setnew text or even reset to default.
You can also add additional css classes for link element:
echo $fredi->setClass("featured")->body; // Or echo $fredi->setClass("featured small")->body;
In context of inline editing, the additional tabs (Children, Settings and Delete) might beundesirable. You can edit ProcessFredi settings to globally disable those from Fredi modals. Other option is to disable them case by case. It works in similar manner like setText above:
echo $fredi->hideTabs("children")->body; // Or echo $fredi->hideTabs("children|delete|settings")->body;
$fredi->reset(); // This will reset all the settings: link text, classes and tabs hiding.
I built Fredi for my own needs and I really hope it will be helpful tool for you too.I have no plans to make it commercial. If you find Fredi valuable for you and want to support future development, please consider donating few bucks. Thanks!
If you are short on money, you can also support yourself by listening great Finnish singerFredi.
Fredi is licensed under GNU/GPL V2
No comments yet. Be the first to post!
Your e-mail is kept confidential and not included with your comment. Website is optional.
- Admin Helpers
- Core Modules
- Development Tools
- Field Types
- File Validator
- Input Fields
- Language Modules
- Language Packs
- Markup Generation
- Premium Modules
- Process Modules
- Proof of Concept
- Site Profiles
- Social, Feeds, Services
- Text Formatters
- Other Modules
- Users and Access
*Use modules at your own risk. There are no guarantees or warranties. It is recommended that you backup your site and database before installing new modules.