Jump to content
kongondo

Menu Builder

Recommended Posts

Update: Menu Builder 0.2.2

As of today and this version onward, ONLY ProcessWire 3.x is supported.

Changelog

  1. Support for namespaced ProcessWire only (ProcessWire 3.x).
  2. Various bug fixes to getMenuItems(), breadcrumbs and saving menus in multi lingual environments (thanks for all reports in GitHub and the forums).

Available now in the modules directory.

Please note that this version does not address any PHP 7.x issues.

Screen: Menu Builder in UiKit

mb-version-22-pw3-only-uikit-screen.thumb.png.b4e96d1003b0e4a0a7ccfe1d41073c8a.png

  • Like 1

Share this post


Link to post
Share on other sites
On 06/10/2017 at 10:16 AM, Zeka said:

Hi @kongondo

I have this setup: 

  • MenuItem1
    • Submenuitem_01( allowed children)
    • SubmenuItem_02 ( allowed children)
  • MenuItem2
    • Submenuitem_03 ( allowed children)
    • SubmenuItem_02 ( allowed children)

I'm using getMenuItems for building my menu, but the issue is that I get children of Submenuitem_02 as children only of the last Submenuitem_02 ( parent_id  =  id of the last Submenuitem_02 ), but I expected that I will get duplications of children pages with right parent_id for every Submenuitem_02

Of course, I can get children in my custom function but I think that in this case, getMenuItems doesn't work as expected and could be improved.

What do you think about it? 

Thanks, Eugene. 

Hi Eugene,

This is now sorted in version 022. Thanks.

  • Like 1

Share this post


Link to post
Share on other sites

Hi @kongondo

my client (using a multi-language site) just created a page, that is not relevant to anyone outside of Germany and therefore deactivated the english Version with ProcessWires default settings ("Active?"-checkbox behind the page url in settings) and it seems like inactive pages do not disappear in navigations built with MenuBuilder.

Is there a way to solve this, that I just didn't see or do I have to work around this?

Kind regards,
Thomas

Share this post


Link to post
Share on other sites

@thmsnhl,

Just to clarify, are you saying you want the German version of the page to appear in the menu but not the English one? Meaning, if viewing the site in German, we see the page in the menu, if we view it in English, we don't. No, I've never considered such a scenario but now I see I should. If we are to skip that item from the menu, if it is a parent item, obviously, its children will also be skipped. 

Share this post


Link to post
Share on other sites

@kongondo,

this is exactly what I would like to do.
And yes, if it is a parent page, the whole branch would be invisible but I guess this is self-explanatory and maybe even a wanted behaviour in most cases. If you don't want English users to see the parent, most likely you don't want them to see the children too.

Share this post


Link to post
Share on other sites

@thmsnhl,

Could you please test the following for me before I commit? I have tested using both the normal way of generating menus (render()) and using the method getMenuItems(). I have also tested with include children and it works fine. As for include children, ProcessWire internally takes care of the inactive pages (I guess because it uses a find()), so I didn't have to touch that. 

In MarkupMenuBuilder.module, please add the following code after line # 216:

if(!$p->viewable($language)) continue;

Any issues?

Thanks.

Share this post


Link to post
Share on other sites

Update: Menu Builder 0.2.3

Changelog

  1. Fixed a bug where inactive pages in multi-language sites would still be displayed in menus. Thanks @thmsnhl

Available in modules directory.

Thanks.

  • Like 4

Share this post


Link to post
Share on other sites

There is another Problem with multi language, but I think this is more a general PW issue.

Steps to reproduce:

- Configure at least a second language in PW.

- As admin, work with the "other" language, not the default (Set in Admin->Profile).

- Create menus

- Switch back to default language (Set in Admin->Profile)

The titles are not set for the default language. (See screenshot).

It is the same problem when you create a field etc. in PW as a non standard language user.  The value for the default language is not being set.

mbbug.png.09f615b7f6d1affb9e1f993ac0a6b616.png

 

Share this post


Link to post
Share on other sites

@theo,

I'll have a look. I'm not sure about the ProcessWire side of things but MB itself does check for languages when installed in a multi-language site. It doesn't activate other languages when creating a menu (which are hidden pages in admin). Hence, when saving the menu it only saves the menu title as $page->title = 'My Menu'. Since no language is specified nor is there input for other languages, the title is saved to the current language's title field. When you switch to another language, there is no menu title to display since none was saved in the first place.

By the way, this is the reason why in multi-language sites, menus cannot be rendered using their titles or names. You need to pass render() the menu ID or page.

Back to the missing titles issue, it's an issue I have previously considered. Back then, I came to the conclusion that it was not worth having menu items with multi-lingual titles since I couldn't think of a scenario to justify it. Your use case demonstrates  that I need to revisit the issue. 

I'll work on this for the next version. When creating and editing menus, there will be inputs for the different languages that are available (creating) and for enabled languages (when editing) [difference here being no need to edit the title of a menu title if that language is not enabled for that menu]. 

Above means I'll have to change the way menus are created. It has been suggested before that MB should lose the textarea for input of menu titles (one-per-line). I think I'll go with a simple table (like the one used when adding custom menu items) with columns for each available language or a ul list or div with tabs for each available language (i.e., mimic ProcessWire's language title field). To create additional menus simultaneously, one would only have to click on an 'add another menu link/icon'.

This will also resolve the issue of rendering menu items using their titles in multi-language sites. If a menu title or name is passed to render(), we will look for a menu by that title in the user's language.

Sorry for the long post! Some of these are notes-to-self to be honest :P

Edited by kongondo
typos
  • Like 1

Share this post


Link to post
Share on other sites

dear kongondo, help the beginner:

two languages on the site
connected module 0.2.3

                    $menu = $modules->get('MarkupMenuBuilder');
                    $options = array(
                        'has_children_class' => 'has_children',
                        'current_class' => 'current',
                        'menu_css_id' => 'nav_home',
                        'menu_css_class' => 'slimmenu',
                    );
                    echo $menu->render('menu', $options);


1 language - everything is fine, 2 language:

Error: Exception: No menu items found! Confirm that such a menu exists and that it has menu items. (in /var/www/***/site/modules/ProcessMenuBuilder/MarkupMenuBuilder.module line 1415)

<code>#0 /var/www/***/site/modules/ProcessMenuBuilder/MarkupMenuBuilder.module(105): ProcessWire\MarkupMenuBuilder-&gt;throwError()</code><br />
<code>#1 /var/www/***/site/templates/home.php(24): ProcessWire\MarkupMenuBuilder-&gt;render(&#039;menu&#039;, Array)</code><br />
<code>#2 /var/www/***/wire/core/TemplateFile.php(287): require(&#039;/var/www/...&#039;)</code><br />
<code>#3 /var/www/***/wire/core/Wire.php(380): ProcessWire\TemplateFile-&gt;___render()</code><br />
<code>#4 /var/www/***/wire/core/WireHooks.php(714): ProcessWire\Wire-&gt;_callMethod(&#039;___render&#039;, Array)</code><br />
<code>#5 /var/www/***/wire/core/Wire.php(442): ProcessWire\WireHooks-&gt;runHooks(Object(ProcessWire\TemplateFile), &#039;render&#039;, Ar</code></b><br /><br /><small>This error message was shown because: you are logged in as a Superuser. Error has been logged. </small></p>


What did I want to do?

Share this post


Link to post
Share on other sites
23 minutes ago, duncan said:

What did I want to do?

It's all in the documentation here :). Please also read the last couple of post above yours.

Quote

Similar to render(), the first argument is not optional and can be a Page object, a title, name or id of a menu or an array of menu items returned from a menu's menu_items field. This means that you only have to retrieve a menu once and pass that to both render() and renderBreadcrumbs()Note that for multilingual environments, you cannot pass the method a title or a name; only the other three choices will work

Since your site uses various languages, you need to pass render() either the ID of your menu, its Page object or an array of menu items. As per the post above yours, this limitation will be resolved in an upcoming update.

  • Like 2

Share this post


Link to post
Share on other sites

Hello all. It is my first time playing with MB and I am thrilled how simple it was to attache two menus (header and footer) to my current project. Now my goal is to have the menus in multilanguage and that is where something is still missing on my end. Reading carefully the manuals, I switched the rendering to menu IDs (getting them from the URL of the menu edit link) and both menus work fine. Presently I switched the default language to be Bulgarian and second - English. The issue I am having is that if I browse the default website: domain.com it shows everything in Bulgarian (which is fine). However if I point to domain.com/en/ it still shows the menu in Bulgarian instead of switching the page titles to the english version.

My menu structure is quite simple and I only added the MB to have a better understanding of its functionality so here is the structure:

-- Home
-- About
-- Services
---- Service 1
---- Service 2
---- Service 3
-- Portfolio
-- News
-- Contact us

To call the menu I am using the following rendering code:

//Building the array of options
$options = array(

'wrapper_list_type' => 'ul',// ul, ol, nav, div, etc.
'list_type' => 'li',// li, a, span, etc.
'menu_css_id' => 'menu-top-menu',// a CSS ID for the menu
'menu_css_class' => 'menu-item',// a CSS Class for the menu
'submenu_css_class' => 'sub-menu',// CSS Class for sub-menus
'has_children_class' => 'menu-item-has-children',// CSS Class for any menu item that has children
'current_class' => 'current-menu-item',
);

// load the module
$menu = $modules->get('MarkupMenuBuilder');// $menu is an example
// Render the menu by title
echo $menu->render(1029, $options); // calling menu by ID to allow it on multilanguage site

Is there anything I am missing here? In the MB admin if I switch the language I see the links properly changing (for english it changes the path to /en/... but the titles are kept the same...

 

MenuBuilder-MultiLanguage.png

Share this post


Link to post
Share on other sites

@MilenKo

There are two routes how you can achieve ML menus with MB.

1. Create separate menu for every language and depending on user language pass different pages for menu render method.

2. Enable additional language for the menu ( Settings tab -> Other active languages for this menu) I think that it is what you are looking for.

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, MilenKo said:

Is there anything I am missing here? In the MB admin if I switch the language I see the links properly changing (for english it changes the path to /en/... but the titles are kept the same...

Alternatively, just use the 'default_title' option.

Quote

default_title: Controls whether to display Menu Builder saved menu item titles/labels versus displaying pages' actual/current titles. This is useful in scenarios where, for example, you need dynamic titles such as in a multilingual environment where you would want navigation labels to change depending on the current language. The default option is to display saved titles. To instead display actual titles, set option to 'default_title' => 1 in your options array.

Switch it to 1 and you are good to go (0 means show what has been saved in MB; 1 means show the actual ProcessWire page's title for that menu item).

Share this post


Link to post
Share on other sites

Thank you @Zeka and @kongondo

It seems as it was my mistake of having enabled Other active languages of the menu after I have added the pages and for some reason the language got the same in both. After disabling the option and reenabling it, I got the tabs for Default and English language texts so it is all good now and switching properly.

So to say, it is all working fine for multilanguage site out of the box as far as the person has taken the following steps:

1. Figure out the options array and apply the proper styling to the menu.

2. While rendering the menu, do not call the menu by name but use ID as the simplest thing to do (grab the URL from the menu edit link - id=XXXX where xxxx is the ID. In the instructions it was saying to call the menu using: 

$menu = $modules->get('MarkupMenuBuilder');// $menu is an example
echo $menu->render('XXXX', $options);

However thanks to the community and the knowledge sharing here, I figured out how to fix it using the following:

$menu = $modules->get('MarkupMenuBuilder');// $menu is an example
echo $menu->render(XXXX, $options);

4. In order to enable multilanguage options, just go to Setup>Menu Builder. From there while creating or selecting an already created menu, click on the Settings tab and enable the languages you would like the menu to be translated to from the: Other languages for this menu option. Once this step is completted, every menu option would have separate tabs for every language selected.

5. Test the menu pointing to the website url in different languages, ex. /en/ , /ru/ , /de/ etc.

  • Like 2

Share this post


Link to post
Share on other sites

Hello,

does anybody know, if there is a possibility to only output a certain menu level or certain siblings in the menu?
Like the begin of a start-level?

 

F.e. start the output at level "sub":

- parent item 1

- parent item 2 (don't output this)

- - sub item 2.1 (only show / output this)

- parent item 3

 

Currently used version is V 0.1.3 with ProcessWire 2.7.2

Regards
Bacelo

Share this post


Link to post
Share on other sites

Hi @Bacelo,

Achievable from version 0.1.5 using the getMenuItems() method  (see examples here) or from version 0.1.8 using the 'disable menu items' feature. Please note that support for ProcessWire 2.x ceased with version 0.2.2. In your case, you can upgrade Menu Builder up to version 0.2.1. and you'll be fine. If you can though, I'd advise to upgrade to ProcessWire 3.x.

  • Thanks 1

Share this post


Link to post
Share on other sites

 

Hi @kongondo,

thanks a lot for you answer ^-^

PW upgrade to V 3.X is not an option currently, so how / where can I download Menu Builder V 0.2.1 ?

Regards
Bacelo

Share this post


Link to post
Share on other sites
1 hour ago, Bacelo said:

where can I download Menu Builder V 0.2.1 ?

From the repo. Browse the repository commits and click on the commit shown in the screenshot below:

mb-github-021-version.thumb.png.f04aa8e2a88584b4435d6dc10657114a.png

That will take you to the page where you can clone/download that version.

Edited by kongondo
added link to repo
  • Thanks 1

Share this post


Link to post
Share on other sites
On 6/4/2018 at 9:55 PM, bud said:

Hello, could someone may help me?

1. The menu builder just works fine but I am wondering if there is a way to have options for autocollapsing parts of the menu pathes as you can do with the module markup simple navigation? It would help me because my navigation is pretty large and I should not view the whole navigation tree after a fresh installation of the module.

2. The menu option "custom" works great for custom links but I have found no way to "import" a whole path of the processwire tree into the menu builder as you can do with the option "page". What could I do instead of getting all the menu items in just one by one?

3. I also tried first to use the "custom" option of the module for importing a whole items path and then switch over to the "custom" options but it seems not to be possible. 

May someone could help?

 

Hi @bud,


Welcome to the forums

  1. There is no auto-collapse option. You would have to code that yourself, e.g. using JavaScript. Maybe using the getMenuItems() method is best in this case.
  2. I don't understand this question. Please elaborate and/or illustrate
  3. I don't understand this question either.

 

 

 

Share this post


Link to post
Share on other sites

I'm still not sure I follow. Custom menu items are ones you create yourself and are external to your ProcessWire site. E.g. www.google.com, etc. I'm also not sure whether you are talking about the backend or frontend of Menu Builder.

20 hours ago, bud said:

do you have some code to share related to your default menu tree (which uses just your css) where the menu tree just opens the part of the tree which is active (for example: one parent and their children should be open and everything else closed 

There's tons out there. Please Google 'accordion menu' OR (CSS only accordion menu). Once you've found what you like, let us know here and we can help you implement it.

Share this post


Link to post
Share on other sites

@bud,

You can already do all the things you've mentioned.

  1. You can add 1 or 2 or 3 or 1000 or whatever number menu items in one go.
  2. You can delete them before OR after adding them to the menu.
  3. You can reorder items after adding them to the menu (drag and drop).
  4. You can nest items after adding them to the menu (drag and drop)
  5. You can rename menu item and also change its link (custom items)

See this example...

mb_backend_basics.thumb.gif.1f81c6c66980ae661f3179c59a4f2ff6.gif

Maybe you mean copy and paste custom links rather than entering them one by one? I think with a little JavaScript magic, that can be done..

If I'm still not getting you, you'll have to make a screengrab/video to explain what you are after,  I'm afraid.

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 horst
      ---------------------------------------------------------------------------------------------------------------------------------
        when working with PW version 2.6+, please use Pim2, not Pim!
        read more here  on how to change from the older to the newer version in existing sites
      ---------------------------------------------------------------------------------------------------------------------------------
      PageImage Manipulator, API for version 1 & 2

      The Page Image Manipulator is a module that let you in a first place do ImageManipulations with your PageImages. - And in a second place there is the possibility to let it work on any imagefile that exists in your servers filesystem, regardless if it is a 'known PW-image'.

      The Page Image Manipulator is a Toolbox for Users and Moduledevelopers. It is written to be as close to the Core ImageSizer as possible. Besides the GD-filterfunctions it contains resize, crop, canvas, rotate, flip, sharpen, unsharpMask and 3 watermark methods.



      How does it work?

      You can enter the ImageManipulator by calling the method pim2Load(). After that you can chain together how many actions in what ever order you like. If your manipulation is finished, you call pimSave() to write the memory Image into a diskfile. pimSave() returns the PageImage-Object of the new written file so we are able to further use any known PW-image property or method. This way it integrates best into the ProcessWire flow.

      The three examples above put out the same visual result: a grayscale image with a width of 240px. Only the filenames will slightly differ.

      You have to define a name-prefix that you pass with the pimLoad() method. If the file with that prefix already exists, all operations are skipped and only the desired PageImage-Object gets returned by pimSave(). If you want to force recreation of the file, you can pass as second param a boolean true: pim2Load('myPrefix', true).

      You may also want to get rid of all variations at once? Than you can call $pageimage->pim2Load('myPrefix')->removePimVariations()!

      A complete list of all methods and actions are at the end of this post.
       
      You may also visit the post with tips & examples for users and module developers.


      How to Install
      Download the module Place the module files in /site/modules/PageImageManipulator/ In your admin, click Modules > Check for new modules Click "install" for PageImageManipulator Done! There are no configuration settings needed, just install and use it. Download    (version 0.2.0)
      get it from the Modules Directory History of origins

      http://processwire.com/talk/topic/3278-core-imagemanipulation/


      ----------------------------------------------------------------------------------------------------------


      Page Image Manipulator - Methods

      * pimLoad  or  pim2Load, depends on the version you use!

      pimLoad($prefix, $param2=optional, $param3=optional)
      param 1: $prefix - (string) = mandatory! param 2: mixed, $forceRecreation or $options param 3: mixed, $forceRecreation or $options return: pim - (class handle) $options - (array) default is empty, see the next method for a list of valid options! $forceRecreation - (bool) default is false It check if the desired image variation exists, if not or if forceRecreation is set to true, it prepares all settings to get ready for image manipulation
      -------------------------------------------------------------------

      * setOptions

      setOptions(array $options)
      param: $options - (array) default is empty return: pim - (class handle) Takes an array with any number valid options / properties and set them by replacing the class-defaults and / or the global config defaults optionally set in the site/config.php under imageSizerOptions or imageManipulatorOptions.

      valid options are:
      quality = 1 - 100 (integer) upscaling = true | false (boolean) cropping = true | false (boolean) autoRotation =true | false (boolean) sharpening = 'none' | 'soft' | 'medium' | 'strong' (string) bgcolor = (array) css rgb or css rgba, first three values are integer 0-255 and optional 4 value is float 0-1, - default is array(255,255,255,0) thumbnailColorizeCustom = (array) rgb with values for colorize, integer -255 - 255 (this can be used to set a custom color when working together with Thumbnails-Module)
        outputFormat = 'gif' | 'jpg' | 'png' (Attention: outputFormat cannot be specified as global option in $config->imageManipulatorOptions!) set {singleOption} ($value)
      For every valid option there is also a single method that you can call, like setQuality(90), setUpscaling(false), etc.
      -------------------------------------------------------------------

      * pimSave

      pimSave()
      return: PageImage-Object If a new image is hold in memory, it saves the current content into a diskfile, according to the settings of filename, imagetype, targetFilename and outputFormat. Returns a PageImage-Object!
      -------------------------------------------------------------------

      * release

      release()
      return: void (nothing) if you, for what ever reason, first load image into memory but than do not save it, you should call release() to do the dishes! 😉 If you use pimSave() to leave the ImageManipulator, release() is called automatically.
      -------------------------------------------------------------------

      * getOptions

      getOptions()
      return: associative array with all final option values example:
      ["autoRotation"] bool(true) ["upscaling"] bool(false) ["cropping"] bool(true) ["quality"] int(90) ["sharpening"] string(6) "medium" ["targetFilename"] string(96) "/htdocs/site/assets/files/1124/pim_prefix_filename.jpg" ["outputFormat"] string(3) "jpg" get {singleOption} ()
      For every valid option there is also a single method that you can call, like getQuality(), getUpscaling(), etc. See method setOptions for a list of valid options!
      -------------------------------------------------------------------

      * getImageInfo

      getImageInfo()
      return: associative array with useful informations of source imagefile example:
      ["type"] string(3) "jpg" ["imageType"] int(2) ["mimetype"] string(10) "image/jpeg" ["width"] int(500) ["height"] int(331) ["landscape"] bool(true) ["ratio"] float(1.5105740181269) ["bits"] int(8) ["channels"] int(3) ["colspace"] string(9) "DeviceRGB" -------------------------------------------------------------------

      * getPimVariations

      getPimVariations()
      return: array of Pageimages Collect all pimVariations of this Pageimage as a Pageimages array of Pageimage objects. All variations created by the core ImageSizer are not included in the collection.
      -------------------------------------------------------------------

      * removePimVariations

      removePimVariations()
      return: pim - (class handle) Removes all image variations that was created using the PIM, all variations that are created by the core ImageSizer are left untouched!
      -------------------------------------------------------------------
      * width

      width($dst_width, $sharpen_mode=null)
      param: $dst_width - (integer) param: $auto_sharpen - (boolean) default is true was deleted with version 0.0.8, - sorry for breaking compatibility param: $sharpen_mode - (string) possible: 'none' | 'soft' | 'medium' | 'strong', default is 'soft' return: pim - (class handle) Is a call to resize where you prioritize the width, like with pageimage. Additionally, after resizing, an automatic sharpening can be done with one of the three modes.
      -------------------------------------------------------------------

      * height

      height($dst_height, $sharpen_mode=null)
      param: $dst_height - (integer) param: $auto_sharpen - (boolean) default is true was deleted with version 0.0.8, - sorry for breaking compatibility param: $sharpen_mode - (string) possible: 'none' | 'soft' | 'medium' | 'strong', default is 'soft' return: pim - (class handle) Is a call to resize where you prioritize the height, like with pageimage. Additionally, after resizing, an automatic sharpening can be done with one of the three modes.
      -------------------------------------------------------------------

      * resize

      resize($dst_width=0, $dst_height=0, $sharpen_mode=null)
      param: $dst_width - (integer) default is 0 param: $dst_height - (integer) default is 0 param: $auto_sharpen - (boolean) default is true was deleted with version 0.0.8, - sorry for breaking compatibility param: $sharpen_mode - (string) possible: 'none' | 'soft' | 'medium' | 'strong', default is 'soft' return: pim - (class handle) Is a call to resize where you have to set width and / or height, like with pageimage size(). Additionally, after resizing, an automatic sharpening can be done with one of the three modes.
      -------------------------------------------------------------------

      * stepResize

      stepResize($dst_width=0, $dst_height=0)
      param: $dst_width - (integer) default is 0 param: $dst_height - (integer) default is 0 return: pim - (class handle) this performs a resizing but with multiple little steps, each step followed by a soft sharpening. That way you can get better result of sharpened images.
      -------------------------------------------------------------------

      * sharpen

      sharpen($mode='soft')
      param: $mode - (string) possible values 'none' | 'soft'| 'medium'| 'strong' return: pim - (class handle) Applys sharpening to the current memory image. You can call it with one of the three predefined pattern, or you can pass an array with your own pattern.
      -------------------------------------------------------------------

      * unsharpMask

      unsharpMask($amount, $radius, $threshold)
      param: $amount - (integer) 0 - 500, default is 100 param: $radius - (float) 0.1 - 50, default is 0.5 param: $threshold - (integer) 0 - 255, default is 3 return: pim - (class handle) Applys sharpening to the current memory image like the equal named filter in photoshop.
      Credit for the used unsharp mask algorithm goes to Torstein Hønsi who has created the function back in 2003.
      -------------------------------------------------------------------

      * smooth

      smooth($level=127)
      param: $level - (integer) 1 - 255, default is 127 return: pim - (class handle) Smooth is the opposite of sharpen. You can define how strong it should be applied, 1 is low and 255 is strong.
      -------------------------------------------------------------------

      * blur

      blur()
      return: pim - (class handle) Blur is like smooth, but cannot called with a value. It seems to be similar like a result of smooth with a value greater than 200.
      -------------------------------------------------------------------

      * crop

      crop($pos_x, $pos_y, $width, $height)
      param: $pos_x - (integer) start position left param: $pos_y - (integer) start position top param: $width - (integer) horizontal length of desired image part param: $height - (integer) vertical length of desired image part return: pim - (class handle) This method cut out a part of the memory image.
      -------------------------------------------------------------------

      * canvas

      canvas($width, $height, $bgcolor, $position, $padding)
      param: $width = mixed, associative array with options or integer, - mandatory! param: $height = integer, - mandatory if $width is integer! param: $bgcolor = array with rgb or rgba, - default is array(255, 255, 255, 0) param: $position = one out of north, northwest, center, etc, - default is center param: $padding = integer as percent of canvas length, - default is 0 return: pim - (class handle) This method creates a canvas according to the given width and height and position the memory image onto it.
      You can pass an associative options array as the first and only param. With it you have to set width and height and optionally any other valid param. Or you have to set at least width and height as integers.
      Hint: If you want use transparency with rgba and your sourceImage isn't of type PNG, you have to define 'png' as outputFormat with your initially options array or, for example, like this: $image->pimLoad('prefix')->setOutputFormat('png')->canvas(300, 300, array(210,233,238,0.5), 'c', 5)->pimSave()
      -------------------------------------------------------------------

      * flip

      flip($vertical=false)
      param: $vertical - (boolean) default is false return: pim - (class handle) This flips the image horizontal by default. (mirroring)
      If the boolean param is set to true, it flips the image vertical instead.
      -------------------------------------------------------------------

      * rotate

      rotate($degree, $backgroundColor=127)
      param: $degree - (integer) valid is -360 0 360 param: $backgroundColor - (integer) valid is 0 - 255, default is 127 return: pim - (class handle) This rotates the image. Positive values for degree rotates clockwise, negative values counter clockwise. If you use other values than 90, 180, 270, the additional space gets filled with the defined background color.
      -------------------------------------------------------------------

      * brightness

      brightness($level)
      param: $level - (integer) -255 0 255 return: pim - (class handle) You can adjust brightness by defining a value between -255 and +255. Zero lets it unchanged, negative values results in darker images and positive values in lighter images.
      -------------------------------------------------------------------

      * contrast

      contrast($level)
      param: $level - (integer) -255 0 255 return: pim - (class handle) You can adjust contrast by defining a value between -255 and +255. Zero lets it unchanged, negative values results in lesser contrast and positive values in higher contrast.
      -------------------------------------------------------------------

      * grayscale

      grayscale()
      return: pim - (class handle) Turns an image into grayscale. Remove all colors.
      -------------------------------------------------------------------

      * sepia

      sepia()
      return: pim - (class handle) Turns the memory image into a colorized grayscale image with a predefined rgb-color that is known as "sepia".
      -------------------------------------------------------------------

      * colorize

      colorize($anyColor)
      param: $anyColor - (array) like css rgb or css rgba - but with values for rgb -255 - +255,  - value for alpha is float 0 - 1, 0 = transparent  1 = opaque return: pim - (class handle) Here you can adjust each of the RGB colors and optionally the alpha channel. Zero lets the channel unchanged whereas negative values results in lesser / darker parts of that channel and higher values in stronger saturisation of that channel.
      -------------------------------------------------------------------

      * negate

      negate()
      return: pim - (class handle) Turns an image into a "negative".
      -------------------------------------------------------------------

      * pixelate

      pixelate($blockSize=3)
      param: $blockSize - (integer) 1 - ??, default is 3 return: pim - (class handle) This apply the well known PixelLook to the memory image. It is stronger with higher values for blockSize.
      -------------------------------------------------------------------

      * emboss

      emboss()
      return: pim - (class handle) This apply the emboss effect to the memory image.
      -------------------------------------------------------------------

      * edgedetect

      edgedetect()
      return: pim - (class handle) This apply the edge-detect effect to the memory image.
      -------------------------------------------------------------------

      * getMemoryImage

      getMemoryImage()
      return: memoryimage - (GD-Resource) If you want apply something that isn't available with that class, you simply can check out the current memory image and apply your image - voodoo - stuff
      -------------------------------------------------------------------

      * setMemoryImage

      setMemoryImage($memoryImage)
      param: $memoryImage - (GD-Resource) return: pim - (class handle) If you are ready with your own image stuff, you can check in the memory image for further use with the class.
      -------------------------------------------------------------------

      * watermarkLogo

      watermarkLogo($pngAlphaImage, $position='center', $padding=2)
      param: $pngAlphaImage - mixed [systemfilepath or PageImageObject] to/from a PNG with transparency param: $position - (string) is one out of: N, E, S, W, C, NE, SE, SW, NW,
      - or: north, east, south, west, center, northeast, southeast, southwest, northwest
      default is 'center' param: $padding - (integer) 0 - 25, default is 5, padding to the borders in percent of the images length! return: pim - (class handle) You can pass a transparent image with its filename or as a PageImage to the method. If the watermark is bigger than the destination-image, it gets shrinked to fit into the targetimage. If it is a small watermark image you can define the position of it:
      NW - N - NE | | | W - C - E | | | SW - S - SE  
      The easiest and best way I have discovered to apply a big transparency watermark to an image is as follows:
      create a square transparent png image of e.g. 2000 x 2000 px, place your mark into the center with enough (percent) of space to the borders. You can see an example here! The $pngAlphaImage get centered and shrinked to fit into the memory image. No hassle with what width and / or height should I use?, how many space for the borders?, etc.
      -------------------------------------------------------------------

      * watermarkLogoTiled

      watermarkLogoTiled($pngAlphaImage)
      param: $pngAlphaImage - mixed [systemfilepath or PageImageObject] to/from a PNG with transparency return: pim - (class handle) Here you have to pass a tile png with transparency (e.g. something between 150-300 px?) to your bigger images. It got repeated all over the memory image starting at the top left corner.
      -------------------------------------------------------------------

      * watermarkText

      watermarkText($text, $size=10, $position='center', $padding=2, $opacity=50, $trueTypeFont=null)
      param: $text - (string) the text that you want to display on the image param: $size - (integer) 1 - 100, unit = points, good value seems to be around 10 to 15 param: $position - (string) is one out of: N, E, S, W, C, NE, SE, SW, NW,
      - or: north, east, south, west, center, northeast, southeast, southwest, northwest
      default is 'center' param: $padding - (integer) 0 - 25, default is 2, padding to the borders in percent of the images length! param: $opacity- (integer) 1 - 100, default is 50 param: $trueTypeFont - (string) systemfilepath to a TrueTypeFont, default is freesansbold.ttf (is GPL & comes with the module) return: pim - (class handle) Here you can display (dynamic) text with transparency over the memory image. You have to define your text, and optionally size, position, padding, opacity for it. And if you don't like the default font, freesansbold, you have to point to a TrueTypeFont-File of your choice.
      Please have a look to example output: http://processwire.com/talk/topic/4264-release-page-image-manipulator/page-2#entry41989
      -------------------------------------------------------------------





      PageImage Manipulator - Example Output


    • By d'Hinnisdaël
      Format Datetime fields as Carbon instances.
      You can find the latest release and the complete readme on Github.
      Installation
      composer require daun/datetime-carbon-format Usage
      All Datetime fields will now be formatted as Carbon instances instead of strings. Some examples:
      // $page->date is a Datetime field // Output format: j/n/Y echo $page->date; // 20/10/2020 echo $page->date->add('7 days'); // 27/10/2020 echo $page->date->format('l, F j'); // Monday, October 20 echo $page->date->year; // 2020 echo $page->date->diffForHumans(); // 28 minutes ago Frontend only
      The ProcessWire admin seems to expect datetime fields to be strings. This module will only return Carbon instances on frontend page views.
      Date output format
      When casting a Carbon instance to a string (usually when outputting the field in a template), the field's date output format will be respected.
      Links
      GitHub • Readme • Carbon docs
       
       
      PS. I remember reading about a Carbon module in a recent newsletter, but couldn't find it anywhere. Was that you, @bernhard?
    • By MoritzLost
      TrelloWire
      This is a module that allows you to automatically create Trello cards for ProcessWire pages and update them when the pages are updated. This allows you to setup connected workflows. Card properties and change handling behaviour can be customized through the extensive module configuration. Every action the module performs is hookable, so you can modify when and how cards are created as much as you need to. The module also contains an API-component that makes it easy to make requests to the Trello API and build your own connected ProcessWire-Trello workflows.
      Warning: This module requires ProcessWire 3.0.167 which is above the current stable master release at the moment.
      Features
      All the things the module can do for you without any custom code: Create a new card on Trello whenever a page is added or published (you can select applicable templates). Configure the target board, target list, name and description for new cards. Add default labels and checklists to the card. Update the card whenever the page is updated (optional). When the status of the card changes (published / unpublished, hidden / unhidden, trashed / restored or deleted), move the card to a different list or archive or delete it (configurable). You can extend this through hooks in many ways: Modifiy when and how cards are created. Modify the card properties (Target board & list, title, description, et c.) before they are sent to Trello. Create your own workflows by utilizing an API helper class with many convenient utility methods to access the Trello API directly. Feedback & Future Plans
      Let me know what you think! In particular:
      If you find any bugs report them here or on Github, I'll try to fix them. This module was born out of a use-case for a client project where we manage new form submissions through Trello. I'm not sure how many use-cases there are for this module. If you do use it, tell me about it! The Trello API is pretty extensive, I'll try to add some more helper methods to the TrelloWireApi class (let me know if you need anything in particular). I'll think about how the module can support different workflows that include Twig – talk to me if you have a use-case! Next steps could be a dashboard to manage pages that are connected to a Trello card, or a new section in the settings tab to manage the Trello connection. But it depends on whether there is any interest in this 🙂 Links
      Repository on Github Complete module documentation (getting started, configuration & API documentation) TrelloWire in the modules directory Module configuration

×
×
  • Create New...