Jump to content
kongondo

Menu Builder

Recommended Posts

On 6/13/2019 at 4:31 PM, uiui said:

Has anyone ever had the issue that changes to a menu won't save anymore? After adding page number 89 moving items isn't possible anymore as the change won't be saved. This is the case independent of the last page I add or where I move that page.

We had this issue recently, it's because of the limit of Input variables in your PHP configuration. Adjusting the value of max_input_vars in your php.ini file to a larger number will increase the number of items you can save 🙂

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
21 minutes ago, Asimov said:

We had this issue recently, it's because of the limit of Input variables in your PHP configuration. Adjusting the value of max_input_vars in your php.ini file to a larger number will increase the number of items you can save 🙂

Thanks @Asimov ! Excellent response! Welcome to the forums.

Share this post


Link to post
Share on other sites

Hello,

I need some help please. 😉 With "configuring the menu" and adding some additional stuff to my mobile menu, but not really sure how to do that.

I would like my Logo to show in my mobile menu, and I would also like the language switcher there, but cant figure it out. I tried all sorts of things but cant make it work.

My html looks like this: In html the logo is there, but when I try tu give it to menubuilder code it is gone. 

Spoiler

    <nav id="ro-main-nav" class="ro-main-nav-style-1">
      <div class="container">
        <div class="ro-brand"><a href="index.html"><img src="javascript:if(confirm('http://mysite.com/images/logo.svg\n\nThis file was not retrieved because it was filtered out by your project settings.\n\nWould you like to open it from the server?'))window.location='http://mysite.com/images/logo.svg'" alt="Logo"/><img src="javascript:if(confirm('http://mysite.com/images/logo.svg\n\nThis file was not retrieved because it was filtered out by your project settings.\n\nWould you like to open it from the server?'))window.location='http://mysite.com/images/logo.svg'" alt="Logo"/></a></div>
        <ul class="ro-nav-content text-center">
          <li class="visible-xs"><a href="index.html"><img src="javascript:if(confirm('http://mysite.com/images/logo.svg\n\nThis file was not retrieved because it was filtered out by your project settings.\n\nWould you like to open it from the server?'))window.location='http://mysite.com/images/logo.svg'" alt="Logo"/></a></li>
          <li><a href="index.html">HOME</a>
            <ul class="ro-sub-nav">
              <li><a href="basic.html">Link 1</a></li>
              <li><a href="fullwidth.html">Link 2</a></li>
              <li><a href="fullheight.html">Link 3</a></li>

            </ul>
          </li>
          <li><a href="about.html">PAGES</a>
            <ul class="ro-sub-nav">
              <li><a href="about.html">About Us</a></li>
              <li><a href="404.html">Page 2</a></li>
            </ul>
          </li>
          <li><a href="service.html">SERVICES</a></li>
          <li><a href="shop.html">SHOP</a>
            <ul class="ro-sub-nav">
              <li><a href="product.html">Product Page</a></li>
              <li><a href="cart.html">Page</a></li>
              <li><a href="checkout-1.html">Also page</a></li>
            </ul>
          </li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
        <div id="ro-hamburger" class="ro-hamburger visible-xs pull-right"><span></span></div>
      </div>
    </nav>

I've tried with:

Spoiler

<nav id="ro-main-nav" class="ro-main-nav-style-1">
      <div class="container">
        <div class="ro-brand"><a href="<?=$config->urls->root;?>"><img src="<?=$pages->get("/Nastavitve/")->header_logo->url?>'" alt="logo"/></a></div>
          <?php 
                        $menu = $modules->get('MarkupMenuBuilder');
                        $options = array(

                            'wrapper_list_type' => 'ul',// ul, ol, nav, div, etc.
                            'list_type' => 'li',// li, a, span, etc.
                            'menu_css_id' => '',// a CSS ID for the menu
                            'menu_css_class' => 'ro-nav-content text-center',// a CSS Class for the menu
                            'submenu_css_class' => 'ro-sub-nav',// CSS Class for sub-menus
                            'has_children_class' => 'ro-sub-nav',// CSS Class for any menu item that has children
                            'first_class'=>'',// CSS Class for the first item in 
                            'last_class' => '',
                            'current_class' => 'active',
                            'default_title' => 0,// 0=show saved titles;1=show actual/current titles
                            'include_children' => 4,// show 'natural' MB non-native descendant items as part of navigation
                            'm_max_level' => 1,// how deep to fetch 'include_children'
                            'current_class_level' => 1,// how high up the ancestral tree to apply 'current_class'
                            'default_class' => '',// a CSS class to apply to all menu items
                        );
                        echo $menu->render(1163, $options);
                        ?>

        <div id="ro-hamburger" class="ro-hamburger visible-xs pull-right"><span></span></div>
      </div>
    </nav>

but there is no logo inside. I also tried with both upper codes and added images to them but not working.

And second question, I would also like to put language switcher to it, not sure how to combine this ...

Spoiler

<ul class="ro-nav-content text-center">
<?php
$savedLanguage = $user->language;

foreach($languages as $language) {
  if($language->id == $savedLanguage->id) continue;
  if(!$page->viewable($language)) continue;
  $user->language = $language;
  echo "<li><a href='$page->url'>$language->title</a></li>";
}
$user->language = $savedLanguage;

?>
</ul>

I hope u understand what Im trying to do. Any help would be appreciated. 😉

Thank you

R

Share this post


Link to post
Share on other sites

HI there, 

Very nice module thank you.

I would like to put a class in each of the ul of the sub menus I have in my menu. It seems that through the admin interface or the $option of the render() function I can't achieve this. Is this correct ?

Then would the only  way to do this is the getMenuItems() function and coding the menu's markup ?

Thanks 

Share this post


Link to post
Share on other sites

ok... I am answering my own (stupid) question in case it's of any help to somebody.

To add a class in the ul of each submenu. Use the 'submenu_css_class' in the $option array. 

Share this post


Link to post
Share on other sites

Hey guys, I've been using the MenuBuilder for quite a few projects (thanks @kongondo for the great module and support!), however this time it is my first when I need to use a menu in the sidebar if some pages are added to it. It all works as soon as I add a few items to the menu, however there is one little issue I am having - not knowing how to show the block title ONLY if the menu contains some items added. I've been looking through the module functions etc. to figure it out, however for some reason I am always getting the items count as 1 even though I've added 9.

<?php
        //Building the array of options. The ones that are not used can be removed
        //They are left here for the learning process only.
        $options = array(
         'wrapper_list_type' => 'ul',// ul, ol, nav, div, etc.
         'list_type' => 'li',// li, a, span, etc.
         'menu_css_id' => '',// a CSS ID for the menu
         'menu_css_class' => 'category-list',// a CSS Class for the menu
         'current_class' => 'active',
         'default_title' => 0,// 0=show saved titles;1=show actual/current titles
         'include_children' => 4,// show 'natural' MB non-native descendant items as part of navigation
         'm_max_level' => 1,// how deep to fetch 'include_children'
         'current_class_level' => 1,// how high up the ancestral tree to apply 'current_class'
        );

        // Render the menu by title
        $cat_menu = $menu->render(1108, $options);
        echo "This menu has: " . count($cat_menu);
        echo $cat_menu;

       ?>	

The big question here is, how can I add a check if my menu with a specific ID/title would contain some items or is just empty in order to show or not the block title etc.?

Share this post


Link to post
Share on other sites
On 12/4/2019 at 3:02 AM, MilenKo said:

Hey guys, I've been using the MenuBuilder for quite a few projects (thanks @kongondo for the great module and support!),

Hi @MilenKo. Apologies for the late response.

I am not sure what you mean by block title.

However, this count() will not work:

echo "This menu has: " . count($cat_menu);

as $menu->render() returns a string. PHP will return 1 (a boolean) but if you had Tracy Debugger it would throw an error about using count() on a non-iterable variable.

If you need to know the number of items you can use the method getMenuItems() introduced here and documented here. You can use the method to either return menu items as a an normal PHP array or as a WireArray. In the examples outlined in the first link above, you can use getMenuItems() with a custom recursive function to render your menu however you wish. In your case though, you can just use it to check number of items. For example:

$mb = $modules->get('MarkupMenuBuilder');
// menu items as PHP Array
$menuItemsAsArray = $mb->getMenuItems(1108, 1, $options);// param 2 = 1: return array
echo 'Number of Menu Items (count($menuItemsAsArray)): ' .  count($menuItemsAsArray);
// menu items as WireArray Object
$menuItemsAsObject = $mb->getMenuItems(1108, 2, $options);// param 2 = 2: return WireArray (the default)
echo 'Number of Menu Items ($menuItemsAsObject->count): ' .  $menuItemsAsObject->count;

In case you just want to know if a menu item is not empty, you can simply check if the return value of $cat_menu is a string. For example:

 // Render the menu by title
 $cat_menu = $menu->render(1108, $options);
 if(is_string( $cat_menu)) {
	echo $cat_menu;
 }

This, however, will not give you the count as explained above. You'd need getMenuItems() for that.

In case you want to know if a menu item is a parent/has children, etc, you can use the WireArray option of getMenuItems() as shown above and use ProcessWire WireArray methods to filter items. For instance:

$someChildItems = $menuItemsAsObject->find("parentID=2");
// OR
$someParents = $menuItemsAsObject->find("isParent=1");

I hope this helps.

Share this post


Link to post
Share on other sites

/site/modules/ProcessMenuBuilder/ProcessMenuBuilder.css

178 line

div.handle i.fa-trash {
    position: relative;
    border: none;
    padding: 0.6em;
    /*margin-right: -2.125em;*/
    top: 1px;
}

fix: add comment margin

 

Знімок екрану.png

  • Like 2

Share this post


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

fix: add comment margin

Thanks. I only noticed this yesterday but have not had time to fix it.

Share this post


Link to post
Share on other sites

Hi guys, hi @kongondo,

I have a menu which I built using your code from some pages back:

Quote

function buildMenuFromObject($parent = 0, $menu, $first = 0) {
    if(!is_object($menu)) return;

    $out = '';
    $has_child = false;

    foreach ($menu as $m) {
        $newtab = $m->newtab ? " target='_blank'" : '';
        // if this menu item is a parent; create the sub-items/child-menu-items
        if ($m->parentID == $parent) {// if this menu item is a parent; create the inner-items/child-menu-items
            // if this is the first child
            if ($has_child === false) {
                $has_child = true;// This is a parent
                if ($first == 0){
                    $out .= "<ul class='mainMenu js-mainMenu clearfix'>\n";
                    $first = 1;
                }
                else $out .= "\n<ul class='subMenu js-subMenu'>\n";
            }

            $class = $m->isCurrent ? ' class="current"' : '';

            // a menu item
            $out .= '<li' . $class . '><a href="' . $m->url . '"' . $newtab . '>' . $m->title;
            // if menu item has children
            if ($m->isParent) {
                $out .= '</a><span class="icon submenu__expand js-submenu__expand icon-cheveron-down"></span>';
            }

            else $out .= '</a>';

            // call function again to generate nested list for sub-menu items belonging to this menu item.
            $out .= buildMenuFromObject($m->id, $menu, $first);
            $out .= "</li>\n";

        }// end if parent

    }// end foreach

    if ($has_child === true) $out .= "</ul>\n";

    return $out;

}

 

which works fine, although I have a question regarding the submenus. I have selected to include all native descendants of my page into the submenu. which generates something like this:

<ul>
  <li> Projects </li>
  <ul class="submenu">
  	<li class="submenuItem">
      Project 1
    </li>
    <li class="submenuItem">
      Project 2
    </li>
    ... -> render all remaining Project objects which are children of the Projects Page
  </ul>

This, however, bloats my submenu, if I have a lot of projects. Is there some option to limit the amount of projects that are rendered, to e.g. 10 and then provide a link as the last project item which leads to a project list view which displays all projects?

I just don't quite get the code; e.g. where the code fetches the native descendants of the ``projects`` page.

Any help would be appreciated.

Greetings, derelektrischemoench

Share this post


Link to post
Share on other sites

Update: Menu Builder 0.2.6

Changelog

  1. Added the properties numChildren, totalChildren and showMoreText for use with getMenuItems()
  2. Added option maximum_children_per_parent to limit the maximum number of (included) children a menu item can return. Thanks @derelektrischemoench for inspiration/request.
  3. Fixed CSS issue that affected menu items' trash cans in the backend. Thanks @duncan.
  4. Refactored code to improve efficiency.

In dev branch only for testing.

I have also updated the docs, especially around getMenuItems().

@derelektrischemoench,

See this gist for an example recursive menu builder function that uses maximum_children_per_parent and showMore.

OK, breaktime over, back to Padloper! :-).

  • Like 2

Share this post


Link to post
Share on other sites
On 12/17/2019 at 1:44 PM, kongondo said:

Update: Menu Builder 0.2.6

Changelog

  1. Added the properties numChildren, totalChildren and showMoreText for use with getMenuItems()
  2. Added option maximum_children_per_parent to limit the maximum number of (included) children a menu item can return. Thanks @derelektrischemoench for inspiration/request.
  3. Fixed CSS issue that affected menu items' trash cans in the backend. Thanks @duncan.
  4. Refactored code to improve efficiency.

In dev branch only for testing.

I have also updated the docs, especially around getMenuItems().

@derelektrischemoench,

See this gist for an example recursive menu builder function that uses maximum_children_per_parent and showMore.

OK, breaktime over, back to Padloper! :-).

Hi Kongondo,

thanks for including my input and change requests :) very cool! I'm gonna give it a try, asap.

Greetings

derelektrischemoench

Share this post


Link to post
Share on other sites

Hi kongondo and hi all guys!

Is there a way to put a new field (ex: description) on each menu entries? I like to have something like:


Title: Home
Description: My beautiful home page
URL: /my-beautiful-url/

I wait your feedback.

Thanks and have a nice day!

Share this post


Link to post
Share on other sites
On 1/8/2020 at 5:52 PM, e0f said:

Is there a way to put a new field (ex: description) on each menu entries? I like to have something like:


Title: Home
Description: My beautiful home page
URL: /my-beautiful-url/

I wait your feedback.

Thanks and have a nice day!

Hi @e0f,

Currently, this is not doable out of the box. However, using the method getMenuItems() (see a few posts up for examples), you can use the property pagesID (or index pages_id if getting back array of menu items) to get ($pages->get($m->pageID), for example) the respective ProcessWire pages of the menu items and return the custom fields you want, e.g. description. Having said that, I would not recommend this. It seems like an overkill and may not be very performant based on the number of menu items and other factors.

Perhaps if you could explain your use case, I would see if I can add an option to retrieve the values of simple fields (text, integers, dates, etc) for use with getMenuItems(). MenuBuilder is primarily for building navigation menus. From your example, it seems you are using it for a different purpose? Maybe provide a fuller example so that I can get my head around this.

  • Like 1

Share this post


Link to post
Share on other sites
12 hours ago, kongondo said:

Hi @e0f,

Currently, this is not doable out of the box. However, using the method getMenuItems() (see a few posts up for examples), you can use the property pagesID (or index pages_id if getting back array of menu items) to get ($pages->get($m->pageID), for example) the respective ProcessWire pages of the menu items and return the custom fields you want, e.g. description. Having said that, I would not recommend this. It seems like an overkill and may not be very performant based on the number of menu items and other factors.

Perhaps if you could explain your use case, I would see if I can add an option to retrieve the values of simple fields (text, integers, dates, etc) for use with getMenuItems(). MenuBuilder is primarily for building navigation menus. From your example, it seems you are using it for a different purpose? Maybe provide a fuller example so that I can get my head around this.

Thanks for answer kongondo.

I need to have a little description appear under my mega menu.

In frontend menu I'll have something like "Home" and under it a little description of the menu entry (ex: my beautiful home page).

So each menu voices will have a custom description on desktop version.

I hope is all clear now. Let me know if you need more infos!

Have a nice day,

Share this post


Link to post
Share on other sites

Update: Menu Builder 0.2.7

Changelog

  1. Added the property extra_fields for use with getMenuItems() ONLY. This enables returning the page field values for some selected Fieldtypes. For example, the description field in the page corresponding to the menu item. Thanks @e0f for the inspiration. Full documentation of this new feature is available here.
  2. Menus in multi-lingual sites can now be called using their multi-lingual titles or names irrespective of the current user's language. For example, a multi-lingual site with English, German and Finnish languages could have a menu with the respective titles My Awesome Menu / Mein Tolles Menü / Oma Mahtava Valikko. Any of these titles can be used in the code to call the menu (using render() or getMenuItems() methods). [PS: blame you-know-who for these language translations :-)]
  3. Changed the way new menus are added. Only one menu can be added at a time. The title field/input is multi-lingual ready. See screens below.
  4. Improved the backend GUI when viewing locked menus. Only the menu items and and exit button are shown in such cases.
  5. Fixed bug that allowed access to unpublished menus for frontend rendering.
  6. Updated the documentation
  7. Refactored code to improve efficiency.

In dev branch only for testing.

Screenshots

a. Add Menu (Multi-lingual)

mb-version-27-add-menu-multilingual-screen.thumb.png.1c5654f2eae1e95c5fcee2b4baf5f1d1.png

 

b. Edit Menu (Multi-lingual)

mb-version-27-edit-menu-multilingual-screen.thumb.png.2c5d93ef748b5b9298f51d4ed67ee366.png

c. Locked Menu

mb-version-27-locked-menu-screen.thumb.png.991346ad1977d5d2216c2c872ed96e95.png

d. An example usage of extra_fields (I am no designer, so yeah, nothing much to see here...but you get the idea :-))

mb-version-27-extra-fields-screen.thumb.png.4f981af877a394d4d2175f0294b1181d.png

 

Thanks for testing!

  • Like 2

Share this post


Link to post
Share on other sites

i added new option in menu options because i needed css class in <a> tag, searched for a while and didn't find any example so had to do the following.

$NavOptions = array(
                                'wrapper_list_type' => 'ul', // ul, ol, nav, div, etc.
                                'list_type' => 'li', // li, a, span, etc.
                                'menu_css_id' => 'navbarSupportedContent', // a CSS ID for the menu
                                'menu_css_class' => 'navbar-nav ml-auto', // a CSS Class for the menu
                                'current_class' => 'active',
                                'default_title' => 0, // 0=show saved titles;1=show actual/current titles
                                'default_class' => 'nav-item', // a CSS class to apply to all menu items
                                'ahref_class'=>'nav-link'
                            );

 

added following line in MarkupMenuBuilder.module
$this->set('linkClass', isset($options['ahref_class']) ? $options['ahref_class'] : '');

// if $iTag is empty, apply css id and classes to <a> instead
if(!$iTag) $out .= "\n\t<a{$itemCSSID}{$class}{$newtab} href='{$m->url}'>{$m->title}</a>";
else $out .= "\n\t<{$iTag}{$itemCSSID}{$class}>\n\t\t<a{$newtab} href='{$m->url}' class='{$o->linkClass}'>{$m->title}</a>";

suggest me if there is any better way out!!

  • Like 2

Share this post


Link to post
Share on other sites

Welcome to the forums @Neeraz,

5 hours ago, Neeraz said:

because i needed css class in <a> tag,

It was decided early on to add classes to the <li> instead of the <a>, as it was the usual practice.

6 hours ago, Neeraz said:

suggest me if there is any better way out!!

Getting the <a> via CSS is quit easy, for instance...

#menu li a {
/* your styles here*/
}

You can be as specific as  you want with your CSS.

6 hours ago, Neeraz said:

added following line in MarkupMenuBuilder.module

Not a good idea as this will get overwritten next time you upgrade Menu Builder :-).

Share this post


Link to post
Share on other sites
8 hours ago, kongondo said:

Welcome to the forums @Neeraz,

It was decided early on to add classes to the <li> instead of the <a>, as it was the usual practice.

Getting the <a> via CSS is quit easy, for instance...


#menu li a {
/* your styles here*/
}

You can be as specific as  you want with your CSS.

Not a good idea as this will get overwritten next time you upgrade Menu Builder :-).

i know this but i have no permission to modify customer css file so had to do this, i suggest you to add the same option in future update so it will be more flexible 🙂

  • Like 1

Share this post


Link to post
Share on other sites

Hi there,

I'm with @Neeraz - it would be great to have the possibility to also add a class to the link element (for what reason ever).
Maybe @kongondo it is not a big deal for you to add that functionality to the module? That would be great 👌.

Have a nice Friday 😉

  • Like 3

Share this post


Link to post
Share on other sites

Just a question that might be answered in a previous post. If I want to apply a class to the <a> tag how would I do this using the module options?

Share this post


Link to post
Share on other sites

Using this module for the first time, menu created and saved but does not render. Looks like by default it's saved as un-published.

I was expecting to find publish settings as part of the menu settings, however the only way to publish it is via the page tree: Admin > Setup > Menu Builder > *Menu*
Is this intentional? I think from a usability perspective being able to publish the menu as you create it would be helpful.

The only way I could get menu builder to render items was update line 218, MarkupMenuBuilder to:
For some unknown reason, PW doesnt skip language.

// skip inactive language page @note: PW will do this automatically for 'include_children'
                if(!$p->viewable($language&& $languagecontinue;

Share this post


Link to post
Share on other sites
On 2/5/2020 at 5:55 AM, Neeraz said:

i know this but i have no permission to modify customer css file so had to do this, i suggest you to add the same option in future update so it will be more flexible

 

On 2/21/2020 at 8:27 AM, Bacelo said:

Maybe @kongondo it is not a big deal for you to add that functionality to the module? That would be great 👌.

OK. Added to my todo 😀

Share this post


Link to post
Share on other sites
16 hours ago, Mackski said:

the only way to publish it is via the page tree: Admin > Setup > Menu Builder > *Menu*

Actually, this is not true 😀.

I don't know what version you are using but there has always been a save as unpublished or published during menu creation and an unpublish/publish action that can be applied to existing menu items in the menus list/table. See the big green shiny buttons 😁.

Create menu before version 027 

mm_add_new_menu_versions_less_than_027.thumb.png.abef7bcbff9f1c31e4add8ea310b46ff.png

Create menu version since version 027

mm_add_new_menu_versions_from_027.thumb.png.5215c34d9985bcd69fa85b42a36c0f81.png

Unpublish/Publish post menu creation

mm_unpublish_publish_existing_menu.thumb.png.8bdbddb85f2161f191d1144be8d7e145.png

Am I missing something?

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 hellerdruck
      Hi all
      I need to export all the texts from a website to a translation company (as json or csv or txt...). How can this be done? Of course manually, but this website is huge and it would take me years...
      Also, as a second step, importing the translation ...
      Any ideas anyone? Tutorials? Plugins?
      Thanks for your help.
    • By joshua
      As we often use Matomo (former known as Piwik) instead of Google Analytics we wanted to embed Matomo not only in the template code but also via the ProcessWire backend.
      That's why I developed a tiny module for the implementation.
      Right now it's not heavily tested, so I would call it an "alpha" status.
      The module provides the possibility to connect to an existing Matomo installation with the classical site tracking and also via the Matomo Tag Manager.
      If you have also PrivacyWire installed, you can tell MatomoWire to only load the script, if the user has accepted cookies via PrivacyWire.
      To offer an Opt-Out solution you can choose between the simple Opt-Out iFrame, delivered by your Matomo installation, or a button to choose cookies via PrivacyWire.
      You'll find the current (alpha) state in this git repo: https://github.com/blaueQuelle/matomowire
      As soon as it's better tested, I'll add it to the module repo.
      I'm looking forward to hear your feedback!
    • By FireWire
      Hello community!

      I want to share a new module I've been working on that I think could be a big boost for multi-language ProcessWire sites.

      Some background, I was looking for a way for our company website to be efficiently translated as working with human translators was pretty laborious and a lack of updating content created a divergence between languages. I, and several other devs here, have talked about translation integrations and have recognized the power that DeepL has. DeepL is an AI deep learning powered service that delivers translation quality beyond any automated service available. After access to the API was opened up to the US, I built Fluency, a DeepL translation integration for ProcessWire.
      Fluency brings automated translation to every multi-language field in the admin, and also provides a translation tool allowing the user to translate their text to any language without it being inside a template's field. With Fluency you can:
      Translate any plain textarea or text input Translate any CKEditor content (yes, with markup) Translate page names for fully localized URLs on every page Translate your in-template translation function wrapped strings Translate modules DeepL offers translations to the following languages: English (US), English (UK), German, French, Spanish, Portuguese (EU), Portuguese (Brazil, Italian, Dutch, Polish, Russian, Japanese, Chinese (Simplified)
      Installation and usage is completely plug and play. Whether you're building a new multi-language site, need to update a site to multi-language, or simply want to stop manually translating a site and make any language a one-click deal, it could not be easier to do it. Fluency works by having you match the languages configured in ProcessWIre to DeepL's. You can have your site translating to any or all of the languages DeepL translates to in minutes (quite literally).
      Let's break out the screenshots...
      When the default language tab is shown, a message is displayed to let users know that translation is available. Clicking on each tab shows a link that says "Translate from English". Clicking it shows an animated overlay with the word "Translating..." cycling through each language and a light gradient shift. Have a CKEditor field? All good. Fluency will translated it and use DeepL's ability to translate text within HTML tags. CKEditor fields can be translated as easily and accurately as text/textarea fields.

      Repeaters and AJAX created fields also have translation enabled thanks to a JavaScript MutationObserver that searches for multi-language fields and adds translation as they're inserted into the DOM. If there's a multi-language field on the page, it will have translation added.

      Same goes for image description fields. Multi-language SEO friendly images are good to go.

      Creating a new page from one of your templates? Translate your title, and also translate your page name for native language URLs. (Not available for Russian, Chinese, or Japanese languages due to URL limitations). These can be changed in the "Settings" tab for any page as well so whether you're translating new pages or existing pages, you control the URLs everywhere.

      Language configuration pages are no different. Translate the names of your languages and search for both Site Translation Files (including all of your modules)

      Translate all of the static text in your templates as well. Notice that the placeholders are retained. DeepL is pretty good at recognizing and keeping non-translatable strings like that. If it is changed, it's easy to fix manually.

      Fluency adds a "Translate" item to the CMS header. When clicked this opens up a modal with a full translation tool that lets the user translate any language to any language. No need to leave the admin if you need to translate content from a secondary language back to the default ProcessWire language. There is also a button to get the current API usage statistics. DeepL account owners can set billing limitations via character count to control costs. This may help larger sites or sites being retrofitted keep an eye on their usage. This tool is available for all users with the page-edit permission.

      It couldn't be easier to add Fluency to your new or existing website. Simply add your API key and you're shown what languages are currently available for translation from/to as provided by DeepL. This list and all configuration options are taken live from the API so when DeepL releases new languages you can add them to your site without any work. No module updates, just an easy configuration. Just match the language you configured in ProcessWire to the DeepL language you want it to be associated with and you're done. Fluency also allows you to create a list of words/phrases that will not be translated which can prevent items such as brands and company names from being translated when they shouldn't

       
      Limitations:
      No "translate page" - Translating multiple fields can be done by clicking multiple translation links on multiple fields at once but engineering a "one click page translate" is not feasible from a user experience standpoint. The time it takes to translate one field can be a second or two, but cumulatively that may take much longer (CKEditor fields are slower than plain text fields). There may be a workaround in the future but it isn't currently on the roadmap. No "translate site" - Same thing goes for translating an entire website at once. It would be great, but it would be a very intense process and take a very (very) long time. There may be a workaround in the future but it isn't on the roadmap. No current support for Inline CKEditor fields - Handling for CKEditor on-demand hasn't been implemented yet, this is planned for a future release though and can be done. I just forgot about it because I've never really used that feature personally.. Alpha release - This module is in alpha. Releases should be stable and usable, but there may be edge case issues. Test the module thoroughly and please report any bugs via a Gitlab issue on the repository or respond here. Please note that the browser plugin for Grammarly conflicts with Fluency (as it does with many web applications). To address this issue it is recommended that you disable Grammarly when using Fluency, or open the admin to edit pages in a private window where Grammarly may not be loaded. This is an issue that may not have a resolution as creating a workaround may not be possible. If you have insight as to how this may be solved please visit the Gitlab page and file a bugfix ticket.
      Requirements:
      ProcessWire  3.0+ UIKit Admin Theme That's Fluency in a nutshell. A core effort in this module is to create it so that there is nothing DeepL related hard-coded in that would require updating it when DeepL offers new languages. I would like this to be a future-friendly module that doesn't require developer work to keep it up-to-date.
      It's Free
      This is my first real module and I want to give it back to the community as thanks. This is the best CMS I've worked with (thank you Ryan & contributors) and a great community (thank you dear reader). The only cost to use this is a subscription fee for the DeepL Pro API. Find out more and sign up here.
      Download & Feedback
      Download the latest version here
      https://gitlab.com/SkyLundy/fluency-processwire/-/archive/master/fluency-processwire-master.zip
      Gitlab repository:
      https://gitlab.com/SkyLundy/fluency-processwire
      File issues and feature requests here (your feedback and testing is greatly appreciated):
      https://gitlab.com/SkyLundy/fluency-processwire/-/issues
       
      Thank you! ¡Gracias! Ich danke Ihnen! Merci! Obrigado! Grazie! Dank u wel! Dziękuję! Спасибо! ありがとうございます! 谢谢你!

    • 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


×
×
  • Create New...