Add vertical ordering to blog layouts

[chmst]

Pull Request for Issue # .

Summary of Changes

Proof of Concept
There are many complaints of users who don't know how to add modifier classes for Blog Layouts.
This PR is a proof of concept where the main classes for the modifiers are added to the blog layout params.
I would like to have some feedback and if it is accepted can add it to featured.

Open questions are, for example:

• Is it self explaining and helpful?
• Do we need global params for that ?

Testing Instructions

You need several articles in a category.

Now make a menu item for a category blog. In the Tab Blog Layout There are two new selections: Default classes.

One for leading articles (the screenshot), the same for intro articles.

If the user selects "yes", the shown presents new input fields:

The same for intro articles

Select here what you want, play with different combinations and see what happens with your blog. For example this:

Actual result BEFORE applying this Pull Request

There is one input field for the classes of the leading articles and one for the intro articles.

Expected result AFTER applying this Pull Request

There is one input field for the classes of the leading articles and one for the intro articles.
There are input fields for default classes.

Documentation Changes Required

yes

[brianteeman]

Testing this right now as this functionality is essential - thanks

Do we need global params for that ?

yes definitely

[brianteeman]

1. We really need to resolve the three column layout thing. This page in particular is impossible to navigate. I had to hack it to one column to understand.

2. I would move the #leading article to be the first field
   

3. As above with #intro articles

4. columns should not be hidden

5. Blog Class Default Classes
   Is this just a label to expand the other fields? If it is then it should be a switcher not a select and needs a better title

This is AWESOME

[SharkyKZ]

These classes are specific to Cassiopeia and should not be hardcoded in com_content.

[chmst]

@brianteeman changes made as suggested.

@SharkyKZ have you an idea how we could make this possible? Maybe a plugin in cassiopeia?

[brianteeman]

@chmst thanks. Will test further

Regarding @Sharkyz comment. I dont see this PR as any different to j3 and its use of bootstrap classes.

This PR is essential if we dont want to make it way too hard for users to upgrade successfully or to use existing functionality. Right now columns etc dont do anything so users think it is broken

[chmst]

I understand that this is specific for cassiopeia. But it is hard to make a strict separation between core and template. Also the difference of leading items and blog items can be seen as template specific, or the intro images vs. fulltext images.
The changes in this PR are rather compact and they don't introduce dependencies so I think that it is an advantage for acceptance.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[ceford]

On this patch: my intro image came out very small, about the same size as a capital M. The other images were OK. To me it seems crazy that the 1/n column layout for Leading and Intro articles is not available by default. I remembered it from somewhere (J3?) and spent ages looking for it.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[ceford]

I should have said also: I think the images are in the wrong place! I would float the image left or right of the text and add some padding.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[ChristineWk]

Maybe I missed something?

Can't find Boxed Layout for columns and don't know what the Default Classes are. Sorry.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[ReLater]

I don't know if it's of interest for this pr and Joomla 4 but as far as I know the CSS based "masonry" layouts (cards) have been removed from Bootytrap 5 for good reasons ("strange ordering and things"). One should not expect that it has a future for coming templates.
twbs/bootstrap#28922

[chmst]

Thank you all for testing and your meaning. We are working on a better solution in cassiopiea. I cles this for now.

[ChristineWk]

@Gostn Thank you for your image. It's clear now. It belongs to "Fields are expanded".

[chmst]

Re-Opening this as it can resolve the release blocker #27478
Needs calculationg the ordering number in blog layout.

[brianteeman]

Is vertical ordering the same as the J3 option Multi Column Ordering?

If it is then can you rename it here.

[ChristineWk]

I have tested this item ✅ successfully on dde1662

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[ghost]

I have tested this item ✅ successfully on dde1662

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[Harmageddon]

Should the vertical ordering parameter have any effect yet? Because I don't see any, and I can't find where the parameter is being used in the view.

(Edit: Didn't want to pressure here, as the PR is still a draft. I was just wondering, but assume it's not yet implemented. ;-) )

[chmst]

As it is easier for migration I have restored the two params from J3 for ordering down and number of columns. If a user chooses the order down, the input in blog class is ignored and the into items are displaed in columns.

[ChristineWk]

When using this:

it looks OK.

When using this:

Frontend:
Notice: Undefined variable: numCols in /home/xyz/components/com_content/tmpl/category/blog.php on line 102 Notice: Undefined variable: numCols in /home/xyz/components/com_content/tmpl/category/blog.php on line 102

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[chmst]

Thank you @ChristineWk, fixed

[brianteeman]

Instead of Ordering option down can you use the J3 terminology

#30910 (comment)

[chmst]

@brianteeman I think, it is not quite the same because this ordering is ONLY for vertical ordering (down). He cannot choose fixed number of columns ad ordering "across" as before, this is made via modifier classes.

This solution is not really good, but at least enables a migration from J3 to j4.

An open question is: Is this option for leading articles and intro-articles? At the moment it is for intro-articles only.

[ChristineWk]

@chmst Thank you. Notice is fixed.

[Harmageddon]

Hmm, it kind of works for me, but now the value of "Blog Class (Intro Articles)" is ignored completely when using vertical layout. I think that's not optimal either. Of course, we get a conflict if someone enters "columns-3" for the class and then vertical layout with 2 columns. But what if someone wants to use any other class for the intro articles?

[ChristineWk]

@Harmageddon Thks for your investigation :-)

Hmm, it kind of works for me, but now the value of "Blog Class (Intro Articles)" is ignored completely when using vertical layout. I think that's not optimal either. Of course, we get a conflict if someone enters "columns-3" for the class and then vertical layout with 2 columns. But what if someone wants to use any other class for the intro articles?

Maybe it belongs to this?

If a user chooses the order down, the input in blog class is ignored and the into items are displaed in columns.

[Harmageddon]

Maybe it belongs to this?

If a user chooses the order down, the input in blog class is ignored and the into items are displaed in columns.

Ah yes, thank you. Still, I think it's not optimal, because the blog class can be used for other things than just columns. Maybe do a search/replace and remove the "columns-X" part in this case? In any case, this behaviour should be documented somewhere, because users will wonder why their input is ignored.

[Harmageddon]

I'm trying to tackle this problem from a different angle, by providing an update script that converts the old column parameters to the according CSS classes. PR should be ready tomorrow or friday. ;-)

[paritshivani]

I have tested this item 🔴 unsuccessfully on 39cbad4

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[paritshivani]

I have tested this item 🔴 unsuccessfully on 39cbad4

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[ChristineWk]

Vertical and horizontal arrangement look OK with me. But I don't know if this is enough for this PR. See also comments & new PR.

Vertical:

Horizontal:

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[Tejashrimajage]

I have tested this item 🔴 unsuccessfully on 39cbad4

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30910.}

[chmst]

Closing this in favour to #31570

[chmst]

Reopening as a possible solution for issue #32012 - must be reviewed.

This solution could be better for users especially if the three-columns layout is set back and the blocks for intro and blog fields can be separated clearly.

[richard67]

@chmst Will this still work now as #31570 has been merged?

[chmst]

I think yes. But as it must be reviewed.We have enough to do, so I close again and we can think again this in one of the following versions.

[Harmageddon]

Hmm... #31570 converts the column parameters into CSS classes. If we want to re-introduce column parameters or some other sort of display parameters, it might be better to revert it, because the information about columns will be "lost" on upgraded sites (not lost, but transferred to the column-X class).
For new sites, #31570 doesn't change anything. But for sites that are updated from 3.x to 4.0, I think it would be better to make the decision now, whether to go only with CSS classes or with more sophisticated parameters.