Jump to content

[SOLVED] How/can you add/append InputfieldWrapper to api generated Fieldgroup used as template for page?

Recommended Posts

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() { 
        $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

            // 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;
			// 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;
			// 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;

			// Create: Open Settings Tab
			$tabOpener = new Field();
            $tabOpener->type = new FieldtypeFieldsetTabOpen();
            $tabOpener->name = 'fmTab1';
            $tabOpener->label = "Favicon Settings";
            $tabOpener->collapsed  = Inputfield::collapsedNever;
            // Create: Close Settings Tab				
            $tabCloser = new Field();
            $tabCloser->type = new FieldtypeFieldsetClose;
            $tabCloser->name = 'fmTab1' . FieldtypeFieldsetTabOpen::fieldsetCloseIdentifier;
            $tabCloser->label = "Close open tab";
			// 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;
			// Create: Close wrapper for Favicon Folder Name
			$filesCloser                 = new Field();
            $filesCloser->type           = new FieldtypeFieldsetClose();
            $filesCloser->name           = 'fmOpenFolderName' . FieldtypeFieldsetOpen::fieldsetCloseIdentifier;
            $filesCloser->label          = "Close open fieldset";
			// 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;
            // Experimental Markup Tests
		$wrapperFaviconMagic = new InputfieldWrapper();
		$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->attr('value', 'Does this even begin to vaguely work?');
	    $field->columnWidth = 50;

            // Create page
            $page = $this->wire( new Page() );
            $page->template = MODULE_NAME;
            $page->parent = $this->wire('pages')->get('/');
            $page->title = 'Favicons';
            $page->name = self::PAGE_NAME;
            $page->process = $this;


Edited by Chris Bennett
Marked as Solved
Link to post
Share on other sites

Many thanks @BillH, I will certainly investigate that thread further, it expands on some of the snippets I tried unsuccessfully along the way.

In the meantime, I lucked upon the thread below, thanks to Bernard posting, which got me a lot further along the path. 
Still experimenting, with a fair degree of success so far, but not yet ready to claim it is "solved". Enjoying learning more as I go.

Module I am playing around with - mainly to force myself to learn more about how everything really works - is an attempt to recreate what I am already using (via normal admin page, a couple of fields with a nifty preview/review using RuntimeMarkup and a couple of php templates).

It generates favicons from svg right the way through (unlike realfavicongenerator), with a fallback for pngs and all the necessary markup, manifest, browserconfig etc.

Similar to realfavicongenerator (which I have long loved), but tweaked according to my personal wishlist.
Could accomplish what is *needed* pretty easily, but would really like to add some polish for clients.
Also so they can easily see what we have done¬†and/or do that stuff themselves¬†ūüėČ

The php templates I am currently using simply by accessing the normal hidden admin page automatically generate: 

  • svg favicons for current gen browsers (if svg source provided)
  • black safari pinned tab mask icon and white¬†mstiles¬†(if svg silhouette provided)
  • automatic mask icon with required safe space for webmanifest
  • automatic cropping of svgs/pngs so small icons can use the whole 16x16 or 32 x32 - because 3 or 4 px makes a big difference when you only start with 16
  • generation of webmanifest and browserconfig
  • frontend markup for inclusion that basically just checks if the right file exists and plonks in the correct markup if it does

Was a little surprised it seemed to work well.
No zip files, no code, no third parties, plonk new sources in, click generate new, check results and done. 

Lots more previews/config options I could/will add but figured it might be wise to work out any inevitable kinks with implementation of a module along these lines within the api before I got carried away too much more. 


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 monollonom
      (once again I was surprised to see a work of mine pop up in the newsletter, this time without even listing the module on PW modules website ūüėÖ. Thx @teppo !)
      Github: https://github.com/romaincazier/FieldtypeQRCode
      Modules directory: https://processwire.com/modules/fieldtype-qrcode/
      This is a simple module I made so a client could quickly grab a QR Code of the page's url in the admin.
      There's not much to it for now, but if need be you can output anything using a hook:
      $wire->addHookAfter("FieldtypeQRCode::getQRText", function($event) { $event->return = "Your custom text"; }) You can also output the QR code on your front-end by calling the field:
      echo $page->qr_code_field; The module uses the PHP library QR Code Generator by Kazuhiko Arase. When looking for a way to generate a QR Code in PW I came across @ryan's integration in his TFA module. I'm not very familiar with fieldtype/inputfield module development so I blindly followed @bernhard (great) tutorial and his BaseFieldtypeRuntime. At some point I'll take a deeper look to make a module on my own.
      Some ideas for improvements :
      add the ability to choose what to ouput : page's url / editUrl / file(s) / image(s) / ... allow to output multiple QR codes ?
    • By Chris Bennett
      Inspired by @bernhard's excellent work on the new customisable LESS CSS getting rolled into the core soon, I thought I would offer up the module for beta testing, if it is of interest to anyone.

      It takes a different approach to admin styling, basically using the Cascade part of CSS to over-ride default UiKit values.
      Values are stored in ModuleConfig Module creates a separate AdminThemeTweaker Folder at root, so it can link to AdminThemeTweaker.php as CSS AdminThemeTweaker.php reads the module values, constructs the CSS variables then includes the CSS framework Can be switched on and off with a click. Uninstall removes everything, thanks to bernhard's wonderful remove dir & contents function.
      It won't touch your core. It won't care if stuff is upgraded. You won't need to compile anything and you don't need to touch CSS unless you want to.

      It won't do much at all apart from read some values from your module config, work out the right CSS variables to use (auto contrast based on selected backgrounds) and throw it on your screen.
      You can configure a lot of stuff, leave it as it comes (dark and curvy), change two main colors (background and content background) or delve deep to configure custom margins, height of mastheads, and all manner of silly stuff I never use.

      Have been developing it for somewhere around 2 years now. It has been (and will continue to be) constantly tweaked over that time, as I click on something and find something else to do.
      That said, it is pretty solid and has been in constant use as my sole Admin styling option for all of those 2 years.

      If nothing else, it would be great if it can provide any assistance to @bernhard or other contributor's who may be looking to solve some of the quirkier UiKit behavior.
      Has (in my opinion) more robust and predictable handling of hidden Inputfields, data-colwidths and showIf wrappers.
      I am very keen to help out with that stuff in any way I can, though LESS (and any css frameworks/tools basically) are not my go.
      I love CSS variables and banging-rocks-together, no-dependency CSS you can write with notepad.


    • By opalepatrick
      I see old posts saying that repeaters are not the way to go in Custom Process Modules. If that is the case, when using forms (as I am trying to do) how would one tackle things like repeat contact fields where there can be multiple requirements for contact details with different parameters? (Like point of contact, director, etc) or even telephone numbers that have different uses?
      Just for background I am creating a process module that allows me to create types of financial applications in the admin area (no need to publish any of this, pure admin) that require a lot of personal or company information.
      Maybe I am thinking about this incorrectly?
    • By HMCB
      I ran across a reference to IftRunner module. The post was 6 years ago. I cant find it in available modules. Has it been pulled?
    • By opalepatrick
      I am working on my first Process Module. I am creating forms. Fairly straightforward. However, I really can't work out how to create multiple fieldsets?
      $fieldset = $this->modules->get('InputfieldFieldset'); $fieldset->label = 'Customer Source'; $field = $this->modules->get('InputfieldPage'); $field->inputfield = 'InputfieldSelect'; $field->findPagesSelector = 'parent_id=1449, include=hidden'; $field->labelFieldName = 'yff-lead'; $field->name = 'yfflead'; $field->columnWidth = 16; $fieldset->add($field); $field = $this->modules->get('InputfieldPage'); $field->inputfield = 'InputfieldSelect'; $field->findPagesSelector = 'parent_id=1452, include=hidden'; $field->labelFieldName = 'customer-type'; $field->name = 'customertype'; $field->columnWidth = 16; $fieldset->add($field); //Rinse and Repeat $fieldset->label = 'Contacts'; $field = $this->modules->get('InputfieldPage'); $field->inputfield = 'InputfieldSelect'; $field->findPagesSelector = 'parent_id=1538, include=hidden'; $field->labelFieldName = 'salutation'; $field->name = 'salutation'; $field->columnWidth = 16; $fieldset->add($field); I can create the first fieldset (Customer Source) but then get into trouble as the second fieldset overwrites the first. I understand why, but trying to use the open and close fieldset routine has flummoxed me. Any help appreciated.
  • Create New...