Online Editor OE 5.0 : gestion des images

Date de publication: le vendredi 15 juillet 2011 à 11h17
Dernière modification: par Pascal BOYER le vendredi 15 juillet 2011 à 13h36

La gestion des images par Online Editor 5.0 peut poser quelques problèmes si l'on utilise une classe d'objet image différente de celle fournie par défaut avec eZ Publish et plus encore si l'on n'utilise aucune des deux extensions eZ Webin et eZ Flow.

Définir la classe image

Contexte

Si vous n'utilisez pas la classe d'objet image par défaut, alors le paramètre MimeClassMap[image] de la section [CreateSettings] du fichier settings/siteaccess/siteaccess_admin/upload.ini.append.php ressemble à cela:

[CreateSettings]
MimeClassMap[image]=image_music <== identifiant de la classe image personnalisée

Partant, la fenêtre de gestion des images de Online Editor se présente ainsi:

Fig. 1: La fenêtre par défaut de gestion des images de Online Editor 5.0

Deux des templates utilisés pour l'affichage de cette fenêtre sont:

1. extension/ezoe/design/standard/templates/ezoe/tag_embed_objects.tpl
2. extension/ezoe/design/standard/templates/ezoe/generalattributes.tpl

Comme le montre la figure 1, il n'est pas possible, comme c'était le cas avec l'ancienne version 4 de Online Editor, de choisir la dimension d'affichage souhaitée de l'image. Cela incombe directement à l'usage d'une classe image personnalisée qui engendre l'appel par Online Editor du template tag_embed_objects.tpl inadapté.

Remédier au problème

Pour indiquer à Online Editor d'utiliser une classe image différente de la classe image par défaut, il faut créer une section  [RelationGroupSettings] dans le fichier de surcharge settings/override/content.ini.append.php puis renseigner le tableau ImagesClassList[] comme ceci:

19 [RelationGroupSettings]
20 ImagesClassList[]=image_music  <== identifiant de la classe image personnalisée

Bien évidemment, l'identifiant indiqué ci-dessus sera en accord avec celui indiqué plus haut dans le fichier de surcharge upload.ini.append.php.

De la sorte, dans la boite de dialogue, ce sont les templates:

• extension/ezoe/design/standard/templates/ezoe/tag_embed_images.tpl
• extension/ezoe/design/standard/templates/ezoe/generalattributes.tpl

qui sont utilisés.

La fenêtre de gestion des images de Online Editor 5.0 devient alors:

Fig. 2: La nouvelle fenêtre de gestion des images de Online Editor

Affichage sur le site public

Par défaut, lorsque l'on choisit la vue full dans le menu déroulant Visualiser, c'est alors le template design/standard/templates/content/view/full.tpl qui est utilisé produisant un affichage insatisfaisant:

Fig. 3: Affichage par défaut produit par le template view/full.tpl

La surcharge ci-après ajoutée au template de surcharge settings/siteaccess/femoca/override.ini.append.php suffira à corriger ce problème:

29 # ####### IMAGES ####### 
30 [image_music_full]
31 Source=content/view/full.tpl
32 MatchFile=images/image.tpl
33 Subdir=templates
34 Match[class_identifier]=image_music

Le template de surcharge image.tpl

Comme d'habitude, pourquoi réinventer la roue ? Je propose donc de reprendre le template de vue image.tpl utilisé par l'extension webin, à savoir extension/ezwebin/design/ezwebin/override/templates/embed/image.tpl.

Il suffit donc de faire une copie de ce dernier dans le répertoire design/plain_site/override/template/images/ dont le contenu est le suivant:

1 <div class="content-view-embed">
2 <div class="class-image">
3     <div class="attribute-image">{if is_set( $link_parameters.href )}{attribute_view_gui attribute=$object.data_map.image image_class=$object_parameters.size href=$link_parameters.href|ezurl target=$link_parameters.target border_size=first_set( $object_parameters.border_size, '0' ) border_color=first_set( $object_parameters.border_color, '' ) border_style=first_set( $object_parameters.border_style, 'solid' ) margin_size=first_set( $object_parameters.margin_size, '' )}{else}{attribute_view_gui attribute=$object.data_map.image image_class=$object_parameters.size border_size=first_set( $object_parameters.border_size, '0' ) border_color=first_set( $object_parameters.border_color, '' ) border_style=first_set( $object_parameters.border_style, 'solid' ) margin_size=first_set( $object_parameters.margin_size, '' )}{/if}</div>
4
5     {if $object.data_map.caption.has_content} <=== Y A T-IL UNE LEGENDE DE L'IMAGE
6     {if is_set( $object.data_map.image.content[$object_parameters.size].width )}
7         {def $image_width = $object.data_map.image.content[$object_parameters.size].width}
8         {if is_set($object_parameters.margin_size)}
9             {set $image_width = $image_width|sum(  $object_parameters.margin_size|mul( 2 ) )}
10         {/if}
11         {if is_set($object_parameters.border_size)}
12             {set $image_width = $image_width|sum(  $object_parameters.border_size|mul( 2 ) )}
13         {/if}
14         <div class="attribute-caption" style="width: {$image_width}px">
15     {else}
16         <div class="attribute-caption">
17     {/if}
18             {attribute_view_gui attribute=$object.data_map.caption} </div> <=== AFFICHAGE DE LA LEGENDE DE L'IMAGE
19   {/if}</div>
20 </div>

L'affichage sera amélioré avec quelques règles CSS.

:
Il semble obligatoire que l'identifiant du datatype servant à contenir la légende soit caption.
J'ai testé avec legende et en remplaçant caption par legende dans le code ci-dessus, mais cela ne fonctionne pas.

Commentaires