[#35342] - Important but easy improvements to the code of the articles
- Closed
- 6 Feb 2022
- Medium
- Build: 4
- # 35342
I write below a list of simple but useful improvements to the HTML code of an article in order to expand its usability to the needs of today (CSS grid).
I created a demo article having a title, image, main text, article information and two custom fields before and after the main text.
1. BETTER PLACEMENT OF THE CUSTOM FIELDS
The custom fields:
- must be placed outside the ul/li elements,
- must be placed on the same level as the main content, the title and the image
- and must be placed inside divs.
(The custom fields may contain large texts, images, links, video players, photo galleries etc. So it is not good to be placed in ul/li elements.)
So the code for a custom field should change from:
<ul class="fields-container">
<li class="field-entry city">
<span class="field-label ">City: </span>
<span class="field-value city">Athens</span>
</li>
</ul>
to:
<div class="field-entry city">
<span class="field-label ">City: </span>
<span class="field-value city">Athens</span>
</div>
The code for the article part with the above changes is:
2. BETTER NAMES TO CLASSES
There is some inconsistency in the names of the CSS classes as it concerns the code of an article.
The class names:
- should be smaller
- should have a common logic
Specifically:
- The class “page-header” should be renamed to “title” since it represents the title field of an article.
- The class “item-image” should be only “image”. No need to use “item” since we don’t use it anywhere else in the rest class names.
- The class “com-content-article__body” is big. Maybe only “body” or “content” since it refers to the “Content” field of an article is better.
- The class “field-entry” should be renamed to “field” or “custom-field”.
- The class “article-info” should be renamed to “info”. The “article-“ part is redundant/obvious.
- The class “article-info-term” could change to “info-title”.
- The class “category-name” witch is part of the article information should be simply “category” since for example the class “published” is not “published-date”.
3. ARTICLE INFO
The article info code should be organized better:
- The labels of the article information like “Written by:” or “Category:” or “Published:” should be place in their own span elements
- They should have a specific class name “info-label” similar to “field-label” in the custom fields.
- The article info values should have a specific class name “info-value” similar to “field-value” in the custom fields.
So the code should change from:
to:
I wish the Joomla developers will agree with the above ideas.
Thank you!
Votes
| Labels |
Removed:
?
|
||
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
Agree with the proposal, escluding point 2 where the naming could be improved but not int that way.
Why not make a pull request? Just fork the Joomla repo and add your proposed changes so people can test and add comments.
| Priority | Urgent | ⇒ | Medium |
Adjusting priority to reflect proposal.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35342.
Thank you, this is super important to me as a designer.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35342.
@EJBJane I understand perfectly that every designer wants his or her own css classes and his or her own layout. Why not make a template override?
Because the changes I suggest are useful for the most cases. It is better to have a code that needs override in 1 out of 10 times, not 9 times out of 10.
On the other side, as it is now and mostly the custom fields which are "locked" inside a ul/li element are completely hard to make good use of them and every time someone uses a couple of custom fields he/she needs to create an override.
Custom fields have the same importance as the description text (content in J4) so they shouldn't be separated like the article info details.
After all, the proposed code will slightly affect the appearance of the article with custom fields and article info details from the way it is now. Custom fields will continue to be placed before and after the description text and will continue to be one below the other. The only difference is that will not be in a ul/li element but only each custom field in a div.
@EJBJane I understand perfectly that every designer wants his or her own css classes and his or her own layout. Why not make a template override?
Because I am thinking the average user doesnt know how to make overrides? I wouldn't ask an average WP user to create overrides.
Because the changes I suggest are useful for the most cases. It is better to have a code that needs override in 1 out of 10 times, not 9 times out of 10.
Agree
@impressionestudio could you make a PR? Integrating custom fields surely can be improved.
@EJBJane I wouldn't ask an average WP user to create overrides.
This is Joomla.
@impressionestudio could you make a PR? Integrating custom fields surely can be improved.
I intend to do a PR but needs more time. I am not used to PRs.
Thank you! If you need support, don't hesitate to ask.
Ok. Thanks.
@impressionestudio could you make a PR? Integrating custom fields surely can be improved.
@EJBJane I wouldn't ask an average WP user to create overrides.
This is Joomla.
Yes, I do realize that. ;-) What's a PR?
stand for Pull Request
stand for Pull Request
Ok thanks..never done one.
Ok thanks..never done one.
@EJBJane if you wanna create a PR: My first pull request to Joomla! on Github
I read the instructions for creating a PR. I remember it is the second time I read the instructions and the conclusion is the same:
I am not going to install all these tools just for suggesting a few changes in some code. I know that everybody uses GitHub, but I don't like it, I don't use it, I don't like Java (Eclipse) and all these steps described are too much for me. So if you are going to accept the simple way of suggesting code changes, then I can continue. If not, then no problem, we can all forget this "issue".
@impressionestudio simpler changes can be done without external tools and only the GitHub UI: https://docs.joomla.org/Using_the_Github_UI_to_Make_Pull_Requests
Please do not curse me. It is the first time I use Github.
The above changes have to do with better names on classes, following the BEM approach and removing some redundant classes.
A few changes remain in order this issue to be completely satisfied, but I will remain for a response from the experts before I continue.
How may I know if somebody will take a look at the suggested improvements and if they will be accepted?
@impressionestudio There has to be a pull request with the suggested code changes that can be tested. The easiest way to go if you want to change one file is via Github itself. please read: https://docs.joomla.org/Using_the_Github_UI_to_Make_Pull_Requests/en
The other option is to clone the repo in your own account, make the changes and the do a PR. Please read: https://opensource.com/article/19/7/create-pull-request-github
After two successful tests, the project team will decide if it will be added to the code base.
Hope that helps a bit.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35342.
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-10-11 16:55:55 |
| Closed_By | ⇒ | alikon |
@impressionestudio please merge all that changes in 1 pull request, and then we can review it.
| Status | Closed | ⇒ | New |
| Closed_Date | 2021-10-11 16:55:55 | ⇒ | |
| Closed_By | alikon | ⇒ |
@impressionestudio addittionaly, if you want to have an extra class, better add new to existing, this way it will not make hard time for templates.
And please check what @laoneo comment #35807 (comment)
@RickR2H Thank you for the guidance.
@Fedik Ok, I will add the new classes along with the existing ones in order not to brake templates. (I believe that in later versions of Joomla 4 the old classes will be removed.)
I will try to merge all the pull requests to one and add also the code changes in order the issue to be completely covered by this one pull request.
@impressionestudio thanks, and please not forget to look this RFC #15279, @ciar4n have made a big work to make classes more consistent.
This should be closed for the reasons stated by @bembelimen #36557 (comment)
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-02-06 10:09:24 |
| Closed_By | ⇒ | alikon |
Regarding "2. BETTER NAMES TO CLASSES". Joomla 4 uses at many places BEM nomenclature. http://getbem.com/naming/ . That was a deliberate decision.