Mettre une condition d'affichage dans un fichier TPL

[picnoc]

Bonjour,

 

J'ai un fichier TPL qui gère l'affichage d'une partie de ma première page. Dans ce fichier, il y a une fonction qui gère l'affichage du nom du produit et qui la tronque à 17 caractères. C'est bien pour les petits écrans mais pour ceux qui peuvent afficher 1200px, c'est franchement dommage, je pourrait passer à 30.

 

Donc voilà ma question, elle est simple mais pour un bidouilleur pas trop mauvais mais en tout cas pas un programmeur, c'est un peu plus compliqué.

J'aimerai mettre une condition du genre si l'affichage est à 1200 => $product.name|truncate:30 et sinon $product.name|truncate:17

 

La ligne en question qui agit sur ce paramètre...

<h5><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:17:'...'|escape:'htmlall':'UTF-8'}</a></h5>

Merci à celui qui pourra m'aider !

 

Thierry

[Johann]

Pour ça, il faudrait passer la largeur de l'écran (que tu peux avoir en JS) au tpl

 

Un autre moyen (peut-être plus propre), serait de faire ça en CSS avec du responsive :

- tu mets deux balises <a href...>, avec des id différentes, et des truncate différents

- dans ta CSS, avec les media queries, tu fais un display:none de l'id qui ne correspondant pas à ta résolution

[coeos.pro]

sinon en CSS tu utilises overflow: hidden; word-break: break-all; avec un width défini en px

[picnoc]

Merci à vous deux pour vos réponses... 

 

Ca me parrait de bonnes idéee...   ou plutôt j'en sait rien car vous me parlez chinois...    mais ce sont des pistes que notre amis à tous devrait m'éclaircir !

 

Merci encore !

[picnoc]

Je reviens vers vous...

J'ai un peu planché (juste quelques heures... ) sur ce qui vous parait surement simple et j'ai finalement mis ça dans mes css en suivant la piste de coeos.pro : 

 

	overflow: hidden; 
	white-space: nowrap;
	text-overflow: ellipsis;

Ca me donne à peu de chose ce que je cherchais. Est-ce que c'est propre ? Edited July 28, 2016 by picnoc (see edit history)