Forum CMS Made Simple Francophone

Aide francophone sur CMS Made Simple

Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#1 15/04/2013 12:12:57

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Utilisation de cgsi_convert

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.4
#~ Url du site : furie.be
#~ Hébergeur / Soft : firstheberg
#~ Informations Système :
#~      ----------------------------------------------
#~      Cms Version: 1.11.4
#~      Installed Modules:
#~          CMSMailer: 5.2.1
#~          FileManager: 1.4.3
#~          MenuManager: 1.8.5
#~          MicroTiny: 1.2.5
#~          ModuleManager: 1.5.5
#~          News: 2.12.10
#~          Search: 1.7.7
#~          CGExtensions: 1.32.2
#~          CGSmartImage: 1.10.7
#~          SiteMapMadeSimple: 1.2.7
#~          Captcha: 0.4.6
#~          CGFeedMaker: 1.0.17
#~          Shootbox: 1.3.2
#~          JQueryFU: 1.0.5
#~          DownCnt: 2.3.0
#~      Config Information:
#~          php_memory_limit:
#~          process_whole_template:
#~          output_compression:
#~          max_upload_size: 2000000
#~          url_rewriting: mod_rewrite
#~          page_extension: .html
#~          query_var: page
#~          image_manipulation_prog: GD
#~          auto_alias_content: true
#~          locale:
#~          default_encoding: utf-8
#~          admin_encoding: utf-8
#~          set_names: true
#~      Php Information:
#~          phpversion: 5.3.3-7+squeeze14
#~          md5_function: On (Vrai)
#~          gd_version: 2
#~          tempnam_function: On (Vrai)
#~          magic_quotes_runtime: Off (Faux)
#~          E_STRICT: 0
#~          E_DEPRECATED: 0
#~          memory_limit: 128M
#~          max_execution_time: 30
#~          output_buffering: 4096
#~          safe_mode: Off (Faux)
#~          file_uploads: On (Vrai)
#~          post_max_size: 8M
#~          upload_max_filesize: 2M
#~          session_save_path: /var/lib/php5 (1733)
#~          session_use_cookies: On (Vrai)
#~          xml_function: On (Vrai)
#~          xmlreader_class: On (Vrai)
#~      Server Information:
#~          Server Api: cgi-fcgi
#~          Server Db Type: MySQL (mysql)
#~          Server Db Version: 5.1.66
#~          Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~      ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Salut tout le monde

J'ai une question à ceux qui ont déjà utilisé CGSmartImage dans ses retranchements.

Je suis en train de chercher à me faciliter la vie dans la gestion de mon blog perso en tentant de m'abstraire de la problématique : redimensionner les images uploadées afin qu'elles soient à une taille acceptable dans le blog automatiquement.

J'ai donc creusé du côté de CGSmartImage, et -feignasse que je suis- particulièrement du côté de {cgsi_convert} qui me permettrait de ne pas me soucier de quoi que ce soit lorsque l'inclue des images dans mes textes.

Le principe :

{cgsi_convert}{content}{/cgsi_convert} va parcourir le contenu de mes pages/news et transformer à la volée les images trouvées dedans.

Sur le papier c'est super, dans les faits beaucoup moins évident qu'il n'y parait.

Voici quelques tests, mon image inclue génère ce code au naturel : <img src="uploads/images/blog/2013-04-15_104503.png" alt="" width="996" height="500" />, je souhaiterais ne rien devoir modifier dedans et tout gérer depuis CGSmartImage

Je souhaite évidement avoir une image de 300 pixel de large maxi et conserver la proportion de l'image

Voilà les paramètres utilisés dans tous les sens et toutes les combinaisons possibles :

filter_resize="w,300"
max_width="300"
noauto='1'

http://www.furie.be/ test_cgi.html

Comme vous allez vous en apercevoir, c'est loin d'être une réussite  sad

Quelqu'un aurait il une idée ?

PS :  filter_resizetofit="" aurait pu convenir mais ce paramètre "remplit" la zone inoccupée par l'image afin de correspondre aux dimensions passées en paramètres. Exemple  filter_resizetofit="100,100" vous produira un carré MEME si votre image d'origine est une image faisant 500*1000.

Hors ligne

#2 15/04/2013 12:32:42

exacore
Membre
Lieu : Pau (France)
Inscription : 04/02/2013
Messages : 98
Site Web

Re : Utilisation de cgsi_convert

Salut Bess, je vais te donner (ainsi qu'aux autres) mon code perso pour faire tout çà :

[== Smarty ==]
/* ************************************************************************** *\
	ExaCore Framework - OptimizedContent
	Prerequis : CMSMS 1.11+
	Version :   13.02.05
	Auteur :    Jocelyn LUSSEAU ([email protected])
\* ************************************************************************** */

// Variables
$content = $params['content'] ;

// Traitement
$doc = new DOMDocument();
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");

@$doc->loadHTML($content);

foreach ($doc->getElementsByTagName('img') as $img) {
	if ($img->hasAttribute('src') AND substr($img->getAttribute('src'), 0, 7) == "uploads") {
		
		$img_source = $img->getAttribute('src');
		$img_width = $img->getAttribute('width');
		$img_height = $img->getAttribute('height');
		
		$smarty_data = "{CGSmartImage src=\"$img_source\" width=$img_width height=$img_height notag=true}";
		@ob_start();
		echo $smarty->display('string:'.$smarty_data) ;
		$_contents = @ob_get_contents();
		@ob_end_clean();

		$img->setAttribute("src", $_contents);
		
	}
}

// Recuperation du resultat du traitement
$result = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $doc->saveHTML()));

// Optimisation du traitement
$result = str_replace(chr(13),'',$result);

$result = html_entity_decode($result, ENT_QUOTES, "UTF-8");

// Ajout des espaces insecables
$result = str_replace(" :", "&nbsp;:", $result) ;
$result = str_replace(" !", "&nbsp;!", $result) ;
$result = str_replace(" ?", "&nbsp;?", $result) ;
$result = str_replace(" ;", "&nbsp;;", $result) ;
$result = str_replace(" %", "&nbsp;%", $result) ;
$result = str_replace(" €", "&nbsp;€", $result) ;
$result = str_replace(" »", "&nbsp;»", $result) ;
$result = str_replace("« ", "«&nbsp;", $result) ;

// Eval Smarty
@ob_start();
echo $smarty->display('string:'.$result) ;
$result = @ob_get_contents();
@ob_end_clean();

// Affichage du resultat
echo $result ;

Puis on appelle cette balise utilisateur de la sorte :

[== Indéfini ==]
{content assign="content"}
{optimizedcontent content=$content}

Ce petit bout de code « analyse » le contenu de la page, remplace l'appel des images par le module CGSmartImage et affiche donc les images à la taille indiquée dans TinyMCE.
En plus il rajoute des espaces insécables pour les points d'exclamation, interrogation, etc pour éviter qu'ils ne se retrouvent orphelins sur une ligne.

Le seul revers de la médaille c'est que dans le BackOffice les images chargées dans l'éditeur sont en taille réelle (mais ça n'impacte que l'éditeur du site).


Exacore - Freelance en communication

Hors ligne

#3 15/04/2013 13:33:54

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Utilisation de cgsi_convert

L'idée du post-compilateur est intéressante exacore mais cela implique donc que côté back-office tu sois obligé de changer la dimension des images

=> quid du ratio ? tu es obligé de le recalculer manuellement ?
=> quid du changement de largeur du site ? tu es obligé de modifier tous tes appels aux balises images ?

Je me dis effectivement que je vais devoir modifier moi même les valeurs dans le WYSIWYG si je souhaites une vue BO identique au FO de toute manière ...

Pour l'instant j'en suis à :

{cgsi_convert filter_resize='w,550'}<img src="uploads/images/blog/2013-04-15_104503.png" alt="" width="500" />{/cgsi_convert}

avec width="500" la valeur modifiée par mes soins dans le WYSIWYG. C'est pas aussi "full automatique" que je souhaitais mais encore une fois, il est débile de travailler avec une vue BO qui diffère du FO...

Disons que je m'en sort ainsi ...

Maintenant une question supplémentaire toujours en rapport avec {cgsi_convert}, j'ai pas l'impression que l'option rel='string' fonctionne des masses... quelqu'un pour me confirmer ?

(optional) rel="75" - Utilisé lors de la création d'une balise d'image, il permet de spécifier un attribut rel optionnel (utilisé typiquement dans les albums javascript). e.g: rel="album"

{cgsi_convert filter_resize='w,550' rel='album'}<img src="uploads/images/blog/2013-04-15_104503.png" alt="" width="500"/>{/cgsi_convert}

me génère :

<img width="550" alt="xxxxx" src="yyyyy" />

neutral

Hors ligne

#4 16/04/2013 22:52:53

Phil
Membre
Lieu : Asnières sur seine
Inscription : 15/01/2012
Messages : 41

Re : Utilisation de cgsi_convert

Bonjour bess,

le problème est que "filter_resize" avec la balise "cgsi_convert" n'écrase pas les attributs width et height.

l'image est donc bien redimensionnée mais mal affichée.

La solution à appliquer dans le gabarit de page:

[== HTML ==]
{content assign="page_content"}
{cgsi_convert width=300}
{$page_content|regex_replace:"/(width|height)=\"\d*\"\s/":""}
{/cgsi_convert}

trouvée ici : bug report cgsmartimage

Dernière modification par Phil (16/04/2013 22:54:06)

Hors ligne

#5 17/04/2013 09:19:31

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Utilisation de cgsi_convert

très intéressant comme idée, la réaction de CG également :

a:  {cgsi_convert} is slow and inefficient for wrapping around a single image. 
Use the {CGSmartImage} tag

Hors ligne

#6 02/07/2013 08:52:27

EgorZindy
Petit nouveau
Inscription : 02/07/2013
Messages : 3

Re : Utilisation de cgsi_convert

Merci exacore,

super sympa d'avoir partage ton code. En fait ca m'a donne des idees.

J'avais deja un User Defined Tag (balise utilisateur?) pour combiner mes images affichees en vignette avec un lien vers une image plus grande pour fancybox (CGSmartImage dans les 2 cas).

Du coup, j'ai adapte ta boucle et j'utilise $smarty->display('eval:'. plutot que $smarty->display('string:'. Plus loin, je remplace completement l'element img avec le code genere par mon UDT (en utilisant $img->parentNode->replaceChild ):

=== partie interessante ===

		//echo $smarty->display('string:'.$smarty_data) ;
                echo $smarty->display('eval:'.$smarty_data) ;
		$_contents = @ob_get_contents();
		@ob_end_clean();
                
                //remplacer l'element img
                $new = $doc->createTextNode($_contents); 
                $img->parentNode->replaceChild($new,$img);

		//$img->setAttribute("src", $_contents);

A plus  smile

Hors ligne

#7 02/07/2013 10:39:17

exacore
Membre
Lieu : Pau (France)
Inscription : 04/02/2013
Messages : 98
Site Web

Re : Utilisation de cgsi_convert

Ca semble mieux en effet, je note.


Exacore - Freelance en communication

Hors ligne

#8 02/07/2013 10:44:22

exacore
Membre
Lieu : Pau (France)
Inscription : 04/02/2013
Messages : 98
Site Web

Re : Utilisation de cgsi_convert

Je me répond à moi-même, mais au final je ne sais pas si c'est la meilleure solution ce que tu proposes EgorZindy.

Si l'utilisateur a rajouté des classes ou autres sur l'image, avec ton code tu perds ces informations. Alors que je ne fais que remplacer le contenu de « src ».

Qu'en penses-tu ?


Exacore - Freelance en communication

Hors ligne

#9 02/07/2013 14:01:42

EgorZindy
Petit nouveau
Inscription : 02/07/2013
Messages : 3

Re : Utilisation de cgsi_convert

Salut exacore,

Je voulais afficher des petites vignettes qui ont toutes la meme taille. Du coup, le fait de perdre les informations ajoutees par l'utilisateur ne me derange pas (pour l'instant, mais on va voir).


Ce que j'avais vu en copiant ton code, c'est que mes images n'etaient pas redimensionnees dans mon layout "responsif" (base sur simplex). C'est parce que tu as garde le squelette <img width= height= et que tu ne changes que le contenu du tag src=

Mais bon, ca depend de ce que tu veux faire.

Aussi, vu que tu as deja

		$img_source = $img->getAttribute('src');
		$img_width = $img->getAttribute('width');
		$img_height = $img->getAttribute('height');

tu peux passer ces informations a CGSmartImage dans la chaine de caracteres $smarty_data.

Hors ligne

#10 04/07/2013 00:25:47

EgorZindy
Petit nouveau
Inscription : 02/07/2013
Messages : 3

Re : Utilisation de cgsi_convert

Bon,

j'ai appris un truc, c'est que le "foreach as $img" et modifier $img a l'interieur de la boucle, ca ne marche pas.

J'ai trouve une recette sur Stack Overflow que j'ai adapte a mon probleme. J'ai rajoute style / alt / class a la liste des tags lus et copiés dans le nouvel element CGSmartImage.

@$doc->loadHTML($content);

//following http://stackoverflow.com/questions/11067587/dom-replacechild-not-replacing-all-specified-elements

$imgElements = $doc->getElementsByTagName('img');
$imgCount = $imgElements->length;

for($i= $imgCount-1;$i>=0;--$i) {
	$img=$imgElements->item($i);

	if ($img->hasAttribute('src') AND substr($img->getAttribute('src'), 0, 7) == "uploads") {		
		$img_source = $img->getAttribute('src');
		$img_width = $img->getAttribute('width');
		$img_height = $img->getAttribute('height');
                $img_title = $img->getAttribute('title');
                $img_alt = $img->getAttribute('alt');
                $img_style = $img->getAttribute('style');
                $img_class = $img->getAttribute('class');
		
		$smarty_data = "{CGSmartImage src=\"$img_source\" filter_resizetofit=\"$img_width,$img_height\" title=\"$img_title\" alt=\"$img_alt\" class=\"$img_class\" style=\"$img_style\"}";

		@ob_start();
                echo $smarty->display('eval:'.$smarty_data) ;
		$_contents = @ob_get_contents();
		@ob_end_clean();
                
                $new = $doc->createTextNode($_contents); 
                $img->parentNode->replaceChild($new,$img);		
	}
}

Voila voila.

Dernière modification par EgorZindy (04/07/2013 00:32:35)

Hors ligne

#11 04/07/2013 10:35:28

exacore
Membre
Lieu : Pau (France)
Inscription : 04/02/2013
Messages : 98
Site Web

Re : Utilisation de cgsi_convert

Le problème EgorZindy c'est que les attributs d'une image sont illimités. Ils ne se limitent pas à « alt », « style » et « class ».
Avec les « data attributes » (http://html5doctor.com/html5-custom-data-attributes/), nous pouvons en créer une infinité et ta boucle va tous les perdre.

Je sais bien que peux d'utilisateur les utilisent mais pour parer à tous les cas de figure il me semble judicieux d'en tenir compte.

Qu'en penses-tu ?


Exacore - Freelance en communication

Hors ligne

Pied de page des forums