Solved SP Page Builder

Formatting Read More linked pages in v6.9.1

Asked by Gurney Environmental 1 week ago Last activity 1 day ago

New to SP Page Builder and have reviewed documentation and some videos, but having a problem. I've created several pages that open fine with a menu item. Have that part down pretty well. However, in one of the main pages (News) created in Page Builder I added a section with a PB element "Articles" and have it set to show the first 6 articles from a category of my Joomla articles. That part (the article summary and pics) and the page itself displays fine. But when you click on one of the Read More links, a new unformatted page opens but without a critical element — a top background header under the menu area (which is a PB section added to all main pages). I have tried both adding the Articles section within the page itself in PB, as well as creating a Joomla/PB module and adding that to the page. Neither works. The Read More pages always come up with no option to format/edit that page.

For the life of me, I can't figure out where I can format the Read More page and insert that top graphic (a section created in PB and used on all pages) so that the Read More pages are formatted when they open. Would really appreciate a hint as to where I can insert it and edit the linked Read More pages.

Example: https://geldemo.com/index.php/news

Appreciate the assistance. Thanks.
Joomla 6.1.3 SP PBP 6.9.1

Accepted answer

Marked as the solution

Rashida Rahman Staff

1 week ago

Hi,

Thanks for the details and the example link.

The Read More links from the regular Articles addon open the standard Joomla article page (/component/content/article/...). SP Page Builder doesn't control that page, which is why you can't edit it or add your header section there.

SP Page Builder Pro can handle this with its Joomla Native Articles Integration. You design the full-article page in Page Builder, just like your other pages:

1. Create the Article Detail page

Go to SP Page Builder → Pages → + Add → New Article Page → Detail Page.
Give it a name. A basic layout is generated for you.
Add your header section at the top, the same way you do on your other main pages.
Show the article content with Dynamic Text addons (Field Source: Title, Full Text, and so on) and Dynamic Media addons for images.

2. Create an Article Index page for News (replacing the Articles addon)

Go to Pages → + Add → New Article Page → Index Page.
Add a Collection addon, set it to your News category and limit it to 6 items.
Inside it, add Dynamic Text/Media addons for the title, intro text and image.

3. Link the Index page to the Detail page

On the Index page, select the title addon (or a Read More button). In General → Link, choose the Page tab and select your Article Detail page.
Then point your News menu item to this Index page.

Now every Read More will open your Page Builder detail page, header included.

Guides:

Alternative (if you'd rather keep the current Articles addon): Build the header in an SP Page Builder module and publish it to a position such as title or feature. Then create a hidden Category Blog menu item for your News category, so the article pages get a menu item, and assign the module to it (or set the module to On all pages).

If you get stuck, please share temporary admin access in the Hidden Content field and we'll take a look.

Best regards

6 more replies

Paul Frankowski Senior Staff

1 week ago · edited

Hi,

solution is very easy (one of them):

Create new Menu item "news2" but it must be Article Blog view, it will give you more code flexibility than using Module. And use it instead of current "news" page.

if somehow, stubbornly you need to use Article addon or news module then you have to create a hidden "news2" menu item anyway Article Blog view, and choose category used in Addon/Module. Then set background for Page Title area. In that case all articles will have header background image.

It's not a bug nor issue, it's how Joomla works since 1.x

Remember that even on Blog view page you can still put extra modules, like newsletter etc.

Gurney Environmental Asked this

1 week ago

Thanks. That works for what I wanted.

Am I correct that I can only create a single Articles Index page? Now that I have created one for the News category, I was thinking I could use it for another article category, but when I try to Add/New Article Page the index and detail are both greyed out.

Gurney Environmental Asked this

1 week ago

Interesting development. I used the Dynamic Content Index/Detail for my Portfolio items and all works fine so far. However, for my News articles, there are a couple hundred of those existing as Joomla articles, so having to recreate them all as Dynamic items would be tough. Thus following the above instructions, I used the New Articles Details and Index Pages, which (mostly) works fine.

However, with my topper Section added to both the articles Index and the Details pages, that text/parallax section works just fine staying tight to the menu bar in the Index page, and if you go directly to the Details page, it also works fine. BUT...if you go to the Index page first, then clcik one of the news items links to the Details page, then that same top section has an incorrect white space between the menu bar and that section.

Interestingly, that does not happen with the Dynamic Content Index and Details pages. All works well there. Maybe there's a fix availble?

I did delete the Articles Detail page twice and started over fresh, but both times the same result. Works fine directly going to the page, but when getting there from the Index page, the top section does not stay up to the top.

Thanks.

Link to the Articles Detail Page: https://geldemo.com/index.php?option=com_sppagebuilder&view=dynamic&collection_item_id[0]=147&collection_type=articles

Link to the Articles Index Page: https://geldemo.com/index.php/news

Link to the Portfolio Index Page (Dynamic pages): https://geldemo.com/index.php/our-portfolio

Rashida Rahman Staff

1 week ago

Hi,

The following code in your custom CSS should remove that space:

.com-content #sp-main-body { padding: 0;}

Here is all about custom code placement in the Helix Ultimate framework: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best regards,

Gurney Environmental Asked this

6 days ago

Thanks. That fixed it.

Can I only create a single Articles Index and Details pages?

Thanks.

Rashida Rahman Staff

6 days ago

Hello,

You're welcome!

Yes, you can only create a single Articles Index and Details pages.

But there is a trick:

You can export your recently created article index page, then create a new SP Page Builder page and import the exported page there. After importing, you can select a different category for the collection addon.

https://cleanshot.com/share/VzdCFXLL

Then, create a new menu item with the type SP Page Builder → Pages and select the newly created page. This way, you can create multiple blog pages for different categories while keeping the same layout.

Respective documentation link: https://www.joomshaper.com/documentation/sp-page-builder/collection-index

Hope this helps!

Best regards,

Gurney Environmental Asked this

2 days ago

Do you know if this fix would solve my issue with my existing Joomla articles?
https://www.joomshaper.com/forum/question/46664

Thanks.

Gurney Environmental Asked this

1 day ago

Well, I went ahead and tried replacing that php file and it didn't solve the problem. I opened an existing Joomla article, clicked the Edit in SPPB, saved, then clicked the Edit in Backend. In PB there was no content whatsoever. When I closed the PB page (without saving) and went back to the Joomla Article interface (with JCE), the only thing remaining was the short text clip before the Read Me tag, although the actual Read Me tag was gone as well.

I really hope that this can be resolved since I would really like to be able to edit existing Joomla articles with PB.

Gurney Environmental Asked this

3 days ago

Thanks. Have another issue now that I have the Articles Index and Detail pages working. As mentioned, I'm moving an old J-3 site over to a newly created J-6 site that uses a template that included SPPB, and I have imported a couple hundred Joomla articles from the old site. With your help, I now have most of those set up in the News category Index and Detail pages, and it seems to be working fine.

However, if I open one of those articles in Joomla for editing, I can edit them just fine in the J-Editor (using JCE). HOWEVER, if I click on the Edit in SPPB backend editor, I lose all article content after the Read Me. Obviously, I can't afford to lose all this content.

In searching this forum I did see a post about someone updating to SPPB v6.9.1 who then lost content and support gave that person a link to a "fixed" sppagebuilder php file. I don't know if that is something that would fix my issue or if there is a different fix. It would be helpful if I could edit these many legacy articles within SPPB, so hopefully there is a fix.

Thanks. My first use of SPPB, so I am learning slowly!

Rashida Rahman Staff

1 day ago

Hi,

Thanks for the clear description.

You don't need to edit these articles in SP Page Builder
Your Article Detail page already controls how every article looks: the header section, layout and styling. Each article only supplies its content to that page. So please keep editing your existing articles with the Joomla Editor (JCE), and make any design changes on the Article Detail page. They'll apply to all your News articles at once.

One check on your Article Detail page
Joomla saves the text before Read More as "Intro Text" and the text after it as "Full Text". A Dynamic Text addon set to Full Text shows only the part after Read More. Articles without a Read More break keep all their text in Intro Text, so they would show no body at all.

Open your Article Detail page in SP Page Builder.
Add a Dynamic Text addon right above your current Full Text addon.
Set its Field Source to Intro Text, then save.

Each article will then show its complete text.

If an article has already lost text

Open the article and click Versions in the toolbar.
Tick the version saved just before it was switched to SP Page Builder. It will have a higher Character Count.
Click Restore, then Save. The full text and the Read More break come back, and the article returns to Joomla Editor mode.

Please do this soon. By default Joomla keeps only the last 10 versions of each article, so new saves push older ones out.

Best regards,