Tweet
Bonjour,
J'ai utilisé les codes "CSS" d'un template "beez_20" pour afficher mes articles en colonne. A ma grande surprise, les articles ne s'affichaient pas correctement suivant la taille de ceux-ci. J'ai regardé le code pour tenter de comprendre et optmiser celui-ci mais sans succès.
Je me suis donc amuser à réécrire le code pour qu'il réagisse en accord avec les paramètres de gestion et d'affichage des contenus définis dans l'onglet "Blog / En vedette".
Je vous communique mon code :
Qui sait ce code sera peut-être remonté au niveau développement afin de corriger un autre "bug".
Bien cordialement, Gillou De Labas.
J'ai utilisé les codes "CSS" d'un template "beez_20" pour afficher mes articles en colonne. A ma grande surprise, les articles ne s'affichaient pas correctement suivant la taille de ceux-ci. J'ai regardé le code pour tenter de comprendre et optmiser celui-ci mais sans succès.
Je me suis donc amuser à réécrire le code pour qu'il réagisse en accord avec les paramètres de gestion et d'affichage des contenus définis dans l'onglet "Blog / En vedette".
Je vous communique mon code :
Code PHP:
<?php if (!empty($this->intro_items)) : ?>
<?php $introcount=(count($this->intro_items)); ?>
<!-- ************************************************************************** -->
<!-- GMA20110727 : Ajout d'une table <table></table>, -->
<!-- ajout d'une ligne <tr></tr> et -->
<!-- initialisation de variables -->
<!-- en tenant compte d'une condition pour certaines -->
<!-- ************************************************************************** -->
<table border="0" width="100%">
<tr>
<?php
if ( $this->columns <= 1 ) :
$line=0;
$width='100%';
else :
// Arrondi au supérieur
$line=ceil($introcount/(int)$this->columns);
// Arrondi à l'entier le plus proche
$width=round(100/(int)$this->columns).'%';
endif;
$countitem=0;
$row=0;
$column=1;
?>
<?php foreach ($this->intro_items as $key => &$item) : ?>
<!-- ************************************************************ -->
<!-- GMA20110727 : Modification de la variable pour la condition -->
<!-- ************************************************************ -->
<!-- <php if ($rowcount==1) : ?> -->
<?php if ($countitem==0) : ?>
<!-- ****************************************************************************** -->
<!-- GMA20110727 : Remplacement du tag <div></div> par le tag <td></td>, -->
<!-- ajout de la largeur de la colonne et son alignement vertical et -->
<!-- suppression des classes inutiles -->
<!-- ****************************************************************************** -->
<!-- <div class="items-row cols-<?php echo (int) $this->columns;?> <?php echo 'row-'.$row ; ?>"> -->
<td width="<?php echo $width; ?>" valign="top" class="cols-<?php echo (int) $this->columns; ?>">
<?php endif; ?>
<!-- ********************************************************************************* -->
<!-- GMA20110727 : Modification de la variable $rowcount par $column dans la classe et -->
<!-- suppression des classes inutiles -->
<!-- ********************************************************************************* -->
<!-- <div class="item column-<?php echo $rowcount;?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"> -->
<div class="column-<?php echo $column; ?><?php echo $item->state==0 ? ' system-unpublished' : null; ?>">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
</div>
<?php
// Incrémentation des compteurs
$row++;
$countitem++;
?>
<!-- ********************************************************************* -->
<!-- GMA20110727 : Modification de la condition de fermeture d'une colonne -->
<!-- ********************************************************************* -->
<!-- <php if (($rowcount == $this->columns) or ($counter ==$introcount)): ?> -->
<?php if (($line == $countitem) or ($row == $introcount)): ?>
<span class="row-separator"></span>
<?php
$countitem=0;
$column++;
?>
<!-- ****************************************************************************** -->
<!-- GMA20110727 : Remplacement du tag <div></div> par le tag <td></td>, -->
<!-- ****************************************************************************** -->
<!-- </div> -->
</td>
<?php endif; ?>
<?php endforeach; ?>
<!-- ************************************************************************** -->
<!-- GMA20110727 : Ajout des colonnes manquantes une fois tous les articles lus -->
<!-- ************************************************************************** -->
<?php for ($count=$column; $count <= (int) $this->columns; $count++)
{
echo '<td width="'.$width.'"></td>';
}
?>
<!-- ************************************************************************** -->
<!-- GMA20110727 : Ajout d'une table <table></table> et -->
<!-- ajout d'une ligne <tr></tr> -->
<!-- ************************************************************************** -->
</tr>
</table>
<?php endif; ?>
Code:
/* Nombre de colonne égale à 1 déclaré dans les paramêtres du 'Blog' */
.cols-1
{
width:100%;
}
/* Nombre de colonne égale à 2 déclaré dans les paramêtres du 'Blog' */
.cols-2
{
width:50%;
}
/* Nombre de colonne égale à 2 déclaré dans les paramêtres du 'Blog' */
.cols-2 .column-1
{
border: 0px solid Red;
margin-right: 5px;
}
/* Nombre de colonne égale à 2 déclaré dans les paramêtres du 'Blog' */
.cols-2 .column-2
{
border: 0px solid Blue;
margin-left: 5px;
}
/* Nombre de colonne égale à 2 déclaré dans les paramêtres du 'Blog' */
.cols-3
{
width:33%;
}
/* Nombre de colonne égale à 3 déclaré dans les paramêtres du 'Blog' */
.cols-3 .column-1
{
border: 0px solid Red;
margin-right: 5px;
}
/* Nombre de colonne égale à 3 déclaré dans les paramêtres du 'Blog' */
.cols-3 .column-2
{
border: 0px solid green;
margin-right: 5px;
margin-left: 5px;
}
/* Nombre de colonne égale à 3 déclaré dans les paramêtres du 'Blog' */
.cols-3 .column-3
{
border: 0px solid Blue;
margin-left: 5px;
}
/* */
.row-separator
{
}
Bien cordialement, Gillou De Labas.
je suis de ton avis et si l'option existe dans l'admin ça devrait nativement dans toutes les situations être réalisé. Un choix des devs, ma foi on va devoir s'en accomoder...
Commentaire