vignettes et articles

[Utilisateur supprimé] · novembre 2016

Bonjour,

pas trop de réponse à ma question http://forum.pluxml.org/viewtopic.php?pid=51987#p51987 :-(

Je relance sur un nouveau post.

J’essaie de regrouper dans une page statique ou non des vignettes (images) qui seraient liées à des articles (selon des catégories et des dates (voire des tags).

Dans la version non responsive de mon site http://pofableau.com je bidouille du code html pour obtenir ce résultat.
Un truc pas propre et pas responsive ..... et pour les listes des derniers articles j'utilise un bout de code fournit par Stéphane à inclure dans une div pour obtenir les listes ad hoc, mais sans ...vignette.

ici j’ai placé le code de "stacey" qui montre ce que je recherche. http://pofableau.com/stacey/

le plugin MyAllArchive ne permet pas ce résultat.
j'ai fouillé le forum et rien trouvé.

le site de http://geekonweb.fr/ a dans sa sidebar quelque chose qui s’en rapproche.

Auriez vous une suggestion?

Merci bien

Pierre · novembre 2016

Le plugin Vignette ne sera plus nécessaire pour arriver au résultat voulu ici, la fonction artThumbnail() fait maintenant le même travail. La fonction lastArtList() peut lui emprunter ses variables et produire toutes formes de liste, même une liste ne contenant que des vignettes d'articles.

Pour reprendre textuellement l'exemple donné, on utiliserait le script à peu près comme ceci:

[== PHP ==]
<div class="category-container">
	<?php $plxShow->lastArtList('
	<a class="project" style="background-image:url(\'#img_url\')" href="#art_url">
		<div class="project-info">
			<div>
				<h2>#art_title</h2>
				<p>#art_date</p>
			</div>
		</div>
	</a>'); ?>
</div>

Si on vise une catégorie en particulier ou limiter le nombre d'images, on peut ajouter ce genre de paramètres dans la balise.

[Utilisateur supprimé] · novembre 2016

merci pour cette piste.

y a t il de la doc pour cette fonction?

Pierre · novembre 2016

lastArtList est dans le wiki et quelques tutoriels ici et là. artThumbnail() est plutôt récente et principalement documentée ici dans les conversations du forum.

Par exemple, si la page qui affiche les image est une page de catégorie (très possible), elle utiliserait la boucle WHILE déjà présente dans le modèle par défaut mais l'intérieur de la boucle contiendrait artThumbnail() plutôt que les titres, chapo, etc. Encore une fois, dans notre exemple précédent:

[== PHP ==]
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
	<a class="project" style="background-image:url('<?php $plxShow->artThumbnail('#img_url'); ?>')" href="<?php $plxShow->artUrl(); ?>">
		<div class="project-info">
			<div>
				<h2><?php $plxShow->artTitle(); ?></h2>
				<p><?php $plxShow->artDate(); ?></p>
			</div>
		</div>
	</a>
<?php endwhile; ?>

[Utilisateur supprimé] · novembre 2016

merci.
j'ai vu le wiki.
j'ai parcouru le forum et vos nombreuses contributions.

le fichier home.php comporte comme précisé par Stephane dans un post:

<section>
		<?php $plxShow->artThumbnail(); ?>
		<?php $plxShow->artChapo(); ?>
</section>

je ne comprends pas le processus pour faire apparaitre l’image d’accroche.
je crée un article avec une image ( jpg et non jepg ....)
j'ai cru comprendre selon un de vos post que cette image est alors adoptée par la fonction artThumbnail()

que fais je du bout de code que vous me proposez?
dois je le placer entre deux balises <div> dans le corps de l’artcle.

vos explications seront bienvenue.

Pierre · novembre 2016

Le meilleur conseil pour bien comprendre est de prendre un pas de recul, d'installer le thème par défaut et d'étudier quelque peu les choses de base.

La fonction artThumbnail() englobe plusieurs choses, mes exemples reprenaient le site donné en lien pour expliquer une variante de artThumbnail() qui appelle précisément l'url de l'image, c'est déjà un éloignement de la méthode par défaut.

La feuille de style (les balises DIV par exemple) est un tout autre sujet, des tutoriels abondent sur l'internet pour apprendre les rudiments et les secrets des CSS.

[Utilisateur supprimé] · novembre 2016

merci

je test la v 5.5 en localhost , je ne bidouille pas avec de nouveau thème.
le test se fait donc avec le theme par défaut.

je souhaite simplement savoir comment procéder pour voir figurer l'image d'accroche d'un article.

lorsque je crée l'article , j'ai beau indiquer ajouter une image d'accroche et voir le chemin correspondant s'afficher:
data/medias/xxxx.jpg rien n'apparait au regard du lien dans la sidebar

Pierre · novembre 2016

Il serait bien plus pratique d'avoir le site en ligne. De cette façon, le rendu HTML nous donne immédiatement une piste sur la cause des problèmes.

C'est très facile et rapide de l'installer en sous-répertoire, ni vu ni connu de l'auditoire du site principal.

[Utilisateur supprimé] · novembre 2016

pour vous être agréable ... ;-)
http://pofableau.com/PluXml/
la page statique regroupe bien tous les articles.
les articles ont tous une image en accroche qui .... n'apparait pas.
je dois louper une marche mais ne sait laquelle.

Pierre · novembre 2016

Est-ce que la liste est bâtie par une fonction lastArtList (comme dans la sidebar) ou par une boucle WHILE (comme dans une page de categorie)?

Dans le cas d'une page statique, la première méthode est probablement suggérée. Si c'est le cas, je suggère de regarder l'échantillon de code donné au début et de la comparer. La page statique ne semble pas avoir une erreur d'orthographe (comme on peut voir dans l'article 4) mais bien une absence de la variable d'image.

On pourrait profiter de voir une copie ici de la fonction lastArtList au complet.

Stéphane · novembre 2016

Bonjour kristian.tz

Peux-tu me redonner stp le code que tu utilises dans ta page statique.

[Utilisateur supprimé] · novembre 2016

Bonjour Stéphane,

Celui que tu avais produit .... pour la V4.3
Avec un style pour virer les infos qui ne me sont pas utiles.

phpinfo() localhost PHP Version => 5.5.36
phpinfo() serveur distant Version =>5.6.16

<h3> Tous les billets</h3>
<?php
# Page statique Pluxml : liste de tous les articles par catégories par stephane@pluxml.org
# révision 1.0 par Stephane:
#	- compatibilité pluxml 4.3 
#	- paramétrage du format de la date
#	- tri des catégories  en fonction de l'ordre d'affichage des catégories
#	- tri des articles par catégories en fonction de l'ordre d'affichage des articles dans la catégorie
# révision 1.1 par Stephane (06/04/2010) :
#	- ne pas prendre en compte les articles futurs
# révision 1.2 par Stephane (21/04/2010) :
#	- ajout du paramètre $catList pour choisir la liste des catégories à afficher (par défaut: toutes les catégories)
#	- ajout du paramètre $artsByCategory pour choisr le nombre d'article à afficher par catégorie (par défaut tous les articles)
# révision 1.3 par Amaury (10/06/2010) :
#	- Compatibilité PluXml 5.0
# révision 1.3 par Stéphane (21/07/2010) :
#	- correction bug multi catégories
# révision 1.3.1 par Stéphane (22/07/2010) :
#	- correction bug sur sélection spécifique de catégories

if(!defined('PLX_ROOT')) exit;

#=======PARAMÈTRES ========
# format de la date
$format_date = '#num_day/#num_month/#num_year(2)  ';
 
# liste des catégories à afficher
# exemple: $catList = ''; = articles de toutes les catégories, 
# exemple: $catList = '001|003'; = articles des catégories 001 et 003 uniquement
$catList = ''; 
# nombre d'articles à afficher par catégorie, mettre 0 pour lister tous les articles
$artsByCategory = 0; 
#==========================

global $plxShow;

$plx_arts = array();
$plxGlob_arts = plxGlob::getInstance(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles']);
$aFiles = $plxGlob_arts->query('/[0-9]{4}.[home|0-9,]*'.$catList.'[0-9,]*.[0-9]{3}.[0-9]{12}.[a-z0-9-]+.xml$/','art','rsort',0,false,'before');
$aCatList = explode('|', $catList);
if(is_array($aFiles)) { # On a des fichiers
    while(list($k,$v) = each($aFiles)) { # On parcourt tous les fichiers
        $temp = $plxShow->plxMotor->parseArticle(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles'].$v);
		$cats = explode(',', $temp['categorie']);
		foreach($cats as $cat) {
			if($catList=='' OR in_array($cat, $aCatList)) {
				if(!isset($plx_arts[$cat]))
					$plx_arts[$cat][] = $temp;
				elseif(intval(sizeof($plx_arts[$cat])) < $artsByCategory OR $artsByCategory == 0)
					$plx_arts[$cat][] = $temp;
			}
		}
    }
    if($plx_arts) { # On a des articles
		
		# tri en fonction de l'ordre d'affiche des catégories
		uksort($plx_arts, create_function('$a, $b', 'global $plxShow; return strcmp(array_search($a, array_keys($plxShow->plxMotor->aCats)), array_search($b, array_keys($plxShow->plxMotor->aCats)));'));
			
        # On boucle sur nos articles
		foreach ($plx_arts as $k => $v) {

			$cat_num = $k;
		
			# on trie en fonction de l'ordre d'affichage des articles dans la catégorie
			if($cat_num=='home') {
				if ($plxShow->plxMotor->aConf['tri']=='asc') 
					usort($v, create_function('$a, $b', 'return strcmp($a["date"], $b["date"]);'));
				else
					usort($v, create_function('$a, $b', 'return strcmp($b["date"], $a["date"]);'));
				echo '<h2><a href="'.$plxShow->plxMotor->aConf['racine'].'">Accueil</a></h2>';
			}
			elseif(!isset($plxShow->plxMotor->aCats[$cat_num])) {
				if ($plxShow->plxMotor->aConf['tri']=='asc') 
					usort($v, create_function('$a, $b', 'return strcmp($a["date"], $b["date"]);'));
				else
					usort($v, create_function('$a, $b', 'return strcmp($b["date"], $a["date"]);'));
				echo '<h2>Non classé</h2>';
			} 
			else {
				if ($plxShow->plxMotor->aCats[$cat_num]['tri'] == 'asc')
					usort($v, create_function('$a, $b', 'return strcmp($a["date"], $b["date"]);'));
				else
					usort($v, create_function('$a, $b', 'return strcmp($b["date"], $a["date"]);'));
				$cat_name = plxUtils::strCheck($plxShow->plxMotor->aCats[ $cat_num ]['name']);
				$cat_url = $plxShow->plxMotor->aCats[ $cat_num ]['url'];
                                echo '<h2><a href="'.$plxShow->plxMotor->aConf['racine'].'?categorie'.intval($cat_num).'/'.$cat_url.'">'.$cat_name.'</a></h2>';
								
			}
			echo "<ul>";
			# On boucle sur les articles de la categories
			while(list($null, $art) = each($v)) {
				$art_num = intval($art['numero']);
				$art_url = plxUtils::strCheck(($art['url']));
				$art_title = plxUtils::strCheck(($art['title']));
				$art_date = plxDate::formatDate($art['date'], $format_date);
                                
				echo '<li>'.$art_date.'<a target=\"_blank\" href="'.$plxShow->plxMotor->aConf['racine'].'?article'.$art_num.'/'.$art_url.'">'.$art_title.'</a></li>';
			}
			echo "</ul>";
        }

    }
}
?>

Stéphane · novembre 2016

Si on part sur le code que tu utilises, voici le même mais avec l'affichage de l'image d'accroche

<h3> Tous les billets</h3>
<?php
/*
Page statique Pluxml : liste de tous les articles par catégories par stephane@pluxml.org
révision 1.0 par Stephane:
	- compatibilité pluxml 4.3
	- paramétrage du format de la date
	- tri des catégories  en fonction de l'ordre d'affichage des catégories
	- tri des articles par catégories en fonction de l'ordre d'affichage des articles dans la catégorie
révision 1.1 par Stephane (06/04/2010) :
	- ne pas prendre en compte les articles futurs
révision 1.2 par Stephane (21/04/2010) :
	- ajout du paramètre $catList pour choisir la liste des catégories à afficher (par défaut: toutes les catégories)
	- ajout du paramètre $artsByCategory pour choisr le nombre d'article à afficher par catégorie (par défaut tous les articles)
révision 1.3 par Amaury (10/06/2010) :
	- Compatibilité PluXml 5.0
révision 1.3 par Stéphane (21/07/2010) :
	- correction bug multi catégories
révision 1.3.1 par Stéphane (22/07/2010) :
	- correction bug sur sélection spécifique de catégories
révision 1.4 par Stéphane (29/11/2016) :
	- compatibilité pluxml 5.5
	- prise en compte de la réécriture d'url
	- affichage de l'image d'accroche
	- code css à ajouter dans la feuille de style du theme

article.static ul {
	list-style-type: none;
	width: 100%;
}
article.static ul  li{
	margin-bottom: 20px;
	width: 100%;
	display: inline-block;
}
article.static ul li.margin {
	margin-left: 110px;
}
article.static ul li img{
	border: none;
	width: 100px;
	margin-right: 10px;
	float: left;
}
article.static ul li span {
	font-size: 12px;
}
article.static ul li a {
	display: block;
}

*/

if(!defined('PLX_ROOT')) exit;

#=======PARAMÈTRES ========
# format de la date
$format_date = '#num_day/#num_month/#num_year(2)  ';

# liste des catégories à afficher
# exemple: $catList = ''; = articles de toutes les catégories,
# exemple: $catList = '001|003'; = articles des catégories 001 et 003 uniquement
$catList = '';
# nombre d'articles à afficher par catégorie, mettre 0 pour lister tous les articles
$artsByCategory = 0;
#==========================

global $plxShow;

$plx_arts = array();
$plxGlob_arts = plxGlob::getInstance(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles']);
$aFiles = $plxGlob_arts->query('/[0-9]{4}.[home|0-9,]*'.$catList.'[0-9,]*.[0-9]{3}.[0-9]{12}.[a-z0-9-]+.xml$/','art','rsort',0,false,'before');
$aCatList = explode('|', $catList);
if(is_array($aFiles)) { # On a des fichiers
	while(list($k,$v) = each($aFiles)) { # On parcourt tous les fichiers
		$temp = $plxShow->plxMotor->parseArticle(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles'].$v);
		$cats = explode(',', $temp['categorie']);
		foreach($cats as $cat) {
			if($catList=='' OR in_array($cat, $aCatList)) {
				if(!isset($plx_arts[$cat]))
					$plx_arts[$cat][] = $temp;
				elseif(intval(sizeof($plx_arts[$cat])) < $artsByCategory OR $artsByCategory == 0)
					$plx_arts[$cat][] = $temp;
			}
		}
	}
	if($plx_arts) { # On a des articles

		# tri en fonction de l'ordre d'affiche des catégories
		uksort($plx_arts, create_function('$a, $b', 'global $plxShow; return strcmp(array_search($a, array_keys($plxShow->plxMotor->aCats)), array_search($b, array_keys($plxShow->plxMotor->aCats)));'));

		# On boucle sur nos articles
		foreach ($plx_arts as $k => $v) {

			$cat_num = $k;

			# on trie en fonction de l'ordre d'affichage des articles dans la catégorie
			if($cat_num=='home') {
				if ($plxShow->plxMotor->aConf['tri']=='asc')
					usort($v, create_function('$a, $b', 'return strcmp($a["date"], $b["date"]);'));
				else
					usort($v, create_function('$a, $b', 'return strcmp($b["date"], $a["date"]);'));
				echo '<h2><a href="'.$plxShow->plxMotor->aConf['racine'].'">Accueil</a></h2>';
			}
			elseif(!isset($plxShow->plxMotor->aCats[$cat_num])) {
				if ($plxShow->plxMotor->aConf['tri']=='asc')
					usort($v, create_function('$a, $b', 'return strcmp($a["date"], $b["date"]);'));
				else
					usort($v, create_function('$a, $b', 'return strcmp($b["date"], $a["date"]);'));
				echo '<h2>Non classé</h2>';
			}
			else {
				if ($plxShow->plxMotor->aCats[$cat_num]['tri'] == 'asc')
					usort($v, create_function('$a, $b', 'return strcmp($a["date"], $b["date"]);'));
				else
					usort($v, create_function('$a, $b', 'return strcmp($b["date"], $a["date"]);'));
				$cat_name = plxUtils::strCheck($plxShow->plxMotor->aCats[ $cat_num ]['name']);
				$cat_url = $plxShow->plxMotor->aCats[ $cat_num ]['url'];
								echo '<h2><a href="'.$plxShow->plxMotor->aConf['racine'].'?categorie'.intval($cat_num).'/'.$cat_url.'">'.$cat_name.'</a></h2>';

			}
			echo '<ul>';
			# On boucle sur les articles de la categories
			while(list($null, $art) = each($v)) {
				$art_num = intval($art['numero']);
				$art_url = plxUtils::strCheck(($art['url']));
				$art_title = plxUtils::strCheck(($art['title']));
				$margin = '';
				$art_thumb='';
				if($art['thumbnail']) {
					$img_url = $plxShow->plxMotor->urlRewrite($art['thumbnail']);
					$img_title = plxUtils::strCheck($art['thumbnail_title']);
					$img_alt = $art['thumbnail_alt'];
					$art_thumb = '<img src="'.$img_url.'" alt="'.$img_alt.'" title="'.$img_title.'" />';
				} else {
					$margin = ' class="margin"';
				}
				$art_date = '<span>'.plxDate::formatDate($art['date'], $format_date).'</span>';
				echo '<li'.$margin.'>'.$art_thumb.$art_date.'<a target=\"_blank\" href="'.$plxShow->plxMotor->urlRewrite('?article'.$art_num.'/'.$art_url).'">'.$art_title.'</a></li>';
			}
			echo "</ul>";
		}

	}
}
?>

Et pour mettre ça en forme, ajoute le code suivant dans la feuille de style de ton thème.
Donc à tester dans un PluXml vierge et à adapter en fonction de son site et de son thème perso.

article.static ul {
	list-style-type: none;
	width: 100%;
}
article.static ul  li{
	margin-bottom: 20px;
	width: 100%;
	display: inline-block;
}
article.static ul li.margin {
	margin-left: 110px;
}
article.static ul li img{
	border: none;
	width: 100px;
	margin-right: 10px;
	float: left;
}
article.static ul li span {
	font-size: 12px;
}
article.static ul li a {
	display: block;
}

nb: j'ai modifié le code pour qu'il prenne en compte la réécriture d'url

[Utilisateur supprimé] · novembre 2016

Parfait et grand merci pour ceci: http://pofableau.com/PluXml/index.php?static2/test-stephane

1- Pour quelle(s) raison le code de Pierre est rejeté? appel de fonction manquante?
2- A priori rejet du code php dans une page article. Est ce normal?
Je souhaiterai pouvoir afficher toutes ces vignettes dans la page d'accueil
3- Comment procéder pour avoir le même résultat en sidebar?

[Utilisateur supprimé] · novembre 2016

Suite au coup de pouce, voici ce que j'obtiens avec le code de Stéphane:

http://www.pofableau.com/PluXml/index.php?static2/test-stephane

Maintenant je cherche à activer un javascript type mouse over comme celui ci:

http://www.pofableau.com/PluXml/hello.php

Son code:


<?php
echo '<script>
    alert("Hello, PluXml!")
    function bigImg(x)
{
x.style.height="100";
x.style.width="100";
}

function normalImg(x)
{
x.style.height="60";
x.style.width="60";
}
     </script>
     <div class="ex" style="position:absolute;top:10px;left:100px;text-align:center; "> 
             
           <span ></span><br/><br/>
           <a href="http://www.pofableau.com/?article285/inscriptions" target="_blank" onclick="window.open(this.href); return false;">

           <img class="img4" onmouseover="bigImg(this)"  onmouseout="normalImg(this)" src="http://pofableau.com/doc_en_ligne/inscriptions.jpg" height="60px" width="70px" title="Inscriptions"/></a><br/><br/>
           <font class="rose2">Les inscriptions en forêt</font><br/>
                      
       </div>';
?>

si j'insert celui ci dans une page statique function bigImg(x) ne fonctionne pas.

http://www.pofableau.com/PluXml/index.php?static3/test-hello/

Auriez une piste de solution. php coté serveur, javascript coté client?

Merci bien.

Stéphane · novembre 2016

Si c'est juste un effet de zoom que tu veux sur l'image pas besoin de js, 3 lignes de css suffisent

article.static ul li:hover img {
	width: 150px;
}

[Utilisateur supprimé] · novembre 2016

Simple et efficace.

Merci!

vignettes et articles

Réponses