CMS Automne
http://www.automne-cms.org/forum/

Création d'une rangée "Texte et image alternée"
http://www.automne-cms.org/forum/viewtopic.php?f=5&t=477		 Page 1 sur 1
Auteur:  jmarc [ Dim Mars 29, 2009 5:38 pm ]
Sujet du message:  Création d'une rangée "Texte et image alternée"
Lorsqu'un article comporte plusieurs paragraphes (rangées) accompagnés d'une image en vignette, je trouve la mise en page visuellement plus sympa et plus lisible lorsque la position des images est alternée : si une rangée a son image à droite, la rangée suivante a son image à gauche et ainsi de suite.

Voyez la différence :
Image-->Image

Le problème se pose lorsqu'on insère une nouvelle rangée (avec son image) au milieu de l'article (entre une rangée "image à droite" et une rangée "image à gauche) où si l'on déplace des rangées dans l'article. L'alternance droite-gauche est alors compromise.

Pour éviter cela, il suffit de créer une nouvelle rangée dont l'image se positionne automatiquement à gauche ou à droite en fonction de la position de la dernière image.

Ce tutoriel explique comment cette rangée est créée.
Auteur:  jmarc [ Dim Mars 29, 2009 5:53 pm ]
Sujet du message:  Enregistrement de l'icône
Commencer par enregistrer l'image text-img-auto.gif ci-dessous dans /automne/templates/rows/images.
Image
Auteur:  jmarc [ Dim Mars 29, 2009 5:56 pm ]
Sujet du message:  Création de la rangée
Création de la rangée Afficher la fenêtre de gestion des modèles de rangées et créer une nouvelle rangée:
Image - Image
Auteur:  jmarc [ Dim Mars 29, 2009 5:58 pm ]
Sujet du message: 
Renseigner la fiche descriptive de la rangée :
Image
Auteur:  jmarc [ Dim Mars 29, 2009 6:02 pm ]
Sujet du message: 
Définir la structure XML de la rangée. Le code s'inspire de celui de la rangée "210 Texte et image droite" dans lequel sont insérées 3 lignes de code PHP (merci Sébastien). On remarque que les tag div d'ouverture et de fermeture sont tous les deux inclus dans le code PHP pour éviter les erreurs de Parsing XML.
Image

Voici le code complet que l'on peut recopier :
Code :
<row>
 <block module="standard" type="image" id="image" maxWidth="300">
  <?php
  $rowPosition = ($rowPosition == 'imgLeft') ? 'imgRight' : 'imgLeft';
  echo '<div class="'.$rowPosition.' shadowR">'; ?>
   <div class="shadowB">
    <div class="shadowTR">
     <div class="shadowBL">
      <div class="shadowBR">
       {{data}}
      </div>
     </div>
    </div>
   </div>
  <?php echo '</div>'; ?>
 </block>
 <block module="standard" type="text" id="texte">
  <div class="text">{{data}}</div>
 </block>
</row>
Auteur:  jmarc [ Dim Mars 29, 2009 6:03 pm ]
Sujet du message: 
De retour sur la fenêtre de gestion des modèles de rangées, activer la rangée qui vient d'être créée.
Image
Auteur:  jmarc [ Dim Avr 05, 2009 4:18 pm ]
Sujet du message:  Correctif
Un petit correctif à appliquer à la méthode exposée ci-dessus...

Pour éviter l'affichage d'un message d'erreur en bas de page sur l'interface d'administration d'automne :
Citer:
Automne (TM) 4.0.0b1 error : : PHP Notice : Undefined variable: rowPosition line 71 of file D:\xampplite\htdocs\html\7.php


qui correspond à la ligne (première appel de la variable $rowPosition sur la page en cours) :
Code :
<?php $rowPosition = ($rowPosition == 'imgLeft') ? 'imgRight' : 'imgLeft';


il faut ajouter l'initialisation de la variable php dans le(s) modèle(s) de page utilisé(s) :
Code :
 
<body>
    <?php $rowPosition = 'imgLeft'; ?>
    ...


Une autre solution plus facile à maintenir consiste à ajouter dans le code de la rangée un test d'existence de la variable (comme l'avait suggéré Sébastien dans son code...). On évite ainsi de devoir penser à ajouter le code proposé ci-dessus à tous les modèles de page susceptibles d'utiliser ce type de rangée.
Voici le code à insérer dans la rangée :
Code :
...
<?php
if (!isset($rowPosition)) {$rowPosition = 'imgLeft';}
$rowPosition = ($rowPosition == 'imgLeft') ? 'imgRight' : 'imgLeft';
echo '<div class="'.$rowPosition.' shadowR">'; ?>
...


Le code complet de la rangée devient donc :
Citer:
<row>
<br style="clear:both;" />
<block module="standard" type="image" id="image" maxWidth="300">
<?php
if (!isset($rowPosition)) {$rowPosition = 'imgLeft';}
$rowPosition = ($rowPosition == 'imgLeft') ? 'imgRight' : 'imgLeft';
echo '<div class="'.$rowPosition.' shadowR">'; ?>
<div class="shadowB">
<div class="shadowTR">
<div class="shadowBL">
<div class="shadowBR">
{{data}}
</div>
</div>
</div>
</div>
<?php echo '</div>'; ?>
</block>
<block module="standard" type="text" id="texte">
<div class="text">{{data}}</div>
</block>
<br style="clear:both;" />
</row>
Page 1 sur 1 Le fuseau horaire est UTC [Heure d’été]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/