Macadames' blog

Le silence est d'or, jusqu'à ce qu'il devienne plomb.

Santa Montega Blues

leave a comment »

Un petit blog sur mon village

http://moltifao.wordpress.com/

Publicités

Written by macadames

15, février 2011 at 7:58

Publié dans Uncategorized

Bonne année 2011

with 2 comments

Avec un peu de retard je vous souhaite une excellente année 2011, et en profite pour donner de mes nouvelles.

L’année démarre en trombe pour ce qui me concerne, nouveau job, nouveaux projets.

Me voilà surtout embarqué sur un projet d’outil de réseau social pour l’entreprise en Django. Ca s’appelle Twistranet, c’est fort sympathique et bientôt dans vos bacs. Ce projet est entièrement supporté par Numericube, la société dans laquelle j’oeuvre depuis Octobre 2010 et à qui je souhaite évidemment le plus grand succès.

Nouveauté qui marquera sans doute 2011, ça se passe du côté des frameworks web légers en Python : Pyramid est le projet dont tout le monde parle et qui réunit des développeurs venus des mondes Pylons, repoze.bfg (zope donc) et TurboGears. C’est très prometteur, d’ailleurs avec mes amis Gilles et Kamon on a prévu de sprinter sur le sujet avant fin Janvier, si d’autres sont intéressés, qu’ils se fassent connaître rapidement.

Autre nouvelle intéressante, la dernière version de ckeditor (3.5) est sorti en Décembre, toujours très au-dessus de la mêlée des éditeurs Wysiwyg open source. Je suis toujours partant pour améliorer le produit Plone (et ses dépendances), si vous avez un projet en ce sens n’hésitez pas à me contacter.

Pace e salute !

 

 

Written by macadames

14, janvier 2011 at 11:38

Publié dans Uncategorized

Three Plone addons – part 3 : CKEditor for Plone

with one comment

Three Plone addons – part 3 : CKEditor for Plone

Why Plone4 is so cool ? because you can create easily new addons in a pure python way, look at this new addon  called « CKEditor for Plone ».

A screencast here :

http://www.youtube.com/watch?v=ICuMYWncX8M&feature=channel

More information here :

http://plone.org/products/collective.ckeditor

Some lines of code are used to take original ckeditor svn code and place it in a Zope browser resource (because Zope is really strict about XML/XHTML we must do this little work, i hope i could replace it by a simple svn-externals in future).

Other lines of code are here to call dependencies (collective.plonefinder to search server resources, collective.quickupload for fast upload, see previous posts).

A small javascript « select resources » code is here to communicate with Collective Plone Finder.

The most part of code is CKEditor Plone control panel because it’s important for managers to allow or disallow features, toolbars, or some plugins on their Plone site.

The last part of code is the CKEditor integration in plone wysiwyg templates.

Hmm, that’s all.

Some people ask me, why CKEditor ? Plone4 has Tiny MCE …

Because :

– CKEditor is fast (really fast)

– CKEditor is accessible ( http://www.w3.org/WAI/WCAG1A-Conformance)

– because i’m a FCKeditor’s friend since 10 years, Fred (Frederico Caldeira Knabben) had no chance, his initials offend some English spoken people, now than the software name is more accessible perhaps more people will be interested in its features ?

– Plone needs to be good but it also needs to have reliable addons, and CKEditor cames with a good Plone integration (relax with collective.plonefinder and collective.quickupload)

Written by macadames

24, septembre 2010 at 11:05

Three Plone addons – part 2 : Collective Plone Finder

leave a comment »

Three Plone addons – part 2 : Collective Plone Finder

Collective Plone Finder is a tool for Plone developpers that can be used to find and select elements in a Plone site. The pypi name is « collective.plonefinder » with one dependency called « collective.quickupload »

It’s a widget’s helper, and you will find in the code a simple form lib widget, it’s an example of how you can use this product. In the README.TXT, you will find a way to use the formlib widget in a Plone portlet.

In this screencast, CPF is used in a portlet named « CG30 Direct Access Portlet » (CG30 is a client) :

http://www.youtube.com/watch?v=X4PENLVJizM&feature=channel

The goal of Collective Plone Finder is not to be used as a standalone product. But, in this second screen cast and for demonstration purpose, we use it in a full browser screen just to show you the different potential uses. Look at the address bar where you can pass some params in querystring.

http://www.youtube.com/watch?v=VZLd97SdKJM&feature=channel

More information about this package can be found here :

http://plone.org/products/collective.plonefinder

This product is not complete (need more documentation, unit tests, some refactorisation, and some ajax popup functions are not finished at this time, 1.0.0), but i released it because it was an important part of my third autumn Plone production « CKEditor for Plone », see the next post.

I know that many documentation is missing, free time is too short, so if you need to integrate quickly CPF features in your own widget, at this time the better way is to read the code (really easy to understand, it’s Python + Plone,  a devel dream). In future i hope  many good evolutions will came with Plone4 new energy.

Written by macadames

24, septembre 2010 at 11:05

Three Plone addons – part 1 : Plone Quick Upload

with 9 comments

Three Plone addons – part 1 : Plone Quick Upload

As good things usually happen in threes, i present you three new Plone addons i released in September 2010, i hope you will find them useful.

The first product is Plone Quick Upload (pypi package name is « collective.quickupload »), a pure javascript multiple upload tool for Plone, look at the first screencast, you could think « oh i know it’s a new Flash Upload tool » and you would be wrong, FlashUpload has no drag and drop 😉

http://www.youtube.com/watch?v=stiSEYqmeiQ&feature=channel

Plone Quick Upload has a control panel with useful options (limit size, limit parallel uploads, direct upload on select, fill titles before upload, …)  :

http://www.youtube.com/watch?v=sUf7tGQXiuA&feature=channel

As you can see, Plone Quick Upload manage errors and returns i18n messages when an upload raise an error (file always exist, file is too big, no permission to add content, bad content type, etc …).

For unfortunate MSIE users, the pure javascipt way cannot allow multiple selection and drag and drop, so the upload form has a graceful fallback, look at the next screencast, it’s not so bad.
And you can also choose in Plone Quick Upload control panel, to replace the pure javascript client script by a Flash Upload based script, it’s not recommended and it cannot work behind an HTTP authenticated server, but  some people want it :

http://www.youtube.com/watch?v=7hMTVk7C-pw&feature=channel

More information about Plone Quick Upload (installation, use it in your own template, etc …) here  :

http://plone.org/products/collective.quickupload/

Written by macadames

24, septembre 2010 at 11:04

Resizing and cropping thumbnails with jquery

with 3 comments

Resizing and cropping images with jquery

Sometimes, we need images with fixed dimensions (carousels, photo albums …), but all images don’t have the good dimensions or good ratio height /width.

This little jquery script will help you for this usecase.

In this example we will fix the dimension and position of thumbnails placed in blocks using the class « imageContainer ». « imageContainer » have a fixed width and height (in this example 250px/150px). The size of thumbs will be increased or reduced, and the thumb will be moved inside its container to get a centered cropping. Of course images and its containers must have a relative position.

Your html template code looks like :

  <a class="imageContainer" href="the_link">
    <img src="the_image_src" alt="" width="450" height="300" />
  </a>
  <a class="imageContainer" href="another_link">
    <img src="another_image_src" alt="" width="200" height="100" />
  </a>

In your css, you must fix at least :

.imageContainer,
.imageContainer img {
  position: relative;
}

.imageContainer {
  width: 250px;
  height: 150px;
  overflow: hidden;
  border: 1px solid grey;
}

The javascript code is simple :

var canImproveResolution = false;

thumbResize = function(thumb, min_width, min_height, orientation) {
    twidth = jQuery(thumb).width();
    theight = jQuery(thumb).height();
    new_height = theight;
    new_width = twidth;
    // strange 1px bug on MSIE
    if (jQuery.browser.msie) {
        min_width = min_width+1;
        min_height = min_height+1;
    }
    //calculate the good size
    if (orientation=='landscape') {
        ratio = min_width/min_height;
        tratio = twidth/theight;
        if (tratio>ratio) {
            new_height = min_height;
            new_width = parseInt(new_height*tratio);
        }
        else {
            new_width = min_width;
            new_height = parseInt(new_width/tratio);
        }
    }
    else {
        ratio = min_height/min_width;
        tratio = theight/twidth;
        if (tratio>ratio) {
            new_width = min_width;
            new_height = parseInt(new_width*tratio);
        }
        else {
            new_height = min_height;
            new_width = parseInt(new_height/tratio);
        }
    }

    // resize thumb
    if (theight!=new_height || twidth!=new_width) {
        jQuery(thumb).height(new_height);
        jQuery(thumb).width(new_width);
    }
    // adjust position (vertical and horizontal centering for css cropping)
    if (new_width > min_width) {
        moveleft = parseInt((new_width-min_width)/2);
        jQuery(thumb).css('left', '-'+moveleft+'px');
    }
    if (new_height > min_height) {
        movetop = parseInt((new_height-min_height)/2);
        jQuery(thumb).css('top', '-'+movetop+'px');
    }
    // improve resolution
    if (canImproveResolution && (new_width > twidth || new_height > theight)) improveResolution(thumb);
}

resizeThumbs = function(thumbs, min_width, min_height) {
    orientation = (min_height > min_width) ? 'portrait' : 'landscape';
    // hide images before resizing to avoid bad visual effect
    thumbs.each( function() {
            jQuery(this).css('visibility', 'hidden');
        })
    // use window.load because on document.ready images are not always loaded
    jQuery(window).load(function() {
        thumbs.each( function() {
            thumbResize(this, min_width, min_height, orientation );
            jQuery(this).css('visibility', 'visible');
        })
    });
}

// change image src for a better resolution
// this is just an example for Plone, adapt it with
// your own sizes rules

improveResolution = function(img) {
    img_src = img.src;
    img_src = img_src.replace(/\/image_preview/gi, '/image');
    img_src = img_src.replace(/\/image_mini/gi, '/image_preview');
    img_src = img_src.replace(/\/image_thumb/gi, '/image_mini');
    img.src = img_src;
}

For Plone users, there is a small improvement, if you fix the variable :

canImproveResolution = true;

you will get a better resolution when increasing image size  (works only with standard plone image thumb sizes …).

At last launch the script for the wanted thumbnails :

jQuery(document).ready(function(){
  resizeThumbs(jQuery('.imageContainer img'), 250, 150)});

Written by macadames

4, mars 2010 at 12:18

Plone and multilingual sites

with 9 comments

Usually we build multilingual Plone sites with LinguaPlone.

This solution has a big advantage, it’s generic and very easy to implement in a plone site.

But there are many inconvenients, due to the design of this product (translations are independent by design) :

  • Each translation is a new Archetype object, and it could be a big problem on sites with many contents, the portal objects number is increased by the number of available languages.
  • Translations uses plone references catalog to be linked to the original (called canonical) object, but when moving objects translations are not moved, when copying pasting objects, translations are not pasted, when deleting objects translations are not deleted, when reordering contents, translations are not reordered, when publishing objects translations are not published, … For web masters maintaining a site  with LinguaPlone inside could be a challenge.
  • When translating folders with LP, all translated contents are moved from the canonical folder to the translated folder with same language, translating low level folders on big depth tree sites could take a long long time, don’t be surprise if you get errors.
  • If a content is neutral (with no language attribute), inside a translated folder, it could not be seen when browsing a translation of the parent folder.
  • At last a lower problem :  the translation edit forms are not pretty to use, they show a table with two columns, the first column with the « canonical » content inside in « view » mode, the second column with the translation edit form, in fixed width sites the translated form width is sometimes ridiculously small.

But since many years we use LinguaPlone because it was the only easy way to make multilingual Plone sites.

By the past we were using a LP patch called LinguaFace to reduce the number of problems with LP (synchronisation on reorder, copy-paste, delete, or move – see neutral contents inside all translated folders – more usable translation edit forms …), but LF add a new layer of complexity and maintaining it with all LP versions becomes complicated. See some examples on how it works :

  • when a content is copied, all translations are copied
  • when a content is pasted or moved all translations are pasted or moved at the good place (not so easy)
  • when a content is published or retracted translations follow the same workflow transition
  • when a folder is translated, we don’t see only objects inside but also objects with same canonical Path (a new catalog index) to see also neutral contents.
  • Navtree is patched, breadcrumbs are patched, to use canonical path
  • and so on …

A big nightmare.

To day a new solution exists that store translations inside each Archetypes field, raptus.multilingualfields, and a Plone integration of raptus.multilanguagefields called raptus.multilingualplone that extends the schema of all Plone Content Types making them translatable. raptus.multilingualfields also provides multilingual catalog indexes that return the good translated data when searching for contents or displaying trees, and multilingual criterions for topics.

A LP feature not provided by raptus.multilingualfields is the internationalization of urls, if you really need this feature, i think it’s not a big challenge to add some traversal rules, for me it’s not essential.

AnotherLP  feature that can’t be provided when storing translations in fields is to get different workflows or security settings for each translation. If you need this feature use LinguaPlone, LinguaPlone is done for that, it makes all translated contents independent, but i’m curious to know the number of users who really want this feature, all clients i had never ask for that but finally, after some LP experience, always wanted the exact opposite use-case.

To make your Plone site translatable with raptus.multilanguagefields, you have two choices :

  1. Add raptus.multilanguageplone in your buildout and install it in your Plone Site using extensions products control panel, to make all your Plone content types and derived translatable (all fields for which translation make a sense are translatable).
  2. I prefer integrate by myself raptus.multilanguagefields inside a product, since we could want just some fields or content types translatable, as example i don’t need to translate the images or the files contents, just their titles and descriptions.

How to implement the second solution ?

Just take a look at raptus.multilanguageplone code, it’s easy :

  1. Make your archetype extenders to make your wanted fields translatable, example can be found here
  2. register your extenders in setuphandlers (Generic Setup import step), example here
  3. replace the standard catalog  indexes with multilingual indexes in Generic Setup profile, example here

That’s all, you will get superb edit forms with translatable fields inside, you also will get a google help to translate contents (a pleasant gadget). I say « Bravo » to raptus developpers.

Important :

  • these products are young, and there’s still many work todo to make it work without problems (tests are needed …). Last 0.6 releases have bugs under plone3.3, use the svn versions below instead.
  • raptus.multilanguageplone 0.6  has a bug in extenders with primary fields, tested in Plone 3.3  (fixed in branch aws_evols, not tested with images at this time)
  • raptus.multilanguagefields 0.6 has a bug, doctests are broken in Plone3.3 (fixed in trunk )
  • At this time these products don’t have unit tests or functional tests, it’s the only reproach i can make.  I started the work  here, and here

Written by macadames

6, février 2010 at 2:28