CMS Automne

Forum de la communauté du CMS Automne
Nous sommes actuellement le Jeu Mars 28, 2024 11:17 pm

Le fuseau horaire est UTC [Heure d’été]




Publier un nouveau sujet Répondre au sujet  [ 7 messages ] 
Auteur Message
MessagePublié: Dim Mars 29, 2009 5:38 pm 
Hors-ligne

Inscrit(e) le : Ven Fév 16, 2007 12:11 am
Message(s) : 25
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.


Haut
 Profil  
 
 Sujet du message: Enregistrement de l'icône
MessagePublié: Dim Mars 29, 2009 5:53 pm 
Hors-ligne

Inscrit(e) le : Ven Fév 16, 2007 12:11 am
Message(s) : 25
Commencer par enregistrer l'image text-img-auto.gif ci-dessous dans /automne/templates/rows/images.
Image


Dernière édition par jmarc le Lun Mars 30, 2009 5:59 pm, édité 3 fois.

Haut
 Profil  
 
 Sujet du message: Création de la rangée
MessagePublié: Dim Mars 29, 2009 5:56 pm 
Hors-ligne

Inscrit(e) le : Ven Fév 16, 2007 12:11 am
Message(s) : 25
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


Dernière édition par jmarc le Lun Mars 30, 2009 6:00 pm, édité 1 fois.

Haut
 Profil  
 
 Sujet du message:
MessagePublié: Dim Mars 29, 2009 5:58 pm 
Hors-ligne

Inscrit(e) le : Ven Fév 16, 2007 12:11 am
Message(s) : 25
Renseigner la fiche descriptive de la rangée :
Image


Haut
 Profil  
 
 Sujet du message:
MessagePublié: Dim Mars 29, 2009 6:02 pm 
Hors-ligne

Inscrit(e) le : Ven Fév 16, 2007 12:11 am
Message(s) : 25
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>


Haut
 Profil  
 
 Sujet du message:
MessagePublié: Dim Mars 29, 2009 6:03 pm 
Hors-ligne

Inscrit(e) le : Ven Fév 16, 2007 12:11 am
Message(s) : 25
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


Haut
 Profil  
 
 Sujet du message: Correctif
MessagePublié: Dim Avr 05, 2009 4:18 pm 
Hors-ligne

Inscrit(e) le : Ven Fév 16, 2007 12:11 am
Message(s) : 25
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>


Haut
 Profil  
 
Afficher les messages publiés depuis :  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 7 messages ] 

Le fuseau horaire est UTC [Heure d’été]


Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas insérer de pièces jointes dans ce forum

Recherche de:
Aller vers :  
cron
Powered by phpBB® Forum Software © phpBB Group
Traduit par Maël Soucaze et Elglobo © phpBB.fr