content-category-blog columns broken because items nested with readmore

[uha4]

Steps to reproduce the issue

I show several Articles in content-category-blog menu type and set at Blog-Layout-Tab:

• leading Articles: 0
• Intro Articles: 6
• Columns: 3 use the readmore tag in the article content

Expected result

Article previews should be diplayed in several columns, as they are if i don't use the readmore section in the article

Actual result

All article previews are in one column. When I use dev tools of firefox, i see that the articles ( com-content-category-blogitem blog-item ) are nested. So only the first is in com-content-category-blogitems blog-items columns-3 The second one is within the first com-content-category-blog__item blog-item

System information (as much as possible)

PHP Version 8.0.18 Web Server Apache/2.4.53 (Unix) Joomla! Version 4.1.3 Stable [ Kuamini ] 10-May-2022 Plain Cassiopaia Template

Additional comments

when I remove the readmore section from the article, everything works fine again. I didn't find another way not to show the full text of the article in the category overview

[chmst]

This is a known effect when readmore is set in a paragraph or div. Inspect the html of your article.

[uha4]

OK, good to know were it comes from and how to mitigate. I was afraid this wold be hard to reproduce, as I didn't find a hint that others have the problem too. I would still consider this a bug worth fixing, as most users just creating or updating articles will not expect this behavior and won't be familiar with editing html.

I can imagine two approaches to fix this:

1. The function that inserts the <hr id="system-readmore" /> checks whether it is in a vulnerable section and splits this section before inserting. This gives the danger that the problem still occurs when someone inserts or moves the readmore tag by hand.
2. the sections get checked when saving the article and sections split when necessary.
3. the function rendering the intro checks for any unclosed sections and adds the appropriate ending tags. This has the disadvantage that it needs computing power at every delivery of the site.

I don't know witch of these is easier to implement, but from a practical perspective, I'd prefer No. 2 for not having any of the above mentioned drawbacks.

[brianteeman]

All of that should be happening already.

[uha4]

Thanks for Your fast replies and taking care of it.

[brianteeman]

Why is this still open and flagged as being for a new feature?

[uha4]

I thought 'should be happening already' is too vague to close the issue. Shouldn't there be a link to a commit or PR to the actual implementation before marking it as done? But as I'm not into coding here, I don't know were to search for...

[brianteeman]

'should be happening already

As in there is no code needed here at all. What you request is already the default behaviour

[brianteeman]

[uha4]

OK, sorry, so I misunderstood you. I thought you were saying someone is working on it. I didn't test again after the new update, and didn't check if there is a difference between <p> <span> and <div> after chmst said this is a known issue. I'll check this the next days and give feedback.

[brianteeman]

nothing to do with the new update. this code has been working for years

[brianteeman]

@chmst your comment states this is a known bug and therefore the implication is that it should be fixed.

My tests say that there is no bug at all and that this should be closed.

[uha4]

I was just testing it, the code works well for <p> but it doesn't split <div>, so the problem occurs when there "read more" is placed in a <div>. I understand, that this doesn't happen often, as the editor doesn't generate this tag. As I'm currently migrating/rebuilding a legacy page in Joomla, the problem came because I copy & pasted the text from the old site, so there were <div>s included. I leave it up to you, if you call it a bug or a feature request to enable the code to split <div>s like it does for <p>. If it is to hard to implment or would have unwanted implications, I can understand if you don't want to change the code for this. In this case feel free to close the issue. At least there is a resource now to find for the next ones coming across this problem. Of course it would be nice to have this info also somewhere in the documentation, that one should strip unneeded divs when copy & pasting from other sources, but i currently also don't know were to put it best.

PS: sorry for my late reply, I was sick and in holidays in between and this is just a voluntary project for me that slipped to the back of my working queue

[brianteeman]

ok - thats a bug then - it should split any block level element

[chmst]

I don't know if we can say it is a bug. Some years ago the german forum was full of questions like this and I use to explain that readmore must be set at the end of a paragraph. It is not as easy to split any block level element automatically. Users had the the readmore in the middle of a table or in the middle of a list.

[uha4]

The readmore had to split any block level element recursively from inside to outside. Yes this would distort the structure of the content when placed in stupid places like in a table or a list. But the user will see this change immediately and it would be obvious why this happened, so it is easy to correct. Another possibility would be, that the readmore automatically inserts itself behind the current block if it is inserted in something else than <p>. So if I insert the readmore in a table the table is not split but the readmore will be right after the table.

The main point is that the user sees the problem and the effect directly after inserting the readmore, so he gets a glue whats the problem and can correct immediately. My main problem was that it broke the layout of the conttent-category-blog and it took me quite some time to find the reason. Breaking the layout of the frontend without warning by only using standard UI of the backend should be considered a bug.

Edit: typo

[brianteeman]

If I could find the code that inserted the readmore I could take a look

[chmst]

I found only this https://github.com/joomla/joomla-cms/blob/4.2-dev/build/media_source/com_content/js/admin-article-readmore.es6.js