[bess]

#~~~~~ 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

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.

[exacore]

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

Code :

[== Smarty ==]
/* ************************************************************************** *\
    ExaCore Framework - OptimizedContent
    Prerequis : CMSMS 1.11+
    Version :   13.02.05
    Auteur :    Jocelyn LUSSEAU (info@exacore.fr)
\* ************************************************************************** */

// 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 :

Code :

[== 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).

[bess]

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" />

:|

[Phil]

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:

Code :

[== 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

[bess]

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

[EgorZindy]

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 ):

Code :

=== 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

[exacore]

Ca semble mieux en effet, je note.

[exacore]

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 ?

[EgorZindy]

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

Code :

        $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.

[EgorZindy]

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.

Code :

@$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.

[exacore]

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 ?