Joomla-cms: [4.0] Improvement proposal Vote Plugin

Created on 26 Jul 2020 · 51Comments · Source: joomla/joomla-cms

Steps to reproduce the issue

This is an improvement proposal. In the hope it wil be useful.

Expected result

By using Font Awesome you can get a better result. With whole and half stars. See picture.
screen shot 2020-07-26 at 12 50 56

Actual result

The current vote plugin now uses two images. See the picture.
screen shot 2020-07-26 at 12 49 59

System information (as much as possible)

Joomla 4.0

Additional comments

The problem is that the current version of Font Awesome does not load the class = "far fa-star".

Therefore, when testing I loaded another somewhat full version of Font Awesome.

Change code file: pluginscontentvotetmplrating.php

// ######### Special for testing instead of images #########
$loadCss = 'media/vendor/fontawesome-free-5.14.0-web/css/all.min.css';

if (file_exists(JPATH_ROOT . '/' . $loadCss))
{
    HTMLHelper::_('stylesheet', $loadCss, array('version' => 'auto'));
}
// #########

$rating = (float) $row->rating;
$rating = round($rating / 0.5) * 0.5; // round to 0.5
$rcount = (int) $row->rating_count;

$img   = '';
$stars = $rating;

for ($i = 0; $i < floor($stars); $i++)
{
    $img .= '<span style="color: #ffa500" class="fas fa-star" aria-hidden="true"></span>';
}

if (($stars - floor($stars)) >= 0.5)
{
    $img .= '<span style="color: #ffa500" class="fas fa-star-half-alt" aria-hidden="true"></span>';
    $stars += 1;
}

for ($i = $stars; $i < 5 ; $i++)
{
    $img .= '<span style="color: #ffa500" class="far fa-star" aria-hidden="true"></span>';
}

Change code line 152 - 153 of file: componentscom_contentsrcModelArticleModel.php

'ROUND(' . $db->quoteName('v.rating_sum') . ' / ' . $db->quoteName('v.rating_count') . ', 0) AS '
                                . $db->quoteName('rating'),

'ROUND(' . $db->quoteName('v.rating_sum') . ' / ' . $db->quoteName('v.rating_count') . ', 1) AS '
                                . $db->quoteName('rating'),

New Feature No Code Attached Yet

Source

sandewt

All 51 comments

I don't understand

The problem is that the current version of Font Awesome does not load the class = "far fa-star"

Why do you need far fa-star (and load another webfont!) if fas fa-star is working fine? You could use grey color instead of outlined yellow.

ReLater on 26 Jul 2020

Or maybe this could be a place where we use SVG images instead of fontawesome or png.

ReLater on 26 Jul 2020

Why do you need far fa-star if fas fa-star is working fine?

The class="fas fa-star" gives a solid star: See link...

And the class="far fa-star" gives an open (regular) star: See link...

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

sandewt on 26 Jul 2020

Or maybe this could be a place where we use SVG images instead of fontawesome or png.

In fact, you can use any image. But I think Font Awesome is very beautiful. All in the style of Joomla 4.

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

sandewt on 26 Jul 2020

As far as I know far fa-star is already available in J4.

infograf768 on 26 Jul 2020

👍1

As far as I know far fa-star is already available in J4.

I expected that too. Maybe I don't see it right.

There can be found no classes with the name: class="far fa-xxxx" in the code. Eg class="far fa-star".
The class="fab fa-joomla" occurs once in J4.
All the others are classes with the name: class="fas fa-xxxx". Eg class="fas fa-star".

The link below is loaded standard in Cassiopeia.

<link href="/joomla400/joomla/media/vendor/fontawesome-free/css/fontawesome.min.css?5.13.0" rel="stylesheet" />

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

sandewt on 26 Jul 2020

Maybe I don't see it right.

Indeed. 😄

it is used next to icon-unfeatured in the layout. Once you take off icon-unfeatured you will see the empty star. In admin.
Normally, Cassiopea should load the same fontawsome

infograf768 on 26 Jul 2020

far (= an additional webfont) is not loaded in frontend template. And I think for a good reason.

Loading it just for a single star? I think that would be the wrong way.

In fact, you can use any image. But I think Font Awesome is very beautiful. All in the style of Joomla 4.

Maybe beautiful but Font Awesome is a big monster ;-) We are loading CSS and webfonts on any page even if we only use a handful of icons on the whole site.

I don't know why the folder /fontawesome-free/svgs/ is missing in Joomla 4 but I think it would be a good thing to use one of these svg images directly here or better: to create custom svg images instead of loading an additional webfont. I'm not talking about png images!!!!

Would be a first step to make the core independent of fontawesome step-by-step.

ReLater on 27 Jul 2020

far (= an additional webfont) is not loaded in frontend template. And I think for a good reason.

Indeed, the code below loads the star icons only from the administrator. But this is not desirable.

$loadCss = 'administrator/templates/atum/css/vendor/fontawesome-free/fontawesome.min.css';

if (file_exists(JPATH_ROOT . '/' . $loadCss))
{
    HTMLHelper::_('stylesheet', $loadCss, array('version' => 'auto'));
}

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

sandewt on 27 Jul 2020

I don't know why the folder /fontawesome-free/svgs/ is missing in Joomla 4 but I think it would be a good thing to use one of these svg images directly here or better: to create custom svg images instead of loading an additional webfont.

The question is whether a new issue should be opened for this discussion.

The question remains, how do I get now three nice star images for displaying the rating.

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

sandewt on 27 Jul 2020

I don't know why the folder /fontawesome-free/svgs/ is missing in Joomla 4...

In the meantime, it turns out for me that it is very easy to add the color code (# FFA500) to the stars concerning the .svg images (from the special added folder/fontawesome-free/svgs).

And the images are easy to load with, for example, the following code:

HTMLHelper::_('image', 'system/star-solid.svg', Text::_('PLG_VOTE_STAR_ACTIVE'), array('width' => "20px"), true);

@ReLater anyway, I think it would be a good idea to add the folder /fontawesome-free/svgs/ to the Joomla core by default. If this is allowed in connection with possible licenses / copyrights.

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

sandewt on 27 Jul 2020

Why do you need far fa-star (and load another webfont!) if fas fa-star is working fine? You could use grey color instead of outlined yellow.

@ReLater This option proposed by you is easy to realize.

The question is whether this solution as it looks is acceptable for a PR?

screen shot 2020-07-29 at 06 32 57

Code grey stars:

$img .= '<span style="color: grey" class="fas fa-star" aria-hidden="true"></span>';

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

sandewt on 29 Jul 2020

I think these are better.

screen shot 2020-07-29 at 13 15 52

Code:

$img .= '<span style="color: #d3d3d3" class="fas fa-star" aria-hidden="true"></span>';

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

sandewt on 29 Jul 2020

Another alternative: widely used on the internet

Code change:

if (($stars - floor($stars)) >= 0.5)
{
    $img .= '<span style="color: #d3d3d3" class="fas fa-star fa-sm" aria-hidden="true"></span>';
    $img .= '<span style="color: #ffa500; margin-left: -14px" class="fas fa-star-half fa-sm" aria-hidden="true"></span>';
    $stars += 1;
}

screen shot 2020-08-02 at 09 54 12

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

sandewt on 2 Aug 2020

As far as I know far fa-star is already available in J4.

It is possible to load far fa-star in the backend but NOT in the frontend.

@N6REJ - @hans2103 Do either of you know why? Solution?

sandewt on 6 Oct 2020

@sandewt far is Font Awesome Regular.
Is the Font Awesome Regular font loaded in the frontend?

hans2103 on 6 Oct 2020

Is the Font Awesome Regular font loaded in the frontend?

No, I see that the @import "../../../media/vendor/fontawesome-free/scss/regular"; statement is NOT present in the frontend template.scss file.

Reason ? New PR ?

sandewt on 6 Oct 2020

@sandewt using the blame option of any file you can find out the reason of changes.
https://github.com/joomla/joomla-cms/blame/4.0-dev/templates/cassiopeia/scss/template.scss

I don't know what the reason might be that regular has not been added to template.scss or what the reason was to remove it. But.... be my guest and feel free to create a new PR where you explain the issue and how this can be solved.

hans2103 on 6 Oct 2020

👎1

Mind that if far fa-star is the only reason to add fontawesome-free/regular I would not advice to create a PR to add this dependency but to find out if it's okay to use fas fa-star instead.

hans2103 on 6 Oct 2020

Mind that if far fa-star is the only reason to add fontawesome-free/regular...

Rightly noted. That's why I have doubts too.

I imagine there are 3.9.x sites that already use Font Awesome -free / regular. They then have a (little) problem with Joomla 4.
Moreover, Font Awesome offers this possibility, why not use it?
Of course, the loading time of the site should not be adversely affected.

@wilsonge

sandewt on 6 Oct 2020

Mind that if far fa-star is the only reason to add fontawesome-free/regular...

Rightly noted. That's why I have doubts too.

I imagine there are 3.9.x sites that already use Font Awesome -free / regular. They then have a (little) problem with Joomla 4.
Moreover, Font Awesome offers this possibility, why not use it?
Of course, the loading time of the site should not be adversely affected.

@wilsonge

@sandewt just create a PR. The changes are bigger others will see these comments too.

hans2103 on 6 Oct 2020

That will result in 151 extra icons.

https://fontawesome.com/icons?d=gallery&s=regular&m=free

sandewt on 10 Oct 2020

imho @ReLater is right
https://github.com/joomla/joomla-cms/issues/30193#issuecomment-663998509

Use a class with specific full svg for the stars as done for joomla-alert:

See https://github.com/joomla/joomla-cms/blob/3482ec71b516ad5fa9c14d313e803a016d0d0dd2/templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss#L34

infograf768 on 10 Oct 2020

Use a class with specific full svg for the stars as done for joomla-alert:

How did you generate the code below? Color?

background-image: url('data:image/svg+xml;utf8,<svg width="1792" height...

sandewt on 10 Oct 2020

Use a class with specific full svg for the stars as done for joomla-alert:

@infograf768
Do you prefer .svg instead of fas fa-star, fas star-half for the vote pluging anyway?

sandewt on 10 Oct 2020

@sandewt far is Font Awesome Regular.
Is the Font Awesome Regular font loaded in the frontend?

no, and legally we're not entitled to far. It's not supposed to be "free" but for w/e reason is being included in the npm release(s)

N6REJ on 11 Oct 2020

How did you generate the code below? Color?

Get the svg from fontawesome and edit it in a text editor, then modify code in the css to fit
Example:
star-half-alt-solid.svg.zip

gives
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star-half-alt" class="svg-inline--fa fa-star-half-alt fa-w-17" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536 512"><path fill="currentColor" d="M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z"></path></svg>

Just adapt it on the model of joomla-alert css.
We have anyway to credit fontawesome.

infograf768 on 11 Oct 2020

You also can get them from
https://iconify.design/icon-sets/fa/

Screen Shot 2020-10-11 at 08 56 06

infograf768 on 11 Oct 2020

Also, you can create an images folder for the plugin in order to use a pure svg as done for https://github.com/joomla/joomla-cms/pull/31028
It would have to be created in build/media_source/plg_content_vote/images/star.svg etc.
and then modify code and css.

infograf768 on 11 Oct 2020

👍1

That will result in 151 extra icons.
https://fontawesome.com/icons?d=gallery&s=regular&m=free

no, and legally we're not entitled to far.

@N6REJ Conflicting !?

It's not supposed to be "free" but for w/e reason is being included in the npm release(s)

What means _w/e_ ?

sandewt on 11 Oct 2020

We have anyway to credit fontawesome.

You mean a reference to _Icons — CC BY 4.0 License_ ?
See also: https://fontawesome.com/license/free

sandewt on 11 Oct 2020

You also can get them from
https://iconify.design/icon-sets/fa/

License: _Open Font License_
Is this license compatible with the Joomla GNU license? Perhaps therefore not advisable.

sandewt on 11 Oct 2020

OFL is supported by the Free Software Foundation

https://en.wikipedia.org/wiki/SIL_Open_Font_License

infograf768 on 11 Oct 2020

You can see here that some Google fonts are released as SIL Open Font License
https://fonts.google.com/attribution

As far as I know we can use OSL in Joomla without any issue.

infograf768 on 11 Oct 2020

if your going to use fontawesome the either use the ones included in core ( yes there are svg versions in core ) OR use fa 5 not fa 4 icons please.

N6REJ on 11 Oct 2020

The fa 5 ones are here and LIcense is CC
https://iconify.design/icon-sets/fa-solid/

Screen Shot 2020-10-12 at 08 40 45

infograf768 on 12 Oct 2020

The fa 5 ones are here and LIcense is CC

Get the svg from fontawesome and edit it in a text editor, then modify code in the css to fit
Example:
star-half-alt-solid.svg.zip

This is the same license as Font Awesome (fontawesome-free-5.15.1-web.zip)

LICENSE.txt:
.......
Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
packaged as SVG and JS file types.

sandewt on 12 Oct 2020

As far as I know far fa-star is already available in J4.

yes and no. No it's not loaded by default and No we're not legally entitled to it, yes the iconery is there.

N6REJ on 12 Oct 2020

if your going to use fontawesome the either use the ones included in core ( yes there are svg versions in core ) OR use fa 5 not fa 4 icons please.

So if I understand correctly, star.svg (solid) and star-half (solid) code can be legally used from the core. Is this correct? E.g.

.content_rating .star {
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="orange" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>');
    background-size: 110%;
}

sandewt on 12 Oct 2020

yep, thats 100% correct. I know we're going to be changing to svgs in the near future J! 4.1?? I think we're going to sprites but I'll worry about that when we get to that point.
I like your pr so to help you on your way I created a svg pr for you :D https://github.com/joomla/joomla-cms/pull/31079
This way you can simply call /media/vendor/fontawesome-free/svgs/solid/star.svg and you'll have it.
PLEASE don't use FAR set YET. I've got a query into FA asking them about their intent with including far

N6REJ on 13 Oct 2020

👍1

@sandewt ping me on fb if you need faster answers... I don't always hear git go off right away.

N6REJ on 13 Oct 2020

👍1

@sandewt you have legal permission to use the FAR fa-star ( just use the svg regular ). I'll be passing the info on to marketing.

N6REJ on 13 Oct 2020

This way you can simply call /media/vendor/fontawesome-free/svgs/solid/star.svg and you'll have it.

This way works:

$link  = 'media/vendor/fontawesome-free/svgs/';
.......
$img .= HTMLHelper::_('image', $link . 'solid/star-half-alt.svg', Text::_('PLG_VOTE_STAR_ACTIVE'), array('class' => 'vote-star'));

@N6REJ Was that also your intention?

yep, thats 100% correct. I know we're going to be changing to svgs in the near future J! 4.1?? I think we're going to sprites but I'll worry about that when we get to that point.

For the color of the svg, you could use a filter, see https://github.com/joomla/joomla-cms/pull/31079#issuecomment-707627503

sandewt on 14 Oct 2020

@sandewt yep, exactly what I was thinking.

N6REJ on 14 Oct 2020

@sandewt yep, exactly what I was thinking.

I have done a test locally that is completely in line with your PR #31079.
It works and it gives a better visual result than with a backend image: url (..)
I can make a PR for J4.0 (?) or J4.1 (?).

sandewt on 14 Oct 2020

@sandewt hopefully this https://github.com/joomla/joomla-cms/pull/31096 will help you move forward with your pr.. idky svg is being such a hassle.

N6REJ on 15 Oct 2020

👍1

@sandewt hopefully this #31096 will help you move forward with your pr.. idky svg is being such a hassle.

Thanks.
To avoid misunderstandings. This issue does not depend on regular (far). Orange and gray stars are also ok. What matters is which style best matches the style of Joomla. Extending with far is of course quite useful.

sandewt on 15 Oct 2020

[EDIT] Error with text

sandewt on 15 Oct 2020

As we have pull request #31098 now: Can we close this issue?