Utilisation du script Timthumb est-il possible ? (long)

Bloody · avril 2011

Bonjour,

TimThumb est un script PHP permettant de redimensioner les images de votre site web à la volée.
Les thèmes magazines sous Wordpress utilisent le script de Timthumb. C'est d'ailleurs une des raisons de leur succès.

En association une image (id) à un post, le script permet de placer des miniatures de différentes tailles, avec différents effets de zoom, passer les images en sépia, noir et blanc, etc ... où on le désire.
Il permet ainsi aussi de créer des galeries en utilisant les posts comme source d'image.

Voir ici la page consacrée à toutes ses fonctionnalités(en).
Une miniature est réalisée ainsi (hauteur 80 pixels et longueur : 210) :

www.votresite.com/timthumb.php?src=répertoire/image.jpg&h=80&w=210

Comme sous Pluxml, je pense qu'il n'est pas possible d'associer une image par son id à un post.
Il existe une seconde solution sous Wordpress.
Un script scanne le code des posts et recherche la première balise image et en l'association à Timthumb, il est possible de la redimensionner.

Je vous met le code php, même si je doute qu'il soit utile :

<?php echo get_first_image() ?>

function get_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;
}

Pour ceux qui ne voit ça peut donner aller sur la page d'index de mon site, les miniatures de la sidebar sont réalisées avec Timthumb (sans le scan).

Pensez-vous que ça soit transposable à Pluxml ?

flipflip · mai 2011

Salut, je remonte ce post.

Je mets actuellement à jour mon thème pour la version 5.1 et je souhaite intégrer le script timthumb. Comment a tu fais ?

Merci d'avance.

Bloody · mai 2011

Désolé flipflip. Je n'ai jamais eu de réponse.

J'ai fait une demande ici.

Il faut créer un "custom field" dans lequel sera possible de saisir l'url complète de l'image pour chaque article.

Pour créer ce nouveau champ dans les articles, je pense qu'il faut adapter l'exemple du Guide du développeur (pages 25-27) qui permet d'injecter du code dans les catégories, mais dans notre cas pour des articles.

Ensuite, ça serait très simple de faire apparaître l'url dans un thème et donc de modifier l'image par Timthumb.

Peut-être que quelqu'un de l'équipe de dév. peut nous aider ? :P

Hamtaro · mai 2011

Il suffit de faire comme avec WordPress et scanner le contenu de l'article pour trouver une image...

C'est ce que je fais pour mes adaptations et en particulier ici : http://forum.pluxml.org/viewtopic.php?id=2425

Voici le code :

<?php ob_start(); 
$plxShow->artContent($chapo=true);
$content = ob_get_clean();
$masque = '#<img.+src="(.+?)"#i'; preg_match($masque, $content, $resultats);
$extension = pathinfo($resultats[1], PATHINFO_EXTENSION); ?>
                	
<?php if($extension['extension'] == ('jpg'||'jpeg'||'png'||'gif')) : ?>									
<a href="<?php $plxShow->artUrl($type='relatif'); ?>" rel="bookmark" title="Lien vers <?php $plxShow->artTitle(''); ?>">        
<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php echo $resultats[1]; ?>&w=519&h=250&zc=1&q=90" alt="<?php $plxShow->artTitle(''); ?>" width="519px" height="250px" class="main-image" /></a>
<?php else : ?>
<a href="<?php $plxShow->artUrl($type='relatif'); ?>" rel="bookmark" title="Lien vers <?php $plxShow->artTitle(''); ?>">        
<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php $plxShow->template(); ?>/images/defaut_timthumb.jpg&w=519&h=250&zc=1&q=90" alt="<?php $plxShow->artTitle(''); ?>" width="519px" height="250px" class="main-image" /></a>
<?php endif; ?>

Et en même temps, je vérifie l'extension du fichier (qui sert aussi à vérifier la présence d'une image), on sait jamais

A toi d'adapter le code

Bloody · mai 2011

Il suffit de faire comme avec WordPress et scanner le contenu de l'article pour trouver une image...

Cool ! Merci Hamtaro de répondre à mon problème de scanne de contenu. Vu que je n'avais pas eu de réponse, je pensais que ce n'était pas possible.

Tout arrive, il suffit d'être patient.

Je vais tester ça. :P

Bloody · mai 2011

Essai super concluant.

Grand merci Hamtaro.

Petit nota : il faut que l'image soit en local. J'ai essayé avec un lien sur un site distant et la miniature n'est pas générée, ni bien sur la thumb par défaut. ^^

Pour voir ce que ça donne, je vous met le lien vers mon site de test : ICI

Je vais en fin pouvoir bosser sur des slideshow en jquery avec liens directs vers les articles.

Cool !

Hamtaro · mai 2011

Bloody a écrit:

Essai super concluant.

Grand merci Hamtaro.
Petit nota : il faut que l'image soit en local. J'ai essayé avec un lien sur un site distant et la miniature n'est pas générée, ni bien sur la thumb par défaut. ^^

Pour voir ce que ça donne, je vous met le lien vers mon site de test : ICI

Je vais en fin pouvoir bosser sur des slideshow en jquery avec liens directs vers les articles.
Cool !

timthumb peut être configuré pour des images distantes, il faut que tu regardes dans son fichier

Et l'image par défaut n'est pas créée ? Je précise tout de même qu'il faut que tu aies une image portant le même nom que dans le code que je t'ai donné (et au même chemin), ou alors tu fais les modifs pour que cela concorde.

Bloody · mai 2011

Bien sur, j'ai mis un nom identique à celui à l'image de remplacement.

Par contre, je n'avais pas mis l'image dans le bon répertoire. Et dire, que c'est la 4-5ème fois que j'utilise ce script. Je devais dormir sur ce coup là.

Tu peux sur la page de blog du lien ci-dessus que la miniature apparaît bien.

Pour les images distantes, j'avais vu que c'était possible, mais franchement pour l'instant ça n'intéresse que peu. :P Sauf si bien sur, j'utilise un service de stockage distant comme flickr, pour ça.

Encore merci Hamtaro.
Heureusement que tu es passé par là pour résoudre mon problème et par la même, celui de Flipflip.

flipflip · mai 2011

Bonjour à tous, merci pour vos réponses je regarde ça dans la semaine.

Bloody · juin 2011

Hamtaro,

J'essaie de placer ton code sur une page statique qui me sert de home.

Mais ça bugue; car je suis nul en php. :P

Je voudrai le coupler avec un code d'affichage des derniers articles (trouvé sur ce même forum) que voici :

<?php
    // Réinitialisation de la boucle :
    $plxShow = new plxShow($plxMotor);
    $plxGlob_arts = plxGlob::getInstance(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles']);
    $plxShow->plxMotor->motif = '/^[0-9]{4}\.(home|[0-9]*|,)*\.[0-9]{3}\.[0-9]{12}\.[a-z0-9-]+\.xml$/';
    $plxShow->plxMotor->getArticles('all');
?>
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
            <li><?php $plxShow->artTitle('link'); ?></li>
<?php endwhile; # Fin de la boucle sur les articles ?>

Le but, tu l'auras compris, est d'afficher sous forme de liste les miniatures des articles.

Merci par avance pour ton aide.

Hamtaro · juin 2011

Bloody a écrit:
Hamtaro,

J'essaie de placer ton code sur une page statique qui me sert de home.
Mais ça bugue; car je suis nul en php. :P

Je voudrai le coupler avec un code d'affichage des derniers articles (trouvé sur ce même forum) que voici :
<?php
    // Réinitialisation de la boucle :
    $plxShow = new plxShow($plxMotor);
    $plxGlob_arts = plxGlob::getInstance(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles']);
    $plxShow->plxMotor->motif = '/^[0-9]{4}\.(home|[0-9]*|,)*\.[0-9]{3}\.[0-9]{12}\.[a-z0-9-]+\.xml$/';
    $plxShow->plxMotor->getArticles('all');
?>
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
            <li><?php $plxShow->artTitle('link'); ?></li>
<?php endwhile; # Fin de la boucle sur les articles ?>
Le but, tu l'auras compris, est d'afficher sous forme de liste les miniatures des articles.

Merci par avance pour ton aide.

Essaie ça mais je n'ai pas testé

<?php
    // Réinitialisation de la boucle :
    $plxShow = new plxShow($plxMotor);
    $plxGlob_arts = plxGlob::getInstance(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles']);
    $plxShow->plxMotor->motif = '/^[0-9]{4}\.(home|[0-9]*|,)*\.[0-9]{3}\.[0-9]{12}\.[a-z0-9-]+\.xml$/';
    $plxShow->plxMotor->getArticles('all');
ob_start(); 
$plxShow->artContent($chapo=true);
$content = ob_get_clean();
$masque = '#<img.+src="(.+?)"#i'; preg_match($masque, $content, $resultats);
$extension = pathinfo($resultats[1], PATHINFO_EXTENSION); ?>
     
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
<?php if($extension['extension'] == ('jpg'||'jpeg'||'png'||'gif')) : ?>  
            <li><a href="<?php $plxShow->artUrl($type='relatif'); ?>" rel="bookmark" title="Lien vers <?php $plxShow->artTitle(''); ?>">        
<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php echo $resultats[1]; ?>&w=519&h=250&zc=1&q=90" alt="<?php $plxShow->artTitle(''); ?>" width="519px" height="250px" class="main-image" /></a></li>
<?php else : ?>
            <li><a href="<?php $plxShow->artUrl($type='relatif'); ?>" rel="bookmark" title="Lien vers <?php $plxShow->artTitle(''); ?>">        
<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php $plxShow->template(); ?>/images/defaut_timthumb.jpg&w=519&h=250&zc=1&q=90" alt="<?php $plxShow->artTitle(''); ?>" width="519px" height="250px" class="main-image" /></a></li>
<?php endif; ?>
<?php endwhile; # Fin de la boucle sur les articles ?>

Bloody · juin 2011

Merci Hamtaro,

Les liens sont bons; mais la miniature affichée pour tous est celle du dernier article. Strange !!

Hamtaro · juin 2011

Essaie cela :

<?php
    // Réinitialisation de la boucle :
    $plxShow = new plxShow($plxMotor);
    $plxGlob_arts = plxGlob::getInstance(PLX_ROOT.$plxShow->plxMotor->aConf['racine_articles']);
    $plxShow->plxMotor->motif = '/^[0-9]{4}\.(home|[0-9]*|,)*\.[0-9]{3}\.[0-9]{12}\.[a-z0-9-]+\.xml$/';
    $plxShow->plxMotor->getArticles('all');
?>
     
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
<?php ob_start(); 
$plxShow->artContent($chapo=true);
$content = ob_get_clean();
$masque = '#<img.+src="(.+?)"#i'; preg_match($masque, $content, $resultats);
$extension = pathinfo($resultats[1], PATHINFO_EXTENSION); ?>
<?php if($extension['extension'] == ('jpg'||'jpeg'||'png'||'gif')) : ?>  
            <li><a href="<?php $plxShow->artUrl($type='relatif'); ?>" rel="bookmark" title="Lien vers <?php $plxShow->artTitle(''); ?>">        
<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php echo $resultats[1]; ?>&w=519&h=250&zc=1&q=90" alt="<?php $plxShow->artTitle(''); ?>" width="519px" height="250px" class="main-image" /></a></li>
<?php else : ?>
            <li><a href="<?php $plxShow->artUrl($type='relatif'); ?>" rel="bookmark" title="Lien vers <?php $plxShow->artTitle(''); ?>">        
<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php $plxShow->template(); ?>/images/defaut_timthumb.jpg&w=519&h=250&zc=1&q=90" alt="<?php $plxShow->artTitle(''); ?>" width="519px" height="250px" class="main-image" /></a></li>
<?php endif; ?>
<?php endwhile; # Fin de la boucle sur les articles ?>

Bloody · juin 2011

Un grand merci Hamtaro. ^^

Tu peux voir comme il fonctionne parfaitement bien sur mon footer ici :
http://portfolio.chantdeleau.com

Je te dois combien ?

Hamtaro · juin 2011

Content que ça marche

bg62 · juin 2011

Il permet ainsi aussi de créer des galeries

tu aurais un exemple avec plusieurs 'galeries' différentes que l'on puisse mettre dans des pages statiques ou des articles différents ?
ce serait plus que super

Bloody · juin 2011

Tu peux déjà voir sur mon portfolio.

Il est utilisé en footer et sur ma page blog (projets).

- Page catégorie portfolio : http://portfolio.chantdeleau.com/categorie1/web
- Page de tout les articles : http://portfolio.chantdeleau.com/blog.php
- Une autre page catégorie pour un portfolio avec effet prettyPhoto sur cette discussion (code fourni) : http://forum.pluxml.org/viewtopic.php?pid=18659#p18659
- Visible aussi sur le footer : http://portfolio.chantdeleau.com avec le dernier code fourni par Hamtaro.

Pour les articles, tu peux effectivement récupérer aussi la première image de l'article et la placer avant le chapô.

Wiksa · janvier 2012

Bonsoir,

Je tente d’intégrer le bout de code d'Hamtaro sans succès malheureusement.

J'ai bien collé le code sur home.php, collé timthumb.php à la racine de mon dossier thème. Sur le code source de mes pages le code des images apparaît, mais pas la miniature de mes articles.
Le code pointe bien vers le dossier image de data pourtant.

<img src="http://127.0.0.1/Sites/pluxml/themes/defaut/timthumb.php?src=data/images/desert.jpg&w=519&h=250&zc=1&q=90" alt="Nouvel article" width="519px" height="250px" class="main-image" /></a>

Lorsque je clic sur le lien de la miniature timthumb dans le code source voila ce qui apparaît :

<h1>A TimThumb error has occured</h1>The following error(s) occured:<br /><ul><li>Could not find the internal image you specified.</li></ul><br /><br />Query String : src=data/images/desert.jpg&amp;w=519&amp;h=250&amp;zc=1&amp;q=90<br />TimThumb version : 2.8.5</pre>

Qu'est ce que j'ai encore fait comme bêtise ?

Bloody · janvier 2012

Wiksa as-tu créé un répertoire /cache et /temp dans ton thème?

Sinon, titmhumb ne peut pas créer de miniature à partir de l'image originale.

Wiksa · janvier 2012

J'avais créé un répertoire cache mais pas temp, ce que je viens de faire. Mais ça ne change rien...

Je précise que je fais des tests en local avec Easyphp et sur un serveur free.

Je viens d'installer le thème Skeptical de Hamtaro sur la 5.1.5 et les miniatures n'apparaissent pas non plus...

Bloody · janvier 2012

Quel CHMOD as-tu mis sur /cache ?

Wiksa · janvier 2012

En local c'est nécessaire ?!
Je viens de mettre un 777 sur les répertoires cache et temp serveur free et ça ne marche toujours pas.

k610i · janvier 2012

Très intéressant ça ! (en découvre tous les jours)

Wiksa, si tu arrives à tout bien installer sur free, j'me retournerai vers toi quand j'essayerai.

Bloody · janvier 2012

Je croyais que les modif de CHMOS sous Free impossible.

Au fait, utilises-tu la version thimtumb 2 .

Wiksa · janvier 2012

Effectivement, je me suis rendu compte par la suite que Filezilla me renvoyait un message d'erreur... Sinon j'ai trouvé le problème: il venait de la majuscule de mon alias Easyphp, Timthumb n'a pas l'air des les digérer. Sujet résolu donc !
Merci pour ton aide Bloody !

Bloody · janvier 2012

Bon à savoir.

Essaies Wamp.

Sinon de rien, je n'ai pas fait grand chose.

Wiksa · décembre 2012

Bonsoir,

Je suis en train de préparer un thème pour la future version 5.1.7. Je sais c'est un peu top, mais j'anticipe ! J'avais commencé à coder le thème avec la 5.1.6 et je n'avais eu aucun problème à intégrer Timthumb. Mais en insérant le code relatif à Timthumb de la 5.1.6 dans mon thème 5.1.7, j'obtiens trois messages d'erreur de PHP.

Notice: Undefined offset: 1 in C:\Program Files (x86)\EasyPHP-12.1\www\web2\themes\defaut\home.php on line 15
Warning: Illegal string offset 'extension' in C:\Program Files (x86)\EasyPHP-12.1\www\web2\themes\defaut\home.php on line 17
Notice: Uninitialized string offset: 0 in C:\Program Files (x86)\EasyPHP-12.1\www\web2\themes\defaut\home.php on line 17

Le code de la home :

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
					
	<article class="article">
						
		<?php ob_start();
				
			$plxShow->artContent($chapo=true);
			$content = ob_get_clean();
			$masque = '#<img.+src="(.+?)"#i'; preg_match($masque, $content, $resultats);
			$extension = pathinfo($resultats[1], PATHINFO_EXTENSION); ?>
							
			<?php if($extension['extension'] == ('jpg'||'jpeg'||'png'||'gif')) : ?>
															 
			<a href="<?php $plxShow->artUrl() ?>">
								
				<div class="overlay">LIRE LA SUITE</div>
				<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php $plxShow->racine() ?>/<?php echo $resultats[1]; ?>&amp;w=310&amp;h=190&amp;zc=1&amp;q=90" alt="<?php $plxShow->artTitle(''); ?>" style="height: 190px; width: 100%;" class="main-image" />
							
			</a>
							
			<?php else : ?>
						
			<a href="<?php $plxShow->artUrl() ?>">
							
				<div class="overlay">LIRE LA SUITE</div>
				<img src="<?php $plxShow->template(); ?>/timthumb.php?src=<?php $plxShow->template(); ?>/img/defaut_timthumb.jpg&amp;w=310&amp;h=190&amp;zc=1&amp;q=90" alt="<?php $plxShow->artTitle(''); ?>" style="height: 190px; width: 100%;" class="main-image" />
						
			</a>
						
			<?php endif; ?>
					
			<h2><?php $plxShow->artTitle('link'); ?></h2>
			<p class="art-topinfos"><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?>, <?php $plxShow->artDate('le #num_day/#num_month/#num_year(4)'); ?></p>
			<div class="art-chapo"><?php $plxShow->artChapo(); ?></div>
			<p class="art-infos"><?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?> - <?php $plxShow->artNbCom(); ?></p>
						
	</article>
					
<?php endwhile; ?>

La ligne 15 est celle-ci:

$extension = pathinfo($resultats[1], PATHINFO_EXTENSION); ?>

Et la 17 :

<?php if($extension['extension'] == ('jpg'||'jpeg'||'png'||'gif')) : ?>

Je ne trouve pas le problème. Viendrait-il d'un bug ou d'une modif du core de la 5.1.7 ?

EDIT: Je tiens à préciser que le script marche malgré les messages d'erreur. Je le teste en local avec Easyphp.

Jerry Wham · décembre 2012

Cela veut dire que ta regex ($masque = '#<img.+src="(.+?)"#i'; preg_match($masque, $content, $resultats);) ne trouve rien et que donc l'index 1 du tableau $resultats n'est pas défini.

Autrement dit, il n'y a pas d'image dans ton article.

A la place de :

$extension = pathinfo($resultats[1], PATHINFO_EXTENSION);

je mettrais ça :

$extension = (isset($resultats[1]) ? pathinfo($resultats[1], PATHINFO_EXTENSION) : '';

et à la place de :

<?php if($extension['extension'] == ('jpg'||'jpeg'||'png'||'gif')) : ?>

je mettrais :

<?php if(isset($extension['extension']) && $extension['extension'] == ('jpg'||'jpeg'||'png'||'gif')) : ?>

Wiksa · décembre 2012

Merci Jerry, mais avec ces lignes de code les erreurs disparaissent, mais seule la l'image générique de Timthumb (defaut_timthumb.jpg) s'affiche alors que j'ai des images dans mes articles.

Je pense qu'il y a une parenthèse en trop avant isset dans :

$extension = (isset($resultats[1]) ? pathinfo($resultats[1], PATHINFO_EXTENSION) : '';

EDIT : En fait c'est le if qui n'a pas l'air de fonctionner. Lorsque j’intervertis les 2 lignes qui affichent les images dans ma home, ce n'est plus l'image générique qui s'affiche, mais les miniatures des images de mes articles. En revanche, l'image générique ne s'affiche plus quand elle le doit.

danielsan · décembre 2012

si je ne me trompe pas,
en fait tu crois que ça tourne bien sous la 5.1.6 mais il y a une ligne magique que Stéphane actionne lorsque les versions ne sont pas encore totalement sorties et stables ...

Si elle était actionnée sous la 5.1.6 tu aurais les mêmes erreurs.

Wiksa · décembre 2012

Je ne suis pas sûr de te comprendre. Tout ce que je sais, c'est que ça marche avec la 5.1.6 et pas avec la 5.1.7 pour le moment, mais je ne sais pas pourquoi...

Utilisation du script Timthumb est-il possible ? (long)

Réponses