The Grid : <br> tag

[mlabifa]

Hello guys !

I’ve started using the “The Grid” plugin and I’m extremely satisfied with it so far. But there is one issue I’m stuck with. I hope you guys can help me.

I sometimes have long titles for my articles and, since I want to have control on where a new line is started, I put <br> tags in the titles. It works well : https://petitparcautourdumonde.fr/les-secrets-de-nos-photos-episode-1la-recolte-de-la-canne-a-sucre/

But for a reason I can’t understand, The Grid doesn’t “read” this <br> tag and starts a new line whenever the first one is full, which is unsatisfying : https://petitparcautourdumonde.fr/les-secrets-de-nos-photos/

Any idea on how to fix this ?

[rad]

Hi there,

Thanks for writing in.

The grid automatically strips out the HTML code from the title. Unfortunately, you can’t disable it. But here is a workaround, please add this code to your global custom javascript.

jQuery ( '.tg-item-title a' ).each( function() {

jQuery(this).html( jQuery(this).text().replace(':',':<br>') );

} );

Thanks!

[mlabifa]

Thank you very much for your quick answer Rad, this bit of code was exactly what I was needing.

[mlabifa]

Okay, I actually have one more question :

I tried to extend this workaround so that it also goes <br> on the titles that don’t have a ":". Like in here : https://petitparcautourdumonde.fr/test-de-la-grille-accueil/

jQuery ( '.tg-item-title a' ).each( function() {
jQuery(this).html( jQuery(this).text().replace(':',':<br>') );
jQuery(this).html( jQuery(this).text().replace('ricainsous','ricain<br>sous') );
} );

It worked well for the “ricain sous” part but I lost the benefit of the added <br> after the ":". I guess that’s because the actions are realized in sequence while they should be done simultaneously in order to work properly.

Is it possible to extend this workaround in order to change multiple strings all at the same time ?

[thai]

Hi There,

Please try with this code instead:

jQuery(function($){
	$ ( '.tg-item-title a' ).each( function() {
		var text = $(this).text();
		if(text.indexOf(':') !== -1){
			$(this).html( text.replace(':',':<br>') );
		} else if(text.indexOf('ricainsous') !== -1){
			$(this).html( text.replace('ricainsous','ricain<br>sous') );
		}
	} );
});

Let us know how it goes!

[mlabifa]

It works like a charm ! Thank you very much for your help guys !

[christian]

You’re welcome.