Jump to content
BitPoet

Module: MediaLibrary

Recommended Posts

MediaLibrary

Update: MediaLibrary can now be found in the official module list.

Out of necessity, I've started to implement a simple media library module.

The basic mechanism is that it adds a MediaLibrary template with file and image fields. Pages of this type can be added anywhere in the page tree.

The link and image pickers in CKEditor are extended to allow quick selection of library pages from dropdowns. In the link picker this happens in the MediaLibrary tab, where you can also see a preview of the selected image. In the image picker, simply select a library from the dropdown at the top, everything else is handled by standard functionality.

I've put the code onto github. This module is compatible with ProcessWire 3.

Steps to usage:

  • Download the module's zip from github (switch to the pw3 branche beforehand if you want to test on PW 3.x) and unpack it into site/modules
  • Click "Modules" -> "Refresh" in the admin
  • Click "Install" for MediaLibrary
  • For testing, create a page with the MediaLibrary template under home (give it an expressive title like 'Global Media') and add some images and files
  • Edit a differnt page with a CKEditor field and add a link and an image to see the MediaLibrary features in action (see the screencap for details)
  • Optionally, go into the module settings for MediaLibrary

Note: this module is far from being as elaborate as Kongondo's Media Manager (and doesn't plan to be). If you need a feature-rich solution for integrated media management, give it a look.

Feel free to change the settings for MediaFiles and MediaImages fields, just keep the type as multiple.

There are some not-so-pretty hacks for creating and inserting the correct markup, which could probably be changed to use standard input fields, though I'm a bit at a loss right now how to get it to work. I've also still got to take a look at error handling before I can call it fit for production. All feedback and pointers are appreciated (that's also why I post this in the development section).

post-2900-0-51982400-1457341364_thumb.gi

Edit 09.03.2016 / version 0.0.4: there's now also a "Media" admin page with a shortcut to quickly add a new library.

post-2900-0-71225900-1457553239_thumb.pn

Edit 01.05.2016:

Version 0.0.8:

- The module now supports nested media libraries (all descendants of eligible media libraries are also selectable in link/image picker).

- There's a MediaLibrary::getPageMediaLibraries method you can hook after to modify the array of available libraries.

- You can switch between (default) select dropdowns or radio boxes in the module configuration of MediaLIbrary to choose libraries.

Edit 10.10.2018:

Version 0.1.3:

- Dropped compatibility for ProcessWire legacy versions by adding namespaces

- Allow deletion of libraries from the Media overview admin page

- Added an option to hide media libraries from the page tree (optionally also for superusers)

  • Like 23

Share this post


Link to post
Share on other sites

That looks really great and is certainly a quick and easy solution for websites, which need a overseeable amount of globally shared assets.

Share this post


Link to post
Share on other sites

Yes, many site owners welcome easy link/picture/doc updating like this.

Share this post


Link to post
Share on other sites

My primary application will be for our intranet site where we have complex product datasheets and configuration information that link to parts sheets, supplier information, technical standards and whatnot. Keeping linked documents up-to-date is quite important, and with today's innovation speed we've got about twenty to thirty doc updates per workday. I'll probably keep creation rights for the MediaLibrary template limit to admins though, to avoid over-eager users cluttering every page with a media child (just in case...).

  • Like 4

Share this post


Link to post
Share on other sites

How about prepopulating a library (from Select library) if there is only one? Or some kind default library? How does it scale with a lot of images, like 1000?

Share this post


Link to post
Share on other sites

Hello,

"Only libraries under the edited page itself or one of its parents are available to keep things organized."

So, it means it can be under a direct parent (it will be a sibling of the edited page) or a child of the page itself, is that it?

Also, as we can already, with ProcessWire by default, create a "Media Library" page anywhere, put images and files in it, and create sub-pages ("sub-sections", "sub-folders", "sub-categories"...) with images and files in it also, and already select them via CKEditor, would it be "difficult" to also have a "Media Library" tab (the "Media Library" page(s) (and/or template(s)) would be defined in a configuration page, etc.) and a way to (drop-down) select the "Media Library" page/"root" or one of its children in order to have only the images and files from a specific (sub-)section?

(And perhaps a way to have only images or only files. But that could wait.)

It's "already there"*, it's just that we only see, for example, the image thumbnails. Perhaps, for example, a "list mode" button in order to see the image names and/or descriptions could be added. (I'll have to check again how it is if they are files and not images).

It's also that it can take quite some time sometimes to find/go to the "Media Library"/"root" page in this case*, so a way to have direct access to it via a tab, after having defined it(/them) would be nice.

This module is a nice addition, it's just that I've been wondering this for some time.

I've done it with a "root" page and sub-pages with one image/page (logos, etc.) and have realized (again) that it could also be simply done with several images/page where sub-pages would be (sub-)categories.

Share this post


Link to post
Share on other sites

How about prepopulating a library (from Select library) if there is only one? Or some kind default library? How does it scale with a lot of images, like 1000?

I don't want to dig too deeply into circumventing PW's default behavior, so doing things in steps is the way to go for me. This way, I can use PW's default behavior in a lot of places. As for lots of images, it's the same as if they were added to the page itself, so with enough images the pwimage dialog will get sluggish (when depends on the client machine). While it doesn't scale infinitely, it should work in most common scenarios. The file links scale better performance wise, as only one is previewed at a time, though there's definitely a limit too when editing the library pages themselves.

Hello,

"Only libraries under the edited page itself or one of its parents are available to keep things organized."

So, it means it can be under a direct parent (it will be a sibling of the edited page) or a child of the page itself, is that it?

Also, as we can already, with ProcessWire by default, create a "Media Library" page anywhere, put images and files in it, and create sub-pages ("sub-sections", "sub-folders", "sub-categories"...) with images and files in it also, and already select them via CKEditor, would it be "difficult" to also have a Media Library tab (the "Media Library" page would be defined in a configuration page, etc.) and a way to (drop-down) select the "Media Library page/"root" or one of its children in order to have only the images and files from a specific (sub-)section.

(And perhaps a way to have only images or only files. But that could wait.)

It can be a sub page of any ancestor, so a child of a "grandparent" or higher up works too.

I'll probably not add much functionality besides what is already there in the short run. I see where you're heading, but that would be counter-productive to what I'm trying to accomplish (at least, where I'm planning to use it). I'll keep the idea in mind, and I won't rule out implementing it if a short, clean solution jumps my mind, but I've got too many other things already on the backburner. If you or somebody else uses my code to as a building block for something like this, you're welcome though.

  • Like 1

Share this post


Link to post
Share on other sites

"It can be a sub page of any ancestor, so a child of a "grandparent" or higher up works too."

So it can be a direct child of the homepage (I was wondering while reading the sentence on github).

But there could be too many images to choose from...

Your module has a lot of use cases.

I'll have to improve my (beginner) coding skills first :). (I'm starting with JUMP START PHP ENVIRONMENT now.)

Share this post


Link to post
Share on other sites

Yes, there's obviously a danger to add too many files to a library and make things convoluted. There's a point where simple dropdowns aren't practical anymore, but then, structuring information always is an ongoing task. That's a reason why one of the next points on my todo-list at work is a small module to show file usage (i.e. which pages' html fields link to a given pagefile), though that's probably going to be less pratical as I'll use a custom link and image url extractor in our OpenSearchServer to get quick results and avoid parsing multiple fields in a few thousand pages in the database for every file.

I haven't read that book, but getting acquainted with tool sets and release procedures before forming bad habits sounds like a good plan, even if not everything (like e.g. composer use) can be used for every project. It's often harder to un-learn a bad habit than learn it the right way first. :)

  • Like 3

Share this post


Link to post
Share on other sites

Update: I've added a "Media" admin page with a quick create option for new library pages.

  • Like 6

Share this post


Link to post
Share on other sites

It could be good to upload images to the media library in ckeditor.

Current, it may confused users, uploaded a image in ckeditor of a editing page, but it could not show up on other pages.

Share this post


Link to post
Share on other sites

It already does that - or, to be more precise, PW's default behavior takes care of that.

post-2900-0-07449400-1457845208_thumb.gi

  • Like 5

Share this post


Link to post
Share on other sites

Thanks for this great module. When using the option to upload images with the media library in CKeditor (like you've mentioned in the previous post). Everything seems to be working fine. However when I visit the page the next day, the image is gone and it's also removed from the Mediamanager.

However when uploading an image directly to the MediaManager (through the link in the sidebar) the images will be there the next day.

Do you have an idea what's causing this?

Share this post


Link to post
Share on other sites

That's strange. Could you do a few checks to narrow it down? Is the uploaded image present in the file system under site/assets/id of the media library page? Is the image tag in the output still present and if yes, what does it look like? Also, which PW version are you using?

Share this post


Link to post
Share on other sites

I've tested it in a bit more detail:
- The uploaded image isn't present under site/assets/id. Both the original and the thumbnail image are gone

- The image tag in the output is still present. It looks like <img alt="" src="/site/assets/files/[id]/[image].jpg" width="800">

- I'm currently using ProcessWire 3.0.11

If you need any additional information, please let me know.

Share this post


Link to post
Share on other sites

I installed 3.0.11 and tested it, and here it worked, but there are so many different parameters that might interfere. So, just to be sure:

  • You edit a page in CKEditor and select a media library from there, then upload an image (let's call it 'test.png')
  • After that, PW should place the image and thumbnails in "site/assets/files/[iD of media library page]/".
  • Can you confirm that the id CKEditor puts into the image tag is the id of the media library page you selected?
  • Is the image there on the file system immediately after you upload it?

If I recall it right, there were some issues with image uploading in certain settings when always_populate_raw_post_data was enabled, but I'm not sure if that still applies. Also, memory limits in php.ini might be worth a look. Generally, though, if you can upload images and get a preview, everything should be running fine. Do you have any other site modules installed?

Share this post


Link to post
Share on other sites

Thanks for checking it out. Uploading images isn't the problem. At first the image is being added to the page correctly and everything is working. The problem arises the next day (I have the feeling it happens somewhere through the night) when the image is being removed. This only happens when uploading the image through CKEditor. When uploading images through the 'Media' page in the sidebar, the images aren't removed automatically.

You edit a page in CKEditor and select a media library from there, then upload an image (let's call it 'test.png')

Yes indeed.

After that, PW should place the image and thumbnails in "site/assets/files/[iD of media library page]/".

That's indeed also the case. The image is added to the assets/files/[id of media library page] folder.

Can you confirm that the id CKEditor puts into the image tag is the id of the media library page you selected?

Yes, that's also the case. In the page the id is used from the media library.

Is the image there on the file system immediately after you upload it?

The image is there after I uploaded it. There are two images (the original file and a thumbnail version).

Do you have any other site modules installed?

On the website, the following modules have been installed:

- ProCache

- Form Builder

- Profields (Table)

- MarkupSEO

- MarkupSimpleNavigation

- TextformatterGoogleMaps

- TextformatterVideoEmbed

- TextformatterSrcSet (but it's not enabled inside the body field where the images disappear)

To be safe, i've added a screenshot of the settings that i've used for the body field. Might the 'HTML Options' have something to do with it?

be64ab.png

If you want I can give you temporarily access to the website.

Share this post


Link to post
Share on other sites

Just curious, I have everything set up and a new "gallery" set up using the library, but how do you actually utilize it in a template?

Share this post


Link to post
Share on other sites

It's not really designed to be used in a template through the API, the use case was to make re-using images and documents in CKEditor less complicated. Behind the scene, MediaLibraries are nothing but pages with a MediaImages and MediaFiles field, the magic is the concise overview over dedicated media pages (and their creation without navigating through the page tree) and, most importantly, the quick selection in the CKEditor dialogs.

You can get the available libraries for a page through the API though:

/* Retrieve all available MediaLibraries for the current page */

// get possible parents first
$mparents = $page->parents->and($page);

// get PageArray with all possible libraries
$libs = $pages->find("template=MediaLibrary, parent=$mparents");

// do something with libraries
foreach($libs as $lib) {
    echo $lib->title . PHP_EOL;
    // Every library is just a page with the fields MediaImages and MediaFiles
    foreach($lib->MediaImages as $img) {
        echo "<img src='$img->url'/><br/>" . PHP_EOL;
    }
}

Of course, you can fetch a specific library through regular selector syntax too, e.g.:

$lib = $pages->get("template=MediaLibrary, name=global-media");

foreach($lib->MediaFiles as $file) {
 // ...
}
  • Like 3

Share this post


Link to post
Share on other sites

It's almost perfect for the task I would use it, but am I right that I need to create multiple Media Libraries under Home to have multiple "categories" of libraries? I tried to put them under a page not to pollute the root with many Media Libraries but then they don't show up in the selector when trying to insert an image.

Update:

I see it's possible to use it from subpages but my current multi-user setup doesn't allow placing them in ancestor pages. 

I wanted something like this:

- global page
- global page
- global page
- user page
- - user subpage
- - user subpage
- user page
- - user subpage
- - user subpage
- Media Library parent page
- - Library 1
- - Library 2

So users cannot reach Library 1 in this setup.

Share this post


Link to post
Share on other sites

I'm a little bit uncomfortable with allowing just any child under a media library, but I can understand the wish for nesting, so version 0.0.7 on github allows you to create libraries under existing MediaLibrary pages, and these child libraries (no limit for nesting) are also listed whenever their parent library is.

For anybody planning to use MediaLibrary through the API, there's a new method that returns an array with all applicable media pages for a given page (following the under-parent-or-current-page rule):

$ml = wire('modules')->get('MediaLibrary');
$mediapages = $ml->getPageMediaLibraries($page);

foreach($mediapages as $mpage) {
   // ...
}

I've made getPageMediaLibraries hookable if anybody wants to apply further rules to which pages should be available.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks! Setting "/medialibrary1/medialibrary2" allows users selecting images from these pages now.

I didn't wanted them to see or use images from "/medialibrary1" but it's something I can live with :)

Now I can use it for common site-wide images, which will be a great plus.

Have you considered changing the way Media Libraries are selected? The current selectbox doesn't seem too user-friendly UI-wise. Maybe radios would be better so they could see libraries with fewer clicks.

  • Like 1

Share this post


Link to post
Share on other sites

Just grab the latest version from git (if you get a message that configurable module test failed, repeatedly refresh modules until the message goes away), then go into the module configuration and select "Radios".

:)

You can exclude certain media pages from showing up for the user through a hook in ready.php:

wire()->addHookAfter("MediaLibrary::getPageMediaLibraries", null, "filterLibraries");

function filterLibraries($event) {
  $media = $event->return;
  if(! wire('user')->isSuperUser) {
    $event->return = array_filter($media, function($v) {
      return ($v->id != $ID_OF_PAGE_TO_EXCLUDE);
    });
  }
}
  • Like 3

Share this post


Link to post
Share on other sites

Great, thanks! Both working fine.

However, when going to the Media page in the admin, I get an error:

"Call to a member function count() on null"

line:

https://github.com/BitPoet/MediaLibrary/blob/master/ProcessMediaLibraries.module#L41

I've removed the MediaFiles from the template, I guess that's why.

Possible fix:

		foreach($this->pages->find("template=MediaLibrary") as $pg) {

			$MediaImagesCount = $pg->MediaImages ? $pg->MediaImages->count() : 0;
			$MediaFilesCount = $pg->MediaFiles ? $pg->MediaFiles->count() : 0;
			
			$tbl->row(array(
				"<a href='{$pg->editURL}'>{$pg->title}</a>",
				implode(' / ', array_map(function($item) { return "<a href='{$this->config->urls->admin}page/?open=$item->id'>$item->title</a>"; }, $pg->parents()->getArray())),
				$MediaImagesCount,
				$MediaFilesCount
			));
		}
  • Like 1

Share this post


Link to post
Share on other sites
Hi.

Thanks for useful module.

I noticed that MediaLibrary.js is loading on frontend even if there is no edit functionality?

Is it normal behavior?

Share this post


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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By teppo
      Needed a really simple solution to embed audio files within page content and couldn't find a module for that, so here we go. Textformatter Audio Embed works a bit like Textformatter Video Embed, converting this:
      <p>https://www.domain.tld/path/to/file.mp3</p> Into this:
      <audio controls class="TextformatterAudioEmbed"> <source src="https://www.domain.tld/path/to/file.mp3" type="audio/mpeg"> </audio> The audio element has pretty good browser support, so quite often this should be enough to get things rolling 🙂
      GitHub repository: https://github.com/teppokoivula/TextformatterAudioEmbed Modules directory: https://modules.processwire.com/modules/textformatter-audio-embed/
    • By Richard Jedlička
      Tense    
      Tense (Test ENvironment Setup & Execution) is a command-line tool to easily run tests agains multiple versions of ProcessWire CMF.
      Are you building a module, or a template and you need to make sure it works in all supported ProcessWire versions? Then Tense is exactly what you need. Write the tests in any testing framework, tell Tense which ProcessWire versions you are interested in and it will do the rest for you.

      See example or see usage in a real project.
      How to use?
      1. Install it: 
      composer global require uiii/tense 2. Create tense.yml config:
      tense init 3. Run it:
      tense run  
      For detailed instructions see Github page: https://github.com/uiii/tense
       
      This is made possible thanks to the great wireshell tool by @justb3a, @marcus and others.
       
      What do you think about it? Do you find it useful? Do you have some idea? Did you find some bug? Tell me you opinion. Write it here or in the issue tracker.
    • By Chris Bennett
      Hi all, I am going round and round in circles and would greatly appreciate if anyone can point me in the right direction.
      I am sure I am doing something dumb, or missing something I should know, but don't. Story of my life 😉

      Playing round with a module and my basic problem is I want to upload an image and also use InputfieldMarkup and other Inputfields.
      Going back and forth between trying an api generated page defining Fieldgroup, Template, Fields, Page and the InputfieldWrapper method.

      InputfieldWrapper method works great for all the markup stuff, but I just can't wrap my head around what I need to do to save the image to the database.
      Can generate a Field for it (thanks to the api investigations) but not sure what I need to do to link the Inputfield to that. Tried a lot of stuff from various threads, of varying dates without luck.
      Undoubtedly not helped by me not knowing enough.

      Defining Fieldgroup etc through the api seems nice and clean and works great for the images but I can't wrap my head around how/if I can add/append/hook the InputfieldWrapper/InputfieldMarkup stuff I'd like to include on that template as well. Not even sure if it should be where it is on ___install with the Fieldtype stuff or later on . Not getting Tracy errors, just nothing seems to happen.
      If anyone has any ideas or can point me in the right direction, that would be great because at the moment I am stumbling round in the dark.
       
      public function ___install() { parent::___install(); $page = $this->pages->get('name='.self::PAGE_NAME); if (!$page->id) { // Create fieldgroup, template, fields and page // Create new fieldgroup $fmFieldgroup = new Fieldgroup(); $fmFieldgroup->name = MODULE_NAME.'-fieldgroup'; $fmFieldgroup->add($this->fields->get('title')); // needed title field $fmFieldgroup->save(); // Create new template using the fieldgroup $fmTemplate = new Template(); $fmTemplate->name = MODULE_NAME; $fmTemplate->fieldgroup = $fmFieldgroup; $fmTemplate->noSettings = 1; $fmTemplate->noChildren = 1; $fmTemplate->allowNewPages = 0; $fmTemplate->tabContent = MODULE_NAME; $fmTemplate->noChangeTemplate = 1; $fmTemplate->setIcon(ICON); $fmTemplate->save(); // Favicon source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFavicon'; $fmField->label = 'Favicon'; $fmField->focusMode = 'off'; $fmField->gridMode = 'grid'; $fmField->extensions = 'svg png'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Favicon Silhouette source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFaviconSilhouette'; $fmField->label = 'SVG Silhouette'; $fmField->notes = 'When creating a silhouette/mask svg version for Safari Pinned Tabs and Windows Tiles, we recommend setting your viewbox for 0 0 16 16, as this is what Apple requires. In many cases, the easiest way to do this in something like illustrator is a sacrificial rectangle with no fill, and no stroke at 16 x 16. This forces the desired viewbox and can then be discarded easily using something as simple as notepad. Easy is good, especially when you get the result you want without a lot of hassle.'; $fmField->focusMode = 'off'; $fmField->extensions = 'svg'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Create: Open Settings Tab $tabOpener = new Field(); $tabOpener->type = new FieldtypeFieldsetTabOpen(); $tabOpener->name = 'fmTab1'; $tabOpener->label = "Favicon Settings"; $tabOpener->collapsed = Inputfield::collapsedNever; $tabOpener->addTag(MODULE_NAME); $tabOpener->save(); // Create: Close Settings Tab $tabCloser = new Field(); $tabCloser->type = new FieldtypeFieldsetClose; $tabCloser->name = 'fmTab1' . FieldtypeFieldsetTabOpen::fieldsetCloseIdentifier; $tabCloser->label = "Close open tab"; $tabCloser->addTag(MODULE_NAME); $tabCloser->save(); // Create: Opens wrapper for Favicon Folder Name $filesOpener = new Field(); $filesOpener->type = new FieldtypeFieldsetOpen(); $filesOpener->name = 'fmOpenFolderName'; $filesOpener->label = 'Wrap Folder Name'; $filesOpener->class = 'inline'; $filesOpener->collapsed = Inputfield::collapsedNever; $filesOpener->addTag(MODULE_NAME); $filesOpener->save(); // Create: Close wrapper for Favicon Folder Name $filesCloser = new Field(); $filesCloser->type = new FieldtypeFieldsetClose(); $filesCloser->name = 'fmOpenFolderName' . FieldtypeFieldsetOpen::fieldsetCloseIdentifier; $filesCloser->label = "Close open fieldset"; $filesCloser->addTag(MODULE_NAME); $filesCloser->save(); // Create Favicon Folder Name $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeText"); $fmField->name = 'folderName'; $fmField->label = 'Favicon Folder:'; $fmField->description = $this->config->urls->files; $fmField->placeholder = 'Destination Folder for your generated favicons, webmanifest and browserconfig'; $fmField->columnWidth = 100; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon('folder'); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($tabOpener); $fmFieldgroup->add($filesOpener); $fmFieldgroup->add($fmField); $fmFieldgroup->add($filesCloser); $fmFieldgroup->add($tabCloser); $fmFieldgroup->save(); /////////////////////////////////////////////////////////////// // Experimental Markup Tests $wrapperFaviconMagic = new InputfieldWrapper(); $wrapperFaviconMagic->attr('id','faviconMagicWrapper'); $wrapperFaviconMagic->attr('title',$this->_('Favicon Magic')); // field show info what $field = $this->modules->get('InputfieldMarkup'); $field->name = 'use'; $field->label = __('How do I use it?'); $field->collapsed = Inputfield::collapsedNever; $field->icon('info'); $field->attr('value', 'Does this even begin to vaguely work?'); $field->columnWidth = 50; $wrapperFaviconMagic->add($field); $fmTemplate->fields->add($wrapperFaviconMagic); $fmTemplate->fields->save(); ///////////////////////////////////////////////////////////// // Create page $page = $this->wire( new Page() ); $page->template = MODULE_NAME; $page->parent = $this->wire('pages')->get('/'); $page->addStatus(Page::statusHidden); $page->title = 'Favicons'; $page->name = self::PAGE_NAME; $page->process = $this; $page->save(); } }  
    • By Sebi
      Since it's featured in ProcessWire Weekly #310, now is the time to make it official:
      Here is Twack!
      I really like the following introduction from ProcessWire Weekly, so I hope it is ok if I use it here, too. Look at the project's README for more details!
      Twack is a new — or rather newish — third party module for ProcessWire that provides support for reusable components in an Angular-inspired way. Twack is implemented as an installable module, and a collection of helper and base classes. Key concepts introduced by this module are:
      Components, which have separate views and controllers. Views are simple PHP files that handle the output for the component, whereas controllers extend the TwackComponent base class and provide additional data handling capabilities. Services, which are singletons that provide a shared service where components can request data. The README for Twack uses a NewsService, which returns data related to news items, as an example of a service. Twack components are designed for reusability and encapsulating a set of features for easy maintainability, can handle hierarchical or recursive use (child components), and are simple to integrate with an existing site — even when said site wasn't originally developed with Twack.
      A very basic Twack component view could look something like this:
      <?php namespace ProcessWire; ?> <h1>Hello World!</h1> And here's how you could render it via the API:
      <?php namespace Processwire; $twack = $modules->get('Twack'); $hello = $twack->getNewComponent('HelloWorld'); ?> <html> <head> <title>Hello World</title> </head> <body> <?= $hello->render() ?> </body> </html> Now, just to add a bit more context, here's a simple component controller:
      <?php namespace ProcessWire; class HelloWorld extends TwackComponent { public function __construct($args) { parent::__construct($args); $this->title = 'Hello World!'; if(isset($args['title'])) { $this->title = $args['title']; } } } As you can see, there's not a whole lot new stuff to learn here if you'd like to give Twack a try in one of your projects. The Twack README provides a really informative and easy to follow introduction to all the key concepts (as well as some additional examples) so be sure to check that out before getting started. 
      Twack is in development for several years and I use it for every new project I build. Also integrated is an easy to handle workflow to make outputs as JSON, so it can be used to build responses for a REST-api as well. I will work that out in one section in the readme as well. 
      If you want to see the module in an actual project, I have published the code of www.musical-fabrik.de in a repository. It runs completely with Twack and has an app-endpoint with ajax-output as well.
      I really look forward to hear, what you think of Twack🥳!
      Features Installation Usage Quickstart: Creating a component Naming conventions & component variants Component Parameters directory page parameters viewname Asset handling Services Named components Global components Ajax-Output Configuration Versioning License Changelog
    • By Robin S
      Page Reference Default Value
      Most ProcessWire core inputfield types that can be used with a Page Reference field support a "Default value" setting. This module extends support for default values to the following core inputfield types:
      Page List Select Page List Select Multiple Page Autocomplete (single and multiple) Seeing as these inputfield types only support the selection of pages a Page List Select / Page List Select Multiple is used for defining the default value instead of the Text / Textarea field used by the core for other inputfield types. This makes defining a default value a bit more user-friendly.
      Note that as per the core "Default value" setting, the Page Reference field must be set to "required" in order for the default value to be used.
      Screenshot

       
      https://github.com/Toutouwai/PageReferenceDefaultValue
      https://modules.processwire.com/modules/page-reference-default-value/
×
×
  • Create New...