[ticket/15538] Icon usage twig function#5489
Conversation
PHPBB3-15538
|
!set WIP 🚧 |
| @@ -0,0 +1,10 @@ | |||
| {% if TYPE == 'png' %} | |||
| <img class="icon png-{{ ICON ~ S_CLASSES }}" src="{{ T_PATH }}"{% if TITLE %} alt="{{ TITLE }}"{% endif %} style="background: black;"> | |||
There was a problem hiding this comment.
whats with the hardcoded style?
There was a problem hiding this comment.
Oh yeah my bad, I downloaded the white png 😵 couldn't see it, like I said, the entire html file needs work as it's just a mock. Decided that that will be for you.
First want to make sure the PHP and loading times are correct.
| {% if TYPE == 'png' %} | ||
| <img class="icon png-{{ ICON ~ S_CLASSES }}" src="{{ T_PATH }}"{% if TITLE %} alt="{{ TITLE }}"{% endif %} style="background: black;"> | ||
| {% elseif TYPE == 'font' %} | ||
| <i class="icon fa-{{ ICON ~ S_CLASSES }}" aria-hidden="true"{{ S_ATTRIBUTES }}></i>{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ TITLE }}</span>{% endif %} |
There was a problem hiding this comment.
aria hidden should only be there if title else its should be false
| {% elseif TYPE == 'font' %} | ||
| <i class="icon fa-{{ ICON ~ S_CLASSES }}" aria-hidden="true"{{ S_ATTRIBUTES }}></i>{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ TITLE }}</span>{% endif %} | ||
| {% elseif TYPE == 'svg' %} | ||
| <svg class="icon svg-{{ ICON ~ S_CLASSES }}"{% if TITLE %} aria-hidden="true" aria-labeled-by="{{ TITLE_CLEAN }}"{% endif %} xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> |
There was a problem hiding this comment.
we do not need all of the extra stuff here you can remove
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24"
PHPBB3-15538
|
have a look at some of the code from this old pr https://github.com/phpbb/phpbb/pull/4765/files might help with testing and what not |
|
@mrgoldy where did we leave of with this? should probably create some tests. We will need to test it in all locations/possible uses that is to say I want to use it for icons, imagesets, contact icons, forum icons, smiles the last one is a maybe but this means we need to be able to specify in the case of forum icons a different path as they are in the files folder same with the smiles. |
PHPBB3-15538
Checklist:
Tracker ticket (set the ticket ID to your ticket ID):
https://tracker.phpbb.com/browse/PHPBB3-15538
This is for the Chameleon Theme, to help out @hanakin.
No PNG icons will be shipped initially with the theme, but SVG's will be.
This is not to say that other style authors do not want to use PNG's, so there is support for png aswell.
The assumption is that icons will be located in
theme/icons/png/some_icon.pngtheme/icons/svg/some_icon.svgIn regards to loading times, I do not know what is faster:
icon.htmlthrough the environmentThis also goes for the svg's
<path d="">. Cause the svg's will mostlikely be 'stand-alone' versions of the icon (<svg>..</svg>) and we only want to use the thed=""part from the<path>. Anyways, I am not sure what the fastest way is to get the contents of the svg file:render()Moreover the svg
<path d="">, I couldn't quite find it online yet but what are the exact allowed characters in that specific attribute? I am currently using'/d="([a-zA-Z0-9., ]+)"/'as a regex. Anything that needs to be included/excluded?The current
icon.htmlfile needs work, was just a quick mock up to get something to be displayed.