Image d'accroche "cliquable" (zoom)

chilperik · mai 2016

Bonjour,

Après quelques recherches infructueuses je cherche à faire d'une image d'accroche un lien cliquable pour l'afficher en grand à partir de sa miniature.

Je cherche a automatiser cela pour une personne (rédacteur) ne pouvant/savant pas toucher à la source des articles, je souhaite quelque chose de simple comme :

- uploader une image via le gestionnaire de médias en générant une miniature.
- utiliser sa miniature comme image d'accroche 
- publier l'article 
- pouvoir cliquer sur la miniature d'accroche pour voir l'image en taille réel (via lightbox ou autre...)

Le blog en question utilise la version 5.5 de pluxml

Avez vous des pistes ?

D'avance merci

edit : correction ortho

Beduck · mai 2016

Bonjour,

As tu déjà testé le plugin MyZoombox présent ici ?
http://pluxopolis.net/myplugins

chilperik · mai 2016

Bonjour,

Oui j'ai essayé les plugins plxzoombox et colorbox, ça fonctionne pour une image que j'insert dans un article à partir de Ckeditor mais la miniature d'accroche de l'article n'est toujours pas "zoomable"

Je pense que je dois faire une modif ccs ou php quelque part mais j'avoue que je suis perdu et je n'ai que de maigres connaissances ^^

j'aimerai aussi éviter de toucher au core ou de passer par des plugins c'est pour ça que j'utilise par défaut la fonction d'image d'accroche fourni par pluxml

Suricat · mai 2016

Bonjour,

Est-ce que c'est bien l'URL de la miniature qui est mise comme image d'accroche ?
Il ne faut pas mettre l'URL de l'image d'origine si tu utilises colorBox...

Stéphane · mai 2016

Voilà un début. Dans le fichier home.php, à la place de

<?php $plxShow->artThumbnail(); ?>

remplace par

<?php
	$format = '<a href="#img_url" title="#img_title"><img class="art_thumbnail" src="#tb_url" alt="#img_alt" /></a>';
	#--
	$artThumbnail = $plxMotor->plxRecord_arts->f('thumbnail');
	$ext = strtolower(strrchr($artThumbnail,'.'));
	$filename = basename($artThumbnail, $ext );
	$path = $plxMotor->aConf['medias'];
	#--
	$row = str_replace('#img_url', $plxMotor->urlRewrite($artThumbnail), $format);
	$row = str_replace('#tb_url', $plxMotor->urlRewrite($path.$filename.'.tb'.$ext), $row);
	$row = str_replace('#img_title', plxUtils::strCheck($plxMotor->plxRecord_arts->f('thumbnail_title')), $row);
	$row = str_replace('#img_alt', $plxMotor->plxRecord_arts->f('thumbnail_alt'), $row);
	#--
	echo $row;
?>

pour utiliser un lightbox il faudra rajouter dans le format ($format) au niveau de la balise <a> le code nécessaire pour l'interprétation jquery

Pierre · mai 2016

Et pourquoi ne pas utiliser un thème déjà fait qui a la fonction installée du premier jour sans aucun plugin?

Il est possible que ça force à ouvrir les fichiers source mais seulement pour paramétrer un chiffre ou un mot ici et là. Ce n'est pas pratiquer un exorcisme, le code HTML existe depuis des décennies et est très simple quand on y va doucement avec l'aide des amis du forum.

chilperik · mai 2016

@Suricat : Yes ça fonctionne ! J'ai un peu fait mon boulet sur le coup....

@Stéphane : Ta solution ressemble beaucoup à ce que je cherchais, c'est à dire ne pas passer par un plugin, je vais étudier tout ça ! Merci.

@Pierre : J'ai pas tout compris ^^ la personne en question qui doit utiliser le blog c'est mon père 70ans écrivain et pour lui je t'assures que le HTML ressemble à un exorcisme...

Pierre · mai 2016

Celui qui utilise le blog n'a aucune modification à faire, il écrit des articles et leur assigne des images d'accroche. Si son fils veut bien lui faire son installation, c'est lui qui passera quelques minutes/heures/jours/mois à faire les ajustements, une seule fois. Quand tout fonctionne, plus jamais besoin d'ouvrir autre chose que l'admin.

Stéphane · mai 2016

@Pierre: il n'y a aucune solution toute faite pour répondre à la demande de chilperik autre que des lignes de code comme celles que j'ai donné (à mettre directement dans le thème, ou faire un dev spécifique via un plugin mais basé sur le même principe). Inutile de chercher à faire autrement. ça ne sera pas possible techniquement ou une usine à gaz

Pierre · mai 2016

Désolé mais je ne suis pas du tout d'accord. Notre ami indique clairement le comportement qu'il désire voir imbriquer dans son site. Il est tout à fait plausible d'inclure une fonction de type lightbox à n'importe quel thème, même celui par défaut.

Ma suggestion d'utiliser un thème déjà fait est pour sauver du temps, mais il me fera plaisir de sortir de ma tendance habituelle et d'inclure une lightbox à un thème par défaut si les gens ne comprennent pas que la vie sans plugin existe aussi.

Stéphane · mai 2016

le problème n'est pas de mettre une lightbox mais de mettre un lien qui pointe vers l'image d'accroche et qui affiche sa miniature.
Evidemment après avec jquery on peut à partir de ce lien avoir le comportement lighbox.
Ce lien faut le construire à partir des données que seul PluXml peut renvoyer. D'où le code php proposé

Suricat · mai 2016

Mais le code php proposé peut être incorporé dans un thème, donc vous avez tous les deux raison...

Pierre · mai 2016

Parce que les gens sont habitués au comportement d'une lightbox, ils ne saisissent pas toujours les éléments javascript et autres qui se trouvent derrière. Le bout de code de Stéphane fait un bon travail pour modifier le comportement de base mais il risque d'être cruellement comparé aux artifices jquery, ajax et autres sur le marché.

Ne sachant pas le niveau de connaissances de nos interlocuteurs, je prendrai le temps de monter le concept d'un thème "par defaut extra" qui incluera une fonction lightbox. Je m'en tiendrai au plus simple, aucune lightbox sur l'accueil, une simple pour l'article et une galerie pour la page de catégorie. Ça donnera une version immédiatement utilisable, sans prétention et facile à étudier pour les intrépides exorcistes...

Pierre · mai 2016

Sous réserve de sa validation, le thème devrait arriver bientôt dans Ressources. Il se nomme defoBox pour ne pas trahir son origine qui serait assez difficile à nier... Tel que prévu, cette preuve de concept affiche les images avec un utilitaire de type lightbox. J'ai choisi un grand classique, Fancybox, les appels à ses fonctions satellites sont dans le header.php juste au cas où des aventuriers les installaient. J'ai failli laisser les démo mais ça finit par alourdir et porter à confusion.

Les nouvelles fonctions de valeur ajoutée: les pages d'articles ouvrent leur image d'accroche en mode solo, les pages de catégories ouvrent en diapo les images d'accroche de leurs articles respectifs.

Un salut à un CMS de base qui fait un excellent travail et qui permet d'expérimenter un peu.

Stéphane · mai 2016

@Pierre: ce que tu as fait dans le theme defoBox est très bien (et fonctionnel) au bémol que ça ne répond pas à la demande de chilperik qui voulait:

1. afficher la miniature de l'image uploadé par le gestionnaire de medias, c'est à dire le fichier avec .tb dans son nom (exemple: image.tb.png)
2. quand on clic dessus afficher en grand l'image d'accroche (représenté physiquement par le fichier image.png) qui est ajouté lors de la rédaction de l'article
3. la cerise sur le gateau étant l'utilisation de lightbox pour afficher image.png (ce que fait ton thème)

D'où mon instance sur l'utilisation obligatoire de code adapté pour répondre à la demande, car le code natif de PluXml (via la fonction artThumbnail) ne permet pas de le faire

Sinon oui ton thème utilise lightbox pour afficher en grand l'image d'accroche (mais sans répondre à la demande initiale de chilperik)

Oui je chipote

En tout cas merci pour ta contribution pour le thème

Stéphane · mai 2016

et comme je chipote je m'autocritique également car le code que j'ai donné est erroné par raport à la demande de chilperik

utiliser sa miniature comme image d'accroche

je suis parti du fait que c'est le fichier image.png qui est mis en image d'accroche et pas sa miniature image.tb.png
donc il faudrait faire quelque modif dans ce que j'ai proposé

edit: après réflexion avec moi même (lol), je pense qu'on pourrait s'en sortir en ne codant la demande qu'avec du jquery en conservant la fonction artThumbnail, qu'avec du javascript, mais ça ferait un peu usine à gaz.

Pierre · mai 2016

Je n'utilise absolument jamais de versions miniaturisées des image que je charge dans médias. Aucun .tb n'est créé et tout fonctionne très bien pour les voir en petit format. Pour moi, le principe de la multi-sauvegarde est d'une autre époque. Le pré-traitement des images permet d'adapter une photo à n'importe quelle situation, réduire sa taille est un jeu d'enfant.

J'ai pris un chemin très court dans mon thème théorique, je fixe la largeur à 50%. La version lightbox est fixée par son propre css.

chilperik · juin 2016

Et bien merci autant d'attention me touche !

Je ne pensais pas déchaîner les foules avec ma question ^^

il est vrai que je préfère utiliser les fonctions de base d’où l'utilisation de la miniature même si c'est d'un autre age n'oublions pas que c'est pour mon vieux hihi. Il est facile pour lui de comprendre l’utilisation d'une miniature comme image d'accroche.

Après les deux théories se valent : utiliser une image unique en taille réelle comme image d'accroche et faire un sorte que la structure du thème la réduise en miniature avec un zoom déclenché par un clique. C'est ce que veut faire pierre si j'ai bien compris.

En tout cas je le redis merci je vais tester les deux méthodes et voir celle qui correspond au mieux à mes besoins

Pierre · juin 2016

Il faut pas s'en faire si les idées sont débattues, ça ne fera qu'avancer le produit sur le chemin de la perfection. Utiliser une petite image pour la faire ouvrir dans un diaporama ou simplement une lightbox, c'est une question de fonctionnalité, d'expérience usager, rien avoir avec la méthode de stockage et de "rappel".

Cette méthode d'une galerie de petites images qui deviennent grandes est pratiquement la norme de toutes façons. Mon point étant surtout la nécessité ou pas de créer deux fichiers sur le serveur pour ces deux tailles. Autrefois, il n'était pas rare de sauvegarder jusqu'à 5 formats de la même image pour prévoir toutes les possibilités. Mon avis est simplement que les processeurs modernes permettent de renvoyer une page raisonnable avec quelques images dans leur fichier original mais réduite en taille d'affichage seulement.

Bonne chance dans la production, et dans la formation du paternel, on verra le résultat.

chilperik · juin 2016

Je viens de tester le thème de pierre mais j'obtiens un site sans mise en forme...

Suricat a écrit:

Bonjour,

Est-ce que c'est bien l'URL de la miniature qui est mise comme image d'accroche ?
Il ne faut pas mettre l'URL de l'image d'origine si tu utilises colorBox...

Finalement c'est l'usage de colorbox qui est le plus simple pour moi même si ça rajoute un plugin. Ça sera la solution retenue : on met juste l'image miniature dans l'accroche de l'article et elle devient "zoomable"

Je ne pensais pas que ça engendrait autant de modification avec ma question naïve ^^ je pensais juste à une variable html ou css a modifier.

Il est vrai que c'est un peut la "norme" de pourvoir zoomer en cliquant sur une miniature à tel point qu'avant l’activation de colorbox je cliquais instinctivement sur l'image d'accroche ... sans comprendre pourquoi il ne se passait rien, si on met une "miniature" en place c'est qu'elle renvoie forcement à son image agrandit en cliquant dessus !

J'ai compris grâce a vous que c’était pas aussi simple

Pierre · juin 2016

Bien entendu que le thème DefoBox n'a pas de feuille de style plus élaborée que celui par défaut, c'est exactement l'idée. Le concept sert de base pour prouver que ça se fait assez facilement, pour expliquer comment le faire et possiblement servir de base à quelqu'un qui voudrait démarrer un thème qui aura certainement cette fonction à la fin.

Si quelqu'un veut un thème coloré et moderne qui utilise cette fonctionnalité dans ses outils, une bonne sélection de thèmes existe dans Ressources. Divers plugins font aussi un bout de chemin en ajout à un thème choisi. Si jamais on ne trouve rien à son goût, il restera à visiter les catalogues de thèmes (probablement Wordpress) et me demander de le convertir. Moi j'aime bien des sites comme DesignsCrazed qui sauvent du temps de recherche .Comme toujours, le thème choisi devra être téléchargeable gratuitement pour ne pas enfreindre les droits d'auteur.

Image d'accroche "cliquable" (zoom)

Réponses