THELIA Forum

Bonjour, à tous,

Afin de couper et séparer certains textes pour que les internautes puissent lire plus selon envie et améliorer la lisibilité
L'insertion une balise readmore du module Tinymce via le plugin pagebreak dans un texte description n'a aucun effet  > mais aucune insertion et seule réponse en html
sur la page concernée
<!--pagebreak-->

par contre
le fait d'ajouter une balise toute simple de séparation de type <hr />
c'est ok affichage de la ligne

dans la partie concernée par cette demande la description est en nofilter

Ai-je oublié quelque chose ?

une idée à suivre ?

Core Thelia 2.5.4
Plugin Tinymce 2.5.4

merci pour vos retours

Steph

Last edited by stephst84 (02-04-2024 09:42:40)

Donc au lieu de créer une branche du plugin tinymce, je suis parti sur l'insertion d'un script qui va créer l'option Lire la suite
Texte affichage si vous n'avez pas de texte, pas d'affichage

Le script en question https://jedfoster.com/Readmore.js

Déclaration du script dans la page concernée pour moi page category.html dans la partie header
là où sont situés tous les blocks d'init du template

Il agit sur la partie

$description

 
{block name="javascript-initialization"}
 <script>
	 $('.description').readmore({ speed: 75, lessLink: '<a class="button-readmore" href="#" data-readmore-toggle="rmjs">Réduire</a>' });
/////////////////// Déclarations des variables ////////////////////////////////////////////////////////
var readmore_btn_open = '<a class="button_Readmore" href="#">' +
    creactiv_readmore_open + '</a>';
var readmore_btn_close = '<a class="button_Readmore" href="#">' +
    creactiv_readmore_close + '</a>';
var readmore_speed = 200;
</script

L'appel du script

	{javascripts file="assets/dist/js/vendors/readmore.js"}
		<script src="{$asset_url}"></script>
	{/javascripts}

Le css pour accompagner

 [data-readmore]{padding-bottom:1.25rem;position:relative}
 [data-readmore]:after{background:linear-gradient(hsla(0,0%,96.1%,0),#fff 99%);bottom:0;content:"";display:block;height:1.25rem;left:0;opacity:1;position:absolute;transition:all .2s ease-in-out;width:100%}
 [data-readmore]:not([aria-expanded]):after,[data-readmore][aria-expanded=true]:after{opacity:0}
 [data-readmore]>:first-child{margin-top:0!important}
 [data-readmore]>:last-child{margin-bottom:0}
 .button_Readmore{color:#1b1b1b;display:inline-block;font-weight:700;margin-top:.625rem;width:auto}

Vous pouvez jouer sur les marges que vous désirer affecter p {margin:.6em 0} h1, h2, h3,h4,h5{margin-bottom:.2em!important;margin-top:.4em!important},
ul{margin:1em 0 1em 1em}

Le script agit sur les media queries pour les devices 

css /* Show 8 lines on larger screens */ @media screen and (min-width: 640px) { article { max-height: 12em; } }

Exemple du script https://www.alexandregirot.com/fractionnisme.html

Il y a certainement beaucoup plus adéquat comme solution mais celle-ci convenait parfaitement à la situation
Si vous avez des remarques, faites en part

Bonne journée