Hello,
I would like to add a custom CSS class to the title of the post if it’s very long so it doesn’t break my design. Is there a code to count the number of characters of a text (in this case the title of the post)?
Thank you
Regards
Hi Marco,
That approach sounds a little complicated.
Perhaps you can use the <Length> tag:
Otherwise, you could use one of the CSS methods here:
Phil.
1 Like
Hello,
Thank you for you answer but that’s not what I need. I already know how to truncate a text, what I need is to count the number of characters of a text string (the title of the post) and apply (or not) a custom css code depending of its length. I can’t truncate the title of the post, I need to show it as it is so the only way for it to not break my design when iy’s really long whould be to apply a custom CSS code to it and use a smaller font size.
I thought it could be done because I saw a “character_count” reference in that post.
Regards
As I mentioned in that post, my approach to counting characters was massively inefficient so I wouldn’t implement anything like that in the real world. It was more of an experiment to see if it was possible to “hack” the existing tags and attributes to make them even more flexible than they already were.
I’ve been trying for a while now to get an official explanation from the devs about exactly how the Format features that were released in 3.2.8 work, but you can get a clue by reading the changelog:
If tag
Add comparison “matches_pattern” to match value to regular expression
Regex is its own thing and if you run into issues implementing regex logic there’s not much official support we can offer, but in theory that means you could use regex to check the length of the title. It might look something like this, but keep in mind that I just asked ChatGPT for this regex and I’m not personally familiar with how it works:
<If field="title" matches_pattern value="^.{26,}$">
This isn’t currently documented (I’m working on it) so you’re kinda on your own as far as getting this to work, but I figured I’d mention it in case you want to tinker.
Alternatively, you could add a little JS script to your template that could do this, depending on your comfort level with that.
I’m not a CSS whizz so I can’t say if there is a pure CSS solution for this scenario but I would look to adapt the font size based on the container space available, similar to what is described here:
1 Like
Yeah, I’m also not a CSS whiz but when it comes to styling content I’d imagine that it’d always be safest to handle this entirely in the stylesheet since that’s the kind of thing CSS is designed to do. The L&L style tab also supports SCSS natively so there might be some options there but again, I’m no expert.
Hello,
Thank you for your answers.
I’ve tried several alternatives with the “matches_pattern” and regex solution in the template but I can’t make it work.
As for the CSS solution using fluid typography it’s something I’m aware of and sometimes using but it won’t really solve my issue. What I want is to apply different CSS on title depending of its lenght so a title very long title won’t break the design. If I use fluid topography the size of the font will depend on the space available but it will be the same for a short title or a long one so I will need to choose a css rule that make a short title the same size than the long one.
What I want is to have a custom font (let’s say 42px or fluid equivalent rule) for the title but if in case of a title really long apply a css rule like 30px (or fluid equivalent).
Perhaps I’ll finally use PHP to do that in the end, it seems less complicated than regex inside a template.
Regards
Hey @Marcoconut, I finally got some clarification about how L&L’s new regex-related features work and I’ve updated the docs accordingly.
I realized that there were two reasons that the regex I suggested earlier wasn’t working. The first was that I forgot to add delimiters around it, like /regex/. The second is that it seems L&L is parsing the curly braces in the regex as though they were a dynamic tag, since that’s a syntax overlap between regex and L&L.
I spoke to a dev about this and they mentioned that programmatically catching situations like this might paint us into a corner and since regex support is essentially being included as-is in L&L, it seems the way to get around this is to simply use the Raw tag to stop L&L from parsing that. So the following should work:
<If field="title" matches_pattern value="{Raw}/.{26,}/{/Raw}">
You might still go with PHP to do this, but I thought I’d at least update this thread so that if anyone in the future is wondering about this, they’ll have some conclusive answers.
3 Likes
Hello,
Thank you very much for that, I confirm it’s working perfectly like this.
Regards