Add a different class to each item

Question

I have a problem with long article titles at my homepage. https://i.sstatic.net/WAPNV.jpg

I've tried to condense it to one-line by putting the HTML/CSS code in plugins like sourcerer or rokcandy, however it causes a problem - HTML code is sent too for head's >title< and >meta< tags.

I have a "jm-lifestyle" template which shows 9 articles at homepage. Sadly, every element has the same class, so I'm trying to add different classes for all of them.

I found the path of php file which shows the title

components\com_content\views\featured\tmpl\default_item.php

<?php if ($params->get('show_title')) : ?>
<h2 class="item-title" itemprop="name">

So I'm trying to add a different class of h2 by this way:

<?php
foreach (range('a', 'i') as $letter);
?>
<h2 class="item-title_<?php echo $letter  ?>" itemprop="name">

However it makes item-title_i everywhere. I'm not really familiar with php, could you help me how to get another letter in all nine paragraphs? It's important to being not random. I would like them to stay alphabetically (or just the same everytime), so I could make different CSS classes for them. Unless, maybe you have easier way to solve it.

Answer 1

Your output needs to be within the foreach loop:

<?php
foreach (range('a', 'i') as $letter) {
?>
<h2 class="item-title_<?php echo $letter  ?>" itemprop="name">
<?php
}
?>

If you do update default_item.php then make sure you override it in your template. Never override core files or changes are likely to be lost when you patch the site.

I think the simplest solution would actually to use the nth-child selector in CSS. I don't think you actually need to update the HTML to achieve what you are trying to do.

That said, your question seems to suggest a fundamental design mistake, and trying to solve it with code could come back to bite you. A CMS should be dynamic and handle various sizes of content - if you are writing new code each time you add an article, then it is not working as a CMS. Any aesthetic design decision that harms usability isn't a good design choice. Having titles not line up really isn't going to bother any user as long as all the text is skim-readable and clear. If the lack of vertical alignment really bothers, have them in a single column rather than two columns.

Trying to get too much vertical alignment in the days of responsive design seems a waste of time.