SP Page Builder 5.5.5 – Articles Element Not Working As Expected
Bruce Paine
SP Page Builder Pro: 5.5.5 Joomla Version: 4.4.13 Template: shaper_helixultimate - Default Website: www.comfoot.co.nz
Hello and thank you again in advance for any assistance.
I have been using the 'Articles' element to show the first 9 most recent articles. They are being displayed in three columns and in the 'title' position on my web site's home page.
It works well except for the following two problems:-
-
I have chosen to show Introtext to show useful information about each article. In the case of my website it is a list of attributes relating to shoes. The problem is the text only appears in the last 3 articles in the list, not the first two rows. I have tried not setting a character limit on the Introtext and also specifying a character limit of 100 but in both cases only the last three articles show the intro text.
-
If I choose to hide the Introtext, the article thumbnail images are also hidden. This is not ideal in this situation where the images are as important as the article titles.
What do you recommend?
Bruce Paine
Accepted AnswerHello again,
I have found the cause of this problem.
There is a difference in the html formatting instructions comparing the top 9 recent articles; those that show all the introtext and those that do not. In all cases they appear correctly in the Joomla article editor and when the articles are listed in the category blog view.
The difference is in the html code before the 'read-more' instruction.
Here is an example. The Latest Articles module shows this version correctly...
<img src="/images/shoes/2025_may/hafl_grizzly_stelline_741032_83_1.jpg" alt="Haflinger Grizzly Stelline 741032 Rosenholz" width="354" height="200" style="border: 1px solid black; float: right;" /></em></span></strong>Sizes: 36 to 41<br />Colour: Rosenholz <br />Price: $159.00</p>
But the sizes, colour and price are not visible when this version is used...
<img src="/images/shoes/2025_may/hafl_grizzly_stelline_741032_83_1.jpg" alt="Haflinger Grizzly Stelline 741032 Rosenholz" width="364" height="200" style="border: 1px solid black; float: right;" /></p> <p>Sizes: 36 to 41<br />Colour: Rosenholz<br />Price: $159.00</p>
The difference is the use of <p> </p> in the second example. This is normal practice so perhaps something should be done to ensure that the SP Page Builder element handles both cases.
I hope this is helpful.
Bruce
P.S. In the meantime, I will update the html so that the articles text displays in all cases.
Atick Eashrak Shuvo
Accepted AnswerHi there!
Thank you for bringing this to our attention, and I sincerely apologize for the inconvenience caused.
To assist you more effectively, may I kindly request temporary administrative access to your site? This will allow me to thoroughly investigate and resolve the issue for you.
Before sharing the credentials, I strongly recommend taking a complete backup of your site to ensure all data remains secure.
Looking forward to your response.
Best regards
Bruce Paine
Accepted AnswerHello!
Thanks for your prompt reply!
Yes, this is quite puzzling. I'm not sure if it is a problem with some of the articles, or if it is a bug. It will be good to know what you discover.
I would like to explain further what I am hoping to see...
Each shoe article includes text which includes shoe sizes, widths, colours and price. The text is always entered at the start of the article.
I have added 6 new articles. They all have sizes, colours and prices included but none of those details are showing. Just the title and photograph. Some older articles, are visible on the third row of output, and are showing the shoe details.
A backup has been saved so it is safe for you to examine the situation.
All the best!
Bruce Paine
Accepted AnswerHere are some further observations...
The layout has improved by selecting 'Editorial' instead of the 'default' setting. However, 'Editorial' layout causes the thumbnail images to be zoomed in, cutting off the sides of some images.
The 'Masonry' layout shows the thumbnail and text perfectly sized, but changes the article order to follow the article columns instead of across the page.
Is it possible to make the 'Editorial' layout show images and text the same was as the 'Masonry' view?
Note: The text is also improved by specifying font, size and line height.
Atick Eashrak Shuvo
Accepted AnswerTo resolve the image cropping issue in the Editorial layout, please add the following CSS to the Custom CSS section of your addon's Style tab:
#addonId img{
object-fit: inherit;
}Bruce Paine
Accepted AnswerThanks for you help but I don't understand what you mean when you refer to 'my addon'? I am using a standard SP Page Builder element. It is not a feature that I have installed.
Are you referring to the template CSS overrides?
Atick Eashrak Shuvo
Accepted AnswerApologies for the misunderstanding—my wording may have caused some confusion. By “your addon,” I wasn’t referring to a separate or custom-installed addon. I meant the standard SP Page Builder addon (element) you’re currently using on the page.
Please open the settings for that specific addon, go to the Style tab, and add the CSS in the Custom CSS section provided there. tinyurl.com/23t9tthb
Bruce Paine
Accepted AnswerOh yes, I was just working that out. Different terminology. Yes I see what you are referring to know. I have never used that section so it is good to learn something new.
OK I will look at that asap.
Bruce Paine
Accepted AnswerI noticed the site module and the comf_modules database table are currently locked. I see you/someone is logged on just now. Are you working on it at the moment?
Bruce Paine
Accepted AnswerOK thanks. Just to clarify, are you still working? I can wait for you to log out before adding the css.
Bruce Paine
Accepted AnswerThanks. I have added the custom css and it has corrected the image size.
So am I correct in my understanding that AddonId exists in the template's CSS Style Sheet?
Sorry my understanding of CSS is a little shaky. I'm out of practice.
Atick Eashrak Shuvo
Accepted AnswerYou're very welcome, and no worries at all—happy to clarify!
The addon ID is not part of the template’s CSS stylesheet. It’s actually a built-in feature of SP Page Builder. Each time you use an addon (element), SP Page Builder automatically generates a unique ID for it—this helps target that specific addon individually.
By using #addonID in the CSS, it ensures that the styles are applied only to that particular addon, without affecting any others on the page. This keeps your layout clean and avoids unintended changes elsewhere.
Bruce Paine
Accepted AnswerAnother thing I now notice is the text (e.g. Sizes: 36 to 41) is quite close to the lower edge of the thumbnail image. Is that something I can also control. Perhaps some padding around the thumbnail.
Atick Eashrak Shuvo
Accepted AnswerYou can add margin padding according to your preference from the addon settings prnt.sc/JEcjtZG3SoEw
Bruce Paine
Accepted AnswerThanks for that explanation. It is a great feature and easy to understand. So is it always #addonID for every SP Page Builder module I might create?
Bruce Paine
Accepted AnswerI see. So in this case it relates to the Articles element from 'Add Elements'. The fact it is in a module is irrelevant.
Bruce Paine
Accepted AnswerSorry again. I'm simply confirming, in my mind, what the 'addon (element)' can be. I assumed it is any element dragged from the 'Add Elements' options on the left panel (backend editor) onto a page section.
Bruce Paine
Accepted AnswerI've tried a few things but cannot adjust the gap between image and text.
I have tried setting padding and margin for the Addon's media and Article Content. But I'm not seeing any difference.
It is not a big issue. Just a little frustrating that the solution is not obvious to me.