The evaluation with whole function values. I did not understand how to modify the table for decimal ratings, should I make an ALTER TABLE? If yes, with what new attribute?

@sandewt seems like we have to alter the table's rating_sum to accept decimals. It only gets integers atm.

What about not altering the column (preferred) but using a conversion of 1-100 for 0.1-10.0 rating?
Possible?

@adj9 and @sakiss

I'm trying to explain

file: \components\com_content\src\Model\ArticleModel.php

Line 152: here round is 0 decimal, becomes 1 decimal

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

rating = rating_sum / rating_count (= average)

Suppose: rating_sum = 100 and rating_count = 30

• round = 0 decimal
  100 : 30 = 3

• round = 1 decimal (PR)
  100 : 30 = 3.3

• round = 2 decimals
  100 : 30 = 3.33

The final rating then becomes: $rating = round($rating / 0.5) * 0.5; (= on half stars)

What about not altering the column (preferred) but using a conversion of 1-100 for 0.1-10.0 rating?
Possible?

There are many ways to indicate a rating. This PR is in line with the current situation. Yes, a lot is possible. But an apparently small change often gives a lot of work. You can always open a new issue with a new proposal.

Some checks were not successful

I can't find the cause. Need some help.

Restarted drone

Please explain how to test if (($stars - floor($stars)) >= 0.5) to get a half star

Please explain how to test if (($stars - floor($stars)) >= 0.5) to get a half star

• Go to the database
• open the table #__content_rating
• change eg the rating_sum in 100
• change eg the rating_count in 30

rating = rating_sum : rating_count = 100 : 30 = 3.3, that results in 3.5 stars

It does not work in RTL because of

style="margin-left: -1.15em;"

LTR

RTL

1. First, it's better to create a class instead of an inline style
2. It will not be sufficient for RTL to use margin-right: -1.15em; as the half star will be placed in the wrong side

To get a correct placement in rtl you need to reverse the color

if (Factory::getLanguage()->isRtl())
{											{
	$img .= '<span class="text-warning fas fa-star" aria-hidden="true"></span>';
	$img .= '<span style="margin-right: -1.15em;" class="text-muted fas fa-star-half" role="img" aria-label="' . Text::_('PLG_VOTE_STAR_ACTIVE_HALF') . '" aria-hidden="true"></span>';
}
else
{
etc.

and anyway a class to replace the inline style

to get

Thanks @infograf768 ,

and anyway a class to replace the inline style

You mean in: build/media_source/plg_content_vote/css ?

You mean in: build/media_source/plg_content_vote/css ?

I guess so and evidently loading it from media/plg_content_vote/css/ in rating.php
rating.css can be a good name

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseStyle('plg_content_vote', 'plg_content_vote/rating.css');

• take off unused use Joomla\CMS\HTML\HTMLHelper; in the same file.

@infograf768 Good advice, I'm going to get started.

Si I eventually figured out that we need to change rating sum and rating count. And then with the patch applied we get half a star. Good. Waiting for final version for formal test. This instruction seems to be a red herring: Also create a menu link (list all categories) to an article. And it causes a 404 Not Found page. Reporting as separate issue.

Si I eventually figured out that we need to change rating sum and rating count. And then with the patch applied we get half a star. Good. Waiting for final version for formal test. This instruction seems to be a red herring: Also create a menu link (list all categories) to an article. And it causes a 404 Not Found page. Reporting as separate issue.

@sandewt you are removing 2 png/gif images and introducing an icon font dependency which you're are not loading properly. (eg this thing will never work on any of my templates as I'm not forcing font awesome, and obviously I'm not willing to do so because you decided to force me...).
In short, the idea to move from rastered images to vectors is good but the implementation, as is, shouldn't be accepted. Use either svg icons or css background-image.

In short, the idea to move from rastered images to vectors is good but the implementation, as is, shouldn't be accepted. Use either svg icons or css background-image.

😅

@dgrammatiko you know we're working on #31079 which will solve the svg issue.

@sandewt you are removing 2 png/gif images and introducing an icon font dependency which you're are not loading properly. (eg this thing will never work on any of my templates as I'm not forcing font awesome, and obviously I'm not willing to do so because you decided to force me...).

@dgrammatiko This means that NO core icons will work with your templates if I'm understanding things properly since they ALL use fontawesome. Instead of being condescending lets be constructive.

@N6REJ ok couple of things here:

• adding all the svg files in the installable without an API to use them is not a solution (#31079) (same process you followed with moving the icon classes to fa, not well thought)
• this can be done by simply copying the svg files in the media/plg_vote_/images
• or inlining the svg in the css as @infograf768 already did in some other part (#30516 )

Let me repeat something here: ENFORCING anything in the front end is totally wrong and is one of the reason Joomla is failing to get any new users. The truth is simple as that....

This means that NO core icons will work with your templates if I'm understanding things properly since they ALL use fontawesome. Instead of being condescending lets be constructive.

You are right, many contributors are not following the decision that the front end SHOULD NOT use the FA iconfont. Check the decision here: joomla/40-backend-template#441 (comment)

BTW what you are trying to do with SVGs I already did it (with way more proper code) in 2018: joomla/40-backend-template#441 and in 2019: #28351
At the very least check the work already done there and also check all the comments and arguments in these PRs. You're not inventing something...

You are right, many contributors are not following the decision that the front end SHOULD NOT use the FA iconfont. Check the decision here: joomla/40-backend-template#441 (comment)

Too bad this information was not known to me. The information flow now seems to depend on coincidence.

There should be a kind of design sheet that indicates the framework. And easily accessible. Or is it already there?

Otherwise, as a (relatively) new user you will soon fall behind the facts. As already mentioned above.

@dgrammatiko so you've completed NOTHING regarding svg icons yet I'm an idiot and dont' know what I'm doing according to you. Right...... This discussion ends.

@C-Lodder @wilsonge @hans2103 Do we go with sprites so its faster upload but more cumbersome to work with. Or with images which are MUCH MUCH easier to work with but take double the inodes.

@N6REJ I'd personally go with a hidden inline SVG and showing it with <use>

@N6REJ I'd personally go with a hidden inline SVG and showing it with <use>

so thats use sprites then?

@sandewt you ready for me to test this?

@N6REJ not a sprite

this can be done by simply copying the svg files in the media/plg_vote_/images

Or with images which are MUCH MUCH easier to work with but take double the inodes.

All one by one.

This proposal has now been worked out.

I am looking for a good filter for the colors: filter = ??? Now shades of gray, see the pictures.

@dgrammatiko Has that already been thought about?

.content_rating .vote-star {
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "";
	filter: ???
	background-size: 100%;
}

I am looking for a good filter for the colors: filter = ??? Now shades of gray, see the pictures.

use fill, eg:

.content_rating .vote-star svg {
  fill: green;
}

use fill, eg:

.content_rating .vote-star svg {
  fill: green;
}

Certainly not. This would work only for inline svg and not img

Certainly not. This would work only for inline svg and not img

Can I confirm.

How to change the color of an svg element?

See: https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element (thanks to @infograf768 ).

With an interesting reference to: https://codepen.io/sosuke/pen/Pjoqqp

There you can easily generate colors for the filter.

BUT I DON'T KNOW WHETHER IT MAY BE USED FOR JOOMLA ???

[EDIT] this solution is no longer necessary.

Certainly not. This would work only for inline svg and not img

That was an example, foobar css, I guess this will work:

.content_rating .vote-star svg path {
  fill: brown;
}

@dgrammatiko
Nope, as the svg is loaded through img. you can't change the color this way.

When it is loaded through img, the color can be set in the svg code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#f0ad4e"><path 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>

When it is loaded through img, the color can be set in the svg code

I prefer to leave the .svg intact. And load it centrally somewhere. And use a filter for the color.

See [#31079] - [4.0] [DRAFT] Add FA svg set(s). @N6REJ

@jiweigert

Thanks. I want to set the color of the .svg from the outside. Then the .svg itself does not need to be changed. Your link provides examples of inline svg. Or I shouldn't have seen it.

Yes, that was for inline-svg ... Unfortunately thats the only reliable way to adress the coloring issue.

Another way would be inside the svg-file an xml-stylesheet declaration:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="40" cy="40" r="24"
       style="stroke:#006600; fill:#00cc00"/>
</svg>

but with that
a) you have to modify the svg file
b) you can't adress multiple presence of the vote-plugin like in listings. (Not sure, never tried it)

I don't think, that without inline-svg dynamically produced by the vote-plugin there are other functional ways to cover multiple presence of the plugin (blogs / lists) and being able to color them individually based on the default / custom colors..

But there are advantages with inline svg / css for the vote-plugin which should be maybe also considered:

• you can provide a list of standard shapes within the vote-plugin to select from (stars / square / triangle / etc)
• specify the colors for half / full filled symbols
• ability to load an external svg-file (with already set id's for half / full parts) to inject that code into the page
• reduced connections for amp (Advance Mobile Pages) ...

Just brainstorming here..

Here is a solution to use inline svg.
It is not optimized for a11y.

1. Modify the star.svg and the star-half.svg by adding:
   height="15" width="15" fill="currentcolor" after the viewbox.
   i.e. for star.svg:
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="15" width="15" fill="currentcolor"><path 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>

2. Modify rating.php
   add
   use Joomla\CMS\Uri\Uri;

then add after the wa

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = Factory::getDocument()->getWebAssetManager();
$wa->registerAndUseStyle('plg_content_vote', 'plg_content_vote/rating.css');

$simplestar = Uri::base() .'/media/plg_content_vote/images/star.svg';
$halfstar   = Uri::base() .'/media/plg_content_vote/images/star-half.svg';

and change the img. parts to

for ($i = 0; $i < floor($stars); $i++)
{
	$img .= '<li class="vote-star">' . file_get_contents($simplestar) . '</li>';
}

if (($stars - floor($stars)) >= 0.5)
{
	$img .= '<li class="vote-star-empty">' . file_get_contents($simplestar) . '</li>';

	if (Factory::getLanguage()->isRTL())
	{
		$img .= '<li class="vote-star-rtl">' . file_get_contents($halfstar) . '</li>';
	}
	else
	{
		$img .= '<li class="vote-star-ltr">' . file_get_contents($halfstar) . '</li>';
	}

	$stars += 1;
}

for ($i = $stars; $i < 5; $i++)
{
	$img .= '<li class="vote-star-empty">' . file_get_contents($simplestar) . '</li>';
}

and add <ul>at the end of the file before the closing </div>

	<ul>
		<?php echo $img; ?>
	</ul>
</div>

3. Modify rating.css to something like

.content_rating .vote-star {
  display: inline-block;
}

.content_rating .vote-star svg {
  fill: #fd7e14;
}

.content_rating ul {
  margin-left: -2.8em;
  margin-bottom: .5em;
}

[dir=rtl] .content_rating ul {
  margin-left: auto;
  margin-right: -2.8em;
}

.content_rating .vote-star-empty {
  display: inline-block;
  fill-opacity: 0.3;
}

.content_rating .vote-star-ltr {
  display: inline-block;
  margin-left: -1.05em;
}

.content_rating .vote-star-rtl {
  display: inline-block;
  margin-right: -1.05em;
  transform: scaleX(-1);
}

.content_rating .vote-star-ltr svg,
.content_rating .vote-star-rtl svg
{
  fill: #fd7e14;
}

Result

LTR

RTL

Markup obtained

	<div class="content_rating" role="img" aria-label="Rating: 3.5 out of 5 stars.">
			<p class="sr-only" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
			User Rating:&#160;<span itemprop="ratingValue">3.5</span>&#160;/&#160;<span itemprop="bestRating">5</span>			<meta itemprop="ratingCount" content="30">
			<meta itemprop="worstRating" content="1">
		</p>
		<ul>
		<li class="vote-star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="15" width="15" fill="currentcolor"><path 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>
</li><li class="vote-star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="15" width="15" fill="currentcolor"><path 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>
</li><li class="vote-star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="15" width="15" fill="currentcolor"><path 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>
</li><li class="vote-star-empty"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="15" width="15" fill="currentcolor"><path 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>
</li><li class="vote-star-ltr"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="15" width="15" fill="currentcolor"><path d="M288 0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6V0z"/></svg>
</li><li class="vote-star-empty"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="15" width="15" fill="currentcolor"><path 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>
</li>	</ul>
</div>

Also, if desired ( @chmst ) we can easily modify the input and select display to be more readable. That would be for the Cassiopea Team to decide.

@sandewt Your solution is too complex for the users. I have not seen this on any site.

Can you just do a vote like this on an article so that a person can pick a one-star/half-star pitch? That would be more user-friendly than a dropdown that looks awful with this Rate button.

@infograf768 , your proposal looks good

I:

.filter-currentcolor {
        filter: invert(A) sepia(B) saturate(C) hue-rotate(D) brightness(E) contrast(F);
 }

In this case you do not need to change the .svg code. I see this as an advantage.
I only found 1 converter on the internet to generate the code for .filter-currentcolor. A bit questionable!
I understand that this solution is not your preference. So don't choose this option?

II:
The code:

HTMLHelper::_('image', $link . 'star-half.svg', Text::_('PLG_VOTE_STAR_ACTIVE_HALF'), array('class' => 'vote-star-rtl'));

becomes:

$img .= '<li class="vote-star">' . file_get_contents($simplestar) . '</li>';

Question:

• Text::_('PLG_VOTE_STAR_ACTIVE_HALF') : so drop the eg alt="Star Inactive" language string here. SEO consequence?

[EDIT]

That would be more user-friendly than a dropdown that looks awful with this Rate button.

Totally agree.

@sandewt can you please take a look at this html+css solution for rating: https://codepen.io/lsirivong/pen/ekBxI

can you please take a look at this html+css solution for rating:

It looks very user friendly.

SEO consequence?

alt is replaced by <title> in a svg

See here a way to act on the inside of the svg tag
https://medium.com/@matthewcoatney/the-beauty-of-svg-php-css-bb92d0a2804

I did not do it above but that was only a draft.

Some improvement to my proposal above

The .svg files would start with
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentcolor" role="img"><title>{{description}}</title><path etc.

i.e. take off height and width and add title.

The rating.php file concerning img. would be modified to include the title. rtl set in the css

for ($i = 0; $i < floor($stars); $i++)
{
	$title       = Text::_('PLG_VOTE_STAR_ACTIVE');
	$staractive  = str_replace("{{description}}", $title, file_get_contents($simplestar));

	$img .= '<li class="vote-star">' . $staractive . '</li>';
}

if (($stars - floor($stars)) >= 0.5)
{
	$title        = Text::_('PLG_VOTE_STAR_INACTIVE');
	$starinactive = str_replace("{{description}}", $title, file_get_contents($simplestar));

	$img .= '<li class="vote-star-empty">' . $starinactive . '</li>';

	$title          = Text::_('PLG_VOTE_STAR_ACTIVE_HALF');
	$halfstaractive = str_replace("{{description}}", $title, file_get_contents($halfstar));

	$img .= '<li class="vote-star-dir">' . $halfstaractive . '</li>';

	$stars += 1;
}

for ($i = $stars; $i < 5; $i++)
{
	$title        = Text::_('PLG_VOTE_STAR_INACTIVE');
	$starinactive = str_replace("{{description}}", $title, file_get_contents($simplestar));

	$img .= '<li class="vote-star-empty">' . $starinactive . '</li>';
}

The css would include height and width, plus rtl, something like

.content_rating .vote-star {
  display: inline-block;
}

.content_rating .vote-star svg {
  width: 1em;
  height: 1em;
  fill: #fd7e14;
}

.content_rating ul {
  margin-left: -2.8em;
  margin-bottom: .5em;
}

[dir=rtl] .content_rating ul {
  margin-left: auto;
  margin-right: -2.8em;
}

.content_rating .vote-star-empty {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill-opacity: 0.3;
}

.content_rating .vote-star-dir {
  display: inline-block;
  margin-left: -1.05em;
}

[dir=rtl] .content_rating .vote-star-dir {
  margin-left: auto;
  margin-right: -1.05em;
  transform: scaleX(-1);
}

.content_rating .vote-star-dir svg {
  width: 1em;
  height: 1em;
  fill: #fd7e14;
}

Markup

<div class="content_rating" role="img" aria-label="Rating: 3.5 out of 5 stars.">
			<p class="sr-only" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
			User Rating:&#160;<span itemprop="ratingValue">3.5</span>&#160;/&#160;<span itemprop="bestRating">5</span>			<meta itemprop="ratingCount" content="30">
			<meta itemprop="worstRating" content="1">
		</p>
		<ul>
		<li class="vote-star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentcolor" role="img"><title>Star Active</title><path 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>
</li><li class="vote-star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentcolor" role="img"><title>Star Active</title><path 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>
</li><li class="vote-star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentcolor" role="img"><title>Star Active</title><path 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>
</li><li class="vote-star-empty"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentcolor" role="img"><title>Star Inactive</title><path 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>
</li><li class="vote-star-dir"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentcolor" role="img"><title>Star Active Half</title><path d="M288 0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6V0z"/></svg>
</li><li class="vote-star-empty"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentcolor" role="img"><title>Star Inactive</title><path 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>
</li>	</ul>
</div>

Some improvement to my proposal above

For the accessibility, have I already replaced this code, see https://codepen.io/svinkle/pen/oYjoNE
<div class="content_rating">
with
<div class="content_rating" role="img" aria-label="<?php echo Text::sprintf('PLG_VOTE_STAR_RATING', $rating); ?>">

The rating.php file concerning img. would be modified to include the title. rtl set in the css

I now wonder what the added value is to add a title. Whether that is not overkill?

An interesting article about accissible sggs in this context. See https://css-tricks.com/accessible-svgs/

I'm not out yet.

That site states

Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:

    Inside the <svg>, add:
        <title>A short title of the SVG</title>
            must be the first child of it’s parent element
            will be used as a tooltip as the pointing device moves over it

and yes, not sure we need it.
@zwiastunsw @brianteeman
What do you think?

@infograf768

I try to test, but I get the following error message

Warning: file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:1416F086:SSL routines:tls_process_server_certificate:certificate verify failed in

Drone?

[EDIT] Problem solved in code

Maybe a bit late, but have you considered using css masks?
I made an example:
https://codepen.io/breakdesigns/pen/YzWPvVP

Please update your branch as drone is failing.

Please update your branch as drone is failing.

Sorry, I do not know how.

The following suggest me:

• Make a new Pull request of patch-2
• And merge 4.0-1 dev with patch-2 ?

Is that correct?

@richard67
Can you help @sandewt updating his branch?

@infograf768 Not before tonight ... am at work. Better ask someone else.

Can wait tonight. ;)

Just a couple of weeks ago I wrote a tutorial based on my own learning experience. It covers the question from @sandewt , if briefly. It is here:
https://docs.joomla.org/Setting_up_Eclipse_PDT_2020_and_Git_for_Pulls

Do images need to have description here given that they're entirely decorative? I think Rating: x out of y should be sufficient.

@sandewt Shall I update your branch like I described in my previous comment? I just checked and see I have write access, so I can do that. But maybe you prefer to try it yourself first.

If you don't have a local git client then you can't do it.

I want to learn in git first. So I still have some homework to do.

I just checked and see I have write access, so I can do that.

If you'd like to be so kind, please.

Why was the drone failing?

@sandewt There were changes made on drone configuration recently in the 4.0-dev branch, so PRs which still were based on the old configuration failed with drone. I don't know the details because I am not the expert in our testing environment.

@sandewt I've just updated your branch. Let's hope it helps with drone.

But in addition you should check Quy's and SharkyKZ's last review comments and if necessary do changes.

@sandewt I've just updated your branch. Let's hope it helps with drone.

All checks have passed
3 successful checks

Thanks.

Use HTMLHelper so the image can be overridden.

@SharkyKZ Code changed, HTMLHelper added (again) and made it suitable for inline sgv's.

#31098 (comment)

The code there will simplify this Pr a lot

The code there will simplify this Pr a lot

• Deleted: some text strings
• Deleted: title description in svg's
• Added: aria-hidden="true" to svg's

See https://codepen.io/svinkle/pen/oYjoNE as an example.

In a mono-language website I took these steps:

• Go to the database
• open the table #__content_rating
• change eg the rating_sum in 100
• change eg the rating_count in 30

The expected result is confirmed

@sandewt
you now can use https://github.com/joomla/joomla-cms/blob/4.0-dev/libraries/src/HTML/Helpers/Icons.php#L104
which is merged in core.

you now can use https://github.com/joomla/joomla-cms/blob/4.0-dev/libraries/src/HTML/Helpers/Icons.php#L104
which is merged in core.

@infograf768 Done

@N6REJ The icon class is not working as it should yet, in the case an icon(s) is (are) not loaded.

I think this is where the problem lies, because there is no return null:

if (!$file)
{
	return null;
}

Possible solution, replace the previous code with:

use Joomla\CMS\Filesystem\File;
....

if (!File::exists($file))
{
	return null;
}

The return is fine but it should be a line above.

I can't reproduce the issue here.

I can't reproduce the issue here.

You have to do something extra.
Rename eg images folder to images-test from \media\plg_content_vote\images

@SharkyKZ

Do you mean

public static function svg(string $file, bool $relative = true): ?string
	{
		// Check extension for .svg
		$extension = strtolower(substr($file, -4));

		if ($extension !== '.svg')
		{
			return null;
		}

		// Get path to icon
		$file = HTMLHelper::_('image', $file, '', '', $relative, true);

		// If you can't find the icon or if it's unsafe then skip it
		if (!$file)
		{
			return null;
		}

		// Make sure path is local to Joomla
		$file = Path::check(JPATH_ROOT . '/' . substr($file, \strlen(Uri::root(true))));

		// Get contents to display inline
		$file = file_get_contents($file);

		return $file;
	}

Yes.

@sandewt
can you test that code?

EDIT: Although I see no reason to rename the images folder...

can you test that code?

That code works too.

I prefer to make the change immediately before $file = file_get_contents($file);.
This in connection with security. Possible here what overdone.

EDIT: Although I see no reason to rename the images folder...

To test if everything is working properly.

This in connection with security.

Agree on that.

@SharkyKZ
What do you think?

Shouldn't need to add more file checks. HTMLHelper::image() returns null if file doesn't exist. But the value is being checked too late, after prepending root path, so it can never be null. Code posted above should fix this.

@sandewt htmlhelper::svg is available now.

The return is fine but it should be a line above.

do I need to adjust something?

IMHO this PR should go in as is and a new PR should be done with the code above ( #31098 (comment) ) to modify the new method HTMLHelper::_('icons.svg'

@sandewt htmlhelper::svg is available now.

Well done. This PR makes good use of that. 👍

do I need to adjust something?

@N6REJ Would you like to make a new PR for htmlhelper::svg regarding a correct return? See the improvement proposals above.

ok, I'll care care of it either tonight or tomorrow.

I have tested this item ✅ successfully on c0f9d3d

I have tested this item ✅ successfully on c0f9d3d

RTC

I see that the Joomla core is now using a newer version of Font Awesome (Free 5.15.1). This code of the .svg has been changed compared to earlier.

It concerns the following addition:
<! - Font Awesome Free 5.15.1 by @FontAwesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) ->

That is why I have brought the vote-star.svg and vote-star-empty code into line with it.

@richard67

Would you please reset the counter to 0 before retesting?

Back to pending.

Would you please reset the counter to 0 before retesting?

Done. @gostn @infograf768 Could you test again? Thanks in advance.

@sandewt why include the license in the icon? This seems like alot of work to keep updated. Also why not just use the icon prepackaged via the htmlhelper::svg class?

why include the license in the icon? This seems like alot of work to keep updated.

@N6REJ, indeed it's a lot of work, to comply with the license terms.

Also why not just use the icon prepackaged via the htmlhelper::svg class?

If that can be centrally arranged (= prepackaged ?) via htmlhelper::svg class then that certainly has my preference.

Can this be realized, assuming there are different licenses?

500error icons::svg not found.

#31410

500error icons::svg not found.

I can't confirm.

Is the next method be loaded? If not, a 500 error is generated.

public static function svg(string $file, bool $relative = true): ?string
{

See file: \libraries\src\HTML\Helpers\Icons.php, is a part of:

• [4.0] Webauth inline SVG button with fill #31190.
  This is merged 3 days ago!

Using:

• xampp
• PHP Version | 7.4.11
• Joomla! 4.0.0-beta6-dev Development [ Mañana ] 27-October-2020 19:54 GMT

@brianteeman your using its wrong. It's htmlhelper::icon(svg)

@sandewt not sure what you mean by to comply with license. I don't see anywhere that says we need to include the license with each svg. If your referring to https://creativecommons.org/licenses/by/4.0/ I think we could get by with a statement in docs stating that we use FA webfonts & svg.
Infact I'm sure we don't need to do that as if we were to use the svg directly via sprite or image its not included!

not sure what you mean by to comply with license.

Sorry my english is not always correct.
I mean that the license requirements of Font Awesome must be met. But I am not an expert in that field.

@N6REJ I am not using anything - I just applied the pr and got the error

@sandewt me either but I bet we don't need to include it on a per icon use. That would be silly. Especially considering they don't do so themselves.
@HLeithner thoughts?

Regarding the copyright it would be sufficient to include their required copyright and licence statement in the folder that the icons are located.

See media\vendor\fontawesome-free\LICENSE.txt for an example

me either but I bet we don't need to include it on a per icon use. That would be silly. Especially considering they don't do so themselves.

@N6REJ They do it (recently) themselves, see:
\joomla\node_modules@fortawesome\fontawesome-free\svgs\solid\star.svg

@sandewt ok, so when you run the helper it will automatically include that as its extracting the contents of the svg?

nvm, that was the pr that was rejected. Anyway, file_get_contents should include everything in the file.

@sandewt ok, so when you run the helper it will automatically include that as its extracting the contents of the svg?

You mean run this PR?

On Mon, 16 Nov 2020 at 09:39, infograf768 notifications@github.com wrote:

There is now a discussion about the new method to load svg content.
I suggest in the mean while to take off the copyright stuff from the svg
which effect is just to complicate the code.

Please do not simply remove the copyright. It must be replaced with the
copyright file as I described before

I had a reason to delete my comment as I tested the fontawesome-free-5.15.1-web.zip package and indeed, the copyright is included in each .svg.
Example for address-book.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"/></svg>

@sandewt no, one I made, but as @infograf768 no need to mess with copyright yourself. Simply do file_get_contents ( assuming your not using my helper ) on the svg file itself and your done. Auto updated and everything.

@sandewt no, one I made, but as @infograf768 no need to mess with copyright yourself.

I totally agree.

Simply do file_get_contents ( assuming your not using my helper ) on the svg file itself and your done. Auto updated and everything.

I wait and see if your PR [#31410] - [4.0] htmlhelper svg is successful.

Back to an older situation:

See [4.0] Webauth inline SVG button: #31516 (comment)

See: [4.0] htmlhelper svg #31410

I have tested this item ✅ successfully on c0f9d3d

I have tested this item ✅ successfully on c0f9d3d

Tested successfully

I have tested this item ✅ successfully on c0f9d3d

I've noticed there is a reference (c0f9d3d) to @sandewt sandewt committed on 19 Oct.
After that there have been changes in the code

How is that possible?

When I have tested this item, an error occurred

Chrome on Windows 10 with Xampp Server

@rjharishabh

I have tested this item 🔴 unsuccessfully on 8e697cd

What are the specifications of your test environment?

Please, check the error log.

[EDIT]

rtc after checking again.

@rjharishabh please test

@sandewt I am getting this and the image is also not present
I don't know, am I doing something wrong

in both chrome and firefox

@sandewt I am getting this and the image is also not present
I don't know, am I doing something wrong

Looks like you're not doing anything wrong, check the following:

The images are .svg files.
It concerns these images (stars).

The following classes are loaded, see the source code.

Thanks all 👍

Related to:

#32919 | [4.0] css changes in voting plugin
#32914 | [4.0] Pagination set to bottom after voting

@sandewt 👍
thanks