Petite template pour rajouter une galerie dans une page statique

bazooka07bazooka07 PluXml Lead Developer, Moderator
dans Modifications
Bonjour,

Voici un petit template qui permet de rajouter une galerie pour afficher toutes les photos d'un dossier dans une page statique 
[== PHP ==]
<?php
/*
 * Template pour afficher la galerie de toutes les photos d'un dossier
 * Lors de l'édition de la page statique, précisez le nom du dossier entre guillemets
 * dans les mots-clés (champ Balise meta "keywords"). Par exemple: "photos/nouvel-an"
 * @author: Jean-Pierre Pourrez
 * */
 
include(dirname(__FILE__) . '/header.php');
?>
<section>
	<div id="container">
		<div class="full-width">
			<article role="article" id="static-page-<?php echo $plxShow->staticId(); ?>">
				<section>
					<?php $plxShow->staticContent(); ?>
				</section>
<?php
$cible = $plxMotor->cible;
$keywords = $plxMotor->aStats[$cible]['meta_keywords'];
if (preg_match('/"([^"]+)"/', $keywords, $result)) {
	$myFolder = $result[1];
	if (substr($myFolder, -1, 1) != '/')
		$myFolder .= '/';
} else
	$myFolder = '';
?>
				<section>
					<h2>Dossier: <?php echo rtrim($myFolder, '/'); ?></h2>
<?php
$dir = PLX_ROOT.$plxShow->plxMotor->aConf['medias'].$myFolder;

// Récupération et affichage de la liste des images sous forme de liste
$glob = plxGlob::getInstance($dir);

if ($files = $glob->query('/[a-z0-9-_]+.tb.(jpg|gif|png)$/i')) {
    foreach($files as $filename) {
        $file = $plxShow->plxMotor->racine.$plxShow->plxMotor->aConf['medias'].$myFolder.$filename;
        $url = str_replace('.tb', '', $file);
        $title = str_replace('.tb', '', $filename);
        $size = getimagesize($dir.$filename);
        $sizeStr = $size[3];
        echo <<< EOT
			        <a href="$url"><img src="$file" alt="$title" $sizeStr /></a>

EOT;
    }
}
else echo "Aucune image";
?>
				</section>
			</article>
		</div>
	</div>
</section>
<?php include(dirname(__FILE__) . '/footer.php'); ?>

Copiez-coller le code ci-dessus dans un fichier nommé "static-galerie-fullwidth.php et placez le dans le dossier de votre theme avec les autres fichiers.
Pour sélectionner le dossier à afficher, voir le commentaire en début de code. Reste plus qu'à ajouter un peu de blabla à votre page statique.
Comme ce n'est qu'un template, vous pouvez créer autant de pages statiques que vous voulez.

Un template qui manque dans le thème par défaut pour aider les débutants.
J'ai pas réussi à ajouter le code dans le wiki, sniff 8.(

Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2

Réponses

  • bankaibankai Member
    C'est très intéressant, merci du partage :)
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    novembre 2015 modifié
    Bonjour,

    Pour répondre à la demande de certains, j'ai modifié le script pour pouvoir afficher une galerie photos dans un article ou une page statique.
    C'est quasiment la même chose. La seule différence est pour récupérer le nom du dossier où sont stockés les photos de la galerie.
    On peut aussi assez facilement afficher plusieurs galeries. On va donc factoriser pour avoir un code commun aux gabarits d'articles et des pages statiques.
    voici le script galerie.php à ajouter à votre dossier de thèmes : 
    [== PHP ==]
<?php
if (!defined('PLX_ROOT')) exit;

/*
 * Template pour afficher la galerie de toutes les photos d'un dossier
 * Lors de l'édition d'un article ou d'une page statique, précisez le nom du dossier entre guillemets
 * dans le champ Balise "meta "keywords". Par exemple: "photos/nouvel-an".
 * 
 * Il est possible d'indiquer plusieurs galeries. par exemple: "photos/nouvelan" "anniv"
 * 
 * Utilisez un plugin comme colorBox pour avoir un diaporama:
 * http://kazimentou.fr/pluxml-plugins2/plugin=colorBox&download
 * 
 * @author: Jean-Pierre Pourrez
 * */

switch ($plxMotor->mode) {
	case 'article':
		$keywords = $plxMotor->plxRecord_arts->f('meta_keywords');
		break;
	case 'static':
		$cible = $plxMotor->cible;
		$keywords = $plxMotor->aStats[$cible]['meta_keywords'];
		break;
	default:
		exit;
}
if (preg_match_all('/"([^"]+)"/', $keywords, $result)) {
	$n = 0;
	foreach($result[1] as $myFolder) {
		if (substr($myFolder, -1, 1) != '/')
			$myFolder .= '/';
?>
				<section>
					<h2>Galerie: <?php echo rtrim($myFolder, '/'); ?></h2>
<?php
		$dir = PLX_ROOT.$plxShow->plxMotor->aConf['medias'].$myFolder;
	
		// Récupération et affichage de la liste des images sous forme de liste
		$glob = plxGlob::getInstance($dir);
		
		if ($files = $glob->query('/[a-z0-9-_]+.tb.(jpg|gif|png)$/i')) { ?>
					<p id="gallery">
<?php
		    $n++;
		    foreach($files as $filename) {
		        $thumbnail = $plxShow->plxMotor->racine.$plxShow->plxMotor->aConf['medias'].$myFolder.$filename;
		        $href = str_replace('.tb', '', $thumbnail);
		        $title = str_replace('.tb', '', $filename);
		        $title = substr($title, 0, strrpos($title, '.'));
		        $size = getimagesize($dir.$filename);
		        $sizeStr = $size[3];
		        echo <<< EOT
				        <a href="$href" title="$title" rel="lightbox-$n"><img src="$thumbnail" alt="$title" $sizeStr /></a>

EOT;
			} ?>
				    </p>
<?php	} else { ?>
					<p id="no_picture">Il n'y a aucune image dans la galerie.</p>
<?php	} ?>
				</section>
<?php
	}
} else
	echo <<< NO_GALLERY
				<p id="no_gallery"><strong>Aucune galerie d'images</strong></p>
NO_GALLERY;
?>
    Il suffit ensuite de dupliquer les scripts article*php et static*.php en article-galerie*.php et static-galerie*.php et d'inclure le script galerie.php à l'endroit qui va bien comme ceci :
    article-galerie-wide.php 
    [== PHP ==]
<?php include(dirname(__FILE__) . '/header.php'); ?>
	<main class="main grid" role="main">
		<section class="col sml-12">
			<article class="article" role="article" id="post-<?php echo $plxShow->artId(); ?>">
				<header>
					<h1>
						<?php $plxShow->artTitle(); ?>
					</h1>
					<small>
						<?php $plxShow->lang('WRITTEN_BY'); ?> <?php $plxShow->artAuthor() ?> -
						<time datetime="<?php $plxShow->artDate('#num_year(4)-#num_month-#num_day'); ?>"><?php $plxShow->artDate('#num_day #month #num_year(4)'); ?></time> -
						<a href="#comments" title="<?php $plxShow->artNbCom(); ?>"><?php $plxShow->artNbCom(); ?></a>
					</small>
				</header>
				<section>
					<?php $plxShow->artContent(); ?>
				</section>
<?php include(dirname(__FILE__) . '/galerie.php'); ?>
				<footer>
					<small>
						<?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat() ?> - 
						<?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags() ?>
					</small>
				</footer>
			</article>
<?php $plxShow->artAuthorInfos('<div class="author-infos">#art_authorinfos</div>'); ?>
<?php include(dirname(__FILE__).'/commentaires.php'); ?>
		</section>
	</main>
<?php include(dirname(__FILE__).'/footer.php'); ?>
    static-galerie-wide.php 
    [== PHP ==]

<?php include(dirname(__FILE__) . '/header.php'); ?>
<section>
	<div id="container">
		<div class="full-width">
			<article role="article" id="static-page-<?php echo $plxShow->staticId(); ?>">
				<section>
					<?php $plxShow->staticContent(); ?>
				</section>
<?php include(dirname(__FILE__) . '/galerie.php'); ?>
			</article>
		</div>
	</div>
</section>
<?php include(dirname(__FILE__) . '/footer.php'); ?>
    Idem si vous voulez conserver la sidebar
    Les sources sont à télécharger ici: http://kazimentou.fr/divers/galerie.zip

    Démo ici:
    Article avec une galerie
    Page statique avec une galerie
    Page statique avec plusieurs galeries

    Vous pouvez utiliser le plugin colorBox pour afficher les photos en grand et en diaporama

    A+

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • cpalocpalo Member
    Bonjour,

    Au lieu d'afficher la galerie, il m'affiche ce que j'ai entré dans le champ keywords de la rédaction de l'article
    et en dessous le message: il n'y a pas de photos dans la galerie.
    Pour mon test : medias/galleries/chats/
    les photos dans cette galerie s'intitulent: cats-640-480-7.jpg et ainsi de suite.

    Qu'est-ce je dois écrire exactement dans le champ keywords : "galleries/chats" ?
  • cpalocpalo Member
    Oups!! c'est réglé.
    Il a suffi que je fasse dans le gestionnaire de médias "recréer les miniatures" ( qui n'existaient pas automatiquement; seulement les images d'origine)

    Cordialement
  • notor99notor99 Member
    bonjour,
    j'ai fais les modif avec les scripts et ma galerie s'affiche impeccable.
    Sauf que je souhaite conserver la sidebar right

    Comment faire?
    Merci d'avance
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @notor99,

    Si tu compares les templates static.php et static-full-width.php dans le dossier themes/default de Pluxml, tu verras qu'il y a juste une ligne de code à rajouter pour afficher la side bar : 
    [== PHP ==]
	<?php include(dirname(__FILE__).'/sidebar.php'); ?>
    entre les balises </section> et </main>.

    Bonne année.

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

Connectez-vous ou Inscrivez-vous pour répondre.