Michael Murphy

Finally had a chance to test this new functionality and have been really impressed. For those wanting to try, here are the steps that I went though using the default site profile. In the following examples I am adding two languages English and German where the pages will be viewable with the language code preceding the url like /en/ and /de/ 

 

1.Install the latest development version - here is the zip download - https://github.com/r...archive/dev.zip

 

2. Install these 3 modules

 

- Languages Support

- Languages Support - Fields

- Languages Support - Page Names

 

3. Add a new language via the Languages setup page - I think naming here is only relevant for your code and does not affect the URL of the page

 

4. Open up the home page and look at Settings tab - the name (url) field should now have a field for each language you have added. Add an indicator for each language like /en and /de

English 

/en/

 

Deutsch 

/de/

 

This acts as a language gateway for changing the language. Now when ever you visit the site via /de it will set the users language to German and all the pages in the site will display the correct German language url.

 

note: I have not worked out how to redirect the default language (which is English) to /en - it always goes to the site root / 

 

4. Add a simple language navigation switcher. This will allow users to switch the current page into the other language.

 

Edit : Refer to WillyC and Ryans language switcher further down - http://processwire.c...ge-3#entry33537

 

                echo '<ul>';
                    $lang = $user->language;
                    $langname = $lang->name == 'default' ? 'en' : $lang->name;

                    $user->language = $languages->get('default');
                    $cssClass = $langname == 'en' ? 'class="active"' : '';
                    echo '<li '.$cssClass.'><a href="'.$page->url.'">EN</a></li>';

                    $user->language = $languages->get('de');
                    $cssClass = $langname == 'de' ? 'class="active"' : '';
                    echo '<li '.$cssClass.'><a href="'.$page->url.'">DE</a></li>';

                    $user->language = $lang;    
                echo '</ul>';

I think that is pretty much it. All other PW development procedes as normal.

 

I also just switched over from the LanguageLocalizedURL module on one site - it was actually pretty easy to do - just uninstalled the module and went through the steps above - thanks soma and mcmorry for the original module - it was very useful at the time, but will be moving over this mainly so I can start using the ProCache module. I have tested the new language fields with ProCache and it also works great! Super fast, one tree multilingual sites, with the same ease as developing a regular processwire site - this is so cool!

Thanks Ryan and Antti!

 

To get the source option working with inline mode you need to download the new plugin 

 

http://ckeditor.com/addon/sourcedialog

 

and then include it in the extra plugins - sourcedialog and then in the toolbar layout - Sourcedialog. 

Thanks Ryan, this is a huge feature. Being able to do full multilingual sites, without the need for multiple trees and all from the core installation - this makes what was already a great multilingual solution, almost perfect. Looking forward to testing!

 

Could you elaborate on the situations where you think it would not be appropriate to use this new feature? I can't think of any.

 

How will this work with selectors? Can you use either language urls to get the same page? or will there be one definite url that you have to use in a selector?

 

I am also wondering how would this work with categories - if for example I am using a Page field for categories, and do the category filtering via the url segment, could I do for example

 

page-name-en/category-AA-en

and then

page-name-de/category-AA-de

to get the same result?

I would happily pay a lot of money for a comercial module that solves this problem. I am sure a lot of other freelancers and agencies would too, once the benefits of the process are clearly explained. Maybe you could also combine it with a good backup solution - "painless deployment and backups - save time and headaches when developing and iterating rapidly changing client projects"

Hello lenoir!

Someone just asked a similar question today.  Apparently it's fixed in the latest development version :

http://processwire.c...elect-commands/

Nice theme by the way

Have you tried adding this to the "TinyMCE Advanced Configuration Options" - go to the field which has TinyMCE and look under the Input tab.

If that does not work you can also add the paste text button quite easily - pastetext
Also the paste word button - pasteword

I’ve been working on a simple admin theme. I originally just wanted to add a simple dashboard area on the home page to display some quick links to key actions and documentation for clients, but I ended up doing a whole theme. The main focus of the theme is for the client / editor role, so it’s not been optimised for the developer usage yet. There are a few enhancements which are aimed at clients (opening previews in a new window, showing tree actions on hover). I have also tried to optimise it for mobile layout. You can see a preview on this video





It’s using the Bootstrap framework and Open Sans font.

The main issues I currently have are a conflict with the Bootstrap framework scripts and the older version of Jquery that ships with the PW admin. If I upgrade to Jquery 1.8.2 a lot of PW admin functionality breaks (sorting, ask select, modals). If I stick with the currently shipped version of jQuery 1.6, the bootstrap scripts do not work (drop downs, message alerts, mobile navigation).

The other big issue, is I made a few simple hacks to some core js files (/wire/modules/Process/ProcessPageList/ProcessPageList.js, and /wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js) - this was mainly to insert extra css classes here and there or to show if the tree has children. Is there a better way to do this?

Other issues I am thinking about

Is there a way to modify the “add new page” workflow? So when the user adds a new page, I’d like to change the default “You are adding a page using the …” message. Maybe this could be an additionally template field called “instructions” or “”details” ? It could be a used as a kind of “templates documentation”, which could be used to document the project for other devs and designers and for the clients / editors.

How can you modify the login screen without overriding this file (/wire/modules/Process/ProcessLogin/ProcessLogin.module)?

Also not to sure if having two save buttons is good for usability - maybe I will just have one in the header and make it fixed as you scroll.

In the TinyMCE area she would just have to select the text, click insert link and then paste in the email (with mailto: appended)

mailto:info@provisionevents.nl

Hey Antti, I also agree with you about the boxy feel. I have just been playing with the repeater element and tried to reduce the boxyness and make it similar to Renos style. Here is a screenshot



This is not fully tested and will probably break other stuff, but here is the css I used so far

.Inputfields > .InputfieldRepeater > .ui-widget-content {

padding: 0;
border:none;

}
.Inputfields > .InputfieldRepeater > .ui-widget-content .Inputfields > .Inputfield > .ui-widget-content  {

padding: 5px;
border-color: #e6e6e6; 
} 

/*add a dropshadow to the repeater inputfields */
.Inputfields > .InputfieldRepeater > .ui-widget-content .Inputfields > .Inputfield > .ui-widget-content .Inputfield {


-webkit-box-shadow: 1px 4px 5px -3px rgba(0, 0, 0, .1);
box-shadow: 1px 4px 5px -3px rgba(0, 0, 0, .1);

}


.ui-widget-content {

border-color: #e6e6e6; 
}


.Inputfields .ui-widget-header {

border-bottom:none;
border-color: #e6e6e6; 
background: #ffffff;
}

.InputfieldStateCollapsed .ui-widget-header {

border: 1px solid #e6e6e6; 
}


/*this is the repeater element handle, changing it to a solid color */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: none;
background: #b3b3b3;
}

First of all, don't worry too much, you will normally find all the problems after launching

Here are some of the things I try to do before launch :

- Check the page titles and meta descriptions. Install the Google webmaster tools to get more useful advice on how to optimise the site for search engines

https://www.google.c...ebmasters/tools

- Create an xml site map and submit to Google (via Webmaster tools) and Bing (http://www.bing.com/toolbox/webmaster)

- If this is the an update of an existing site, setup redirects for old pages to new pages - you can check what old links are currently indexed by Google and start with the top ones. The redirect plugin is great for managing this (http://modules.proce...cess-redirects/).

- Check and update the 404 error page

- Check that all your forms are working and being delivered to email recipients (not stuck in spam).

- Change the admin url from /processwire/ to something more secure

- Turn off any debug modes

- Disable any test accounts and put an extra secure password on the master account.

- Check what print layout looks like (or make print style sheet)

- Browser testing - this is tough one to summarise - there are some sites that let you take screenshots, but the best way I have found is to have multiple virtual machines with IE7, IE8 and IE9 which can be used for more detailed testing and debugging. Then there is mobile device testing!

- Check for broken links and correct redirects. http://validator.w3.org/checklink

- Performance testing - you might want to check for any big performance issues. ySlow is a nice tool for checking and  provides some good tips that might be useful for speeding up the site. Don't be too disheartened by the results, not even the big sites get top marks.

http://developer.yahoo.com/yslow/

- Setup analytics to track usage - Google analytics

- Setup monitoring so you know the site is up and running - I really like pingdom.com - https://www.pingdom.com/

- Backup the site files and database!

Then I like to say a little website launch prayer… "dear internet gods, I know things will go wrong but please let the issues be small and easy to fix. amen."

Thanks Soma, that was it!
I enabled "Allow Page Numbers?" on the language gateway template and now it works.

Hi Soma,

First of all, thanks for helping to build and support this module. This is my preferred way to build multilingual sites and I hope to use this module in a lot of projects.

I am testing this module on two different installations.

The first installation has just been upgraded from 2.2.0.1 to 2.2.9. It has quite a few modules installed.

The second installation is a test site I am using to play with the module. I recently upgraded it from 2.2.6 to 2.2.9. It is a pretty clean install and only has one extra module installed - an AdminHotKeys plugin - not sure who developed that

They both have the latest module LanguageLocalizedURL installed 0.1.0

Both are setup in the root folder.

On my test installation I have just setup a very basic pagination example as shown here

http://processwire.c...rkup-pager-nav/

$results = $pages->find("id>1, limit=10, sort=title");
echo $results->render();

and it also has the same issues.

Let me know if you need further information.

Hi Michael,
I have not seen any fields like that, but as an alternative you could try using a "page" type field. It would create a new page for each tag, but has a nice friendly interface for the user to manage them.

1. Add a new page in your tree called "Tags Collection", and make it hidden.
2. Create a new field called Tags and make it a "page" type.
3. On the input field settings, make the "Parent of selectable page(s)" the Tags Collection page
4. For the "Input field type" try one of : Select Multiple, asmSelect or PageListSelectMultiple (I prefer the asmSelect)
5. Check the “Allow new pages to be created from field?” to allow the user to easily add new tags directly from the field

Hi mrs,

Are you using a language gateway approach like on the example website? e.g. /en/contact or /de/contact where /en and /de are gateways that change the language.

If you have a language gateway setup you could use something like this :

//what is the current language
$lang = $user->language;


//this line sets the language to sites default. 
//"default" is the name of the sites primary language, in this case it's English
$user->language = $languages->get("default");

echo "<li><a href='/en{$page->url}'>EN</a></li>";

//this sets the language to German, so you can get the pages URL in German
$user->language = $languages->get("de");

echo "<li><a href='/de{$page->url}'>DE</a></li>";

//this sets the language back to current one again
$user->language = $lang;

Hi Joe,

One of the nice features of the multilanguage fieldtypes is that when they are empty, they will fall back to the default populated field.

For example, if you have a multilanguage title in English and not in German, when outputting $page->title (and the user language is in German) - it will output the English title.