HiDPI smilies for phpBB

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.

If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
Post Reply
rednoah
Registered User
Posts: 2
Joined: Fri Sep 01, 2023 9:25 am

HiDPI smilies for phpBB

Post by rednoah »

The venerable original phpBB smilies icons are perfect for a @1x display scale factor, but a bit ugly on @2x display scale factor or higher.

I've worked with a pixel artist and a vector artist to reimagine the original phpBB smilies, as a drop-in enhancement via srcset="icon_arrow.webp 2x" attributes and I'd be happy to contribute them to the phpBB project if you want them:
https://github.com/rednoah/phpBB-smilies

Image




:idea: phpBB does not currently support responsive images but I was able to add the srcset attributes to make 2x images work via jQuery code at the end of my overall_footer.html theme template file without modifying core phpBB code:
https://github.com/rednoah/Absolution/b ... .html#L133

Code: Select all

<script type="text/javascript">
	// use high resolution smilies
	$("img.smilies, #smiley-box img").each(function(i) {
		$(this).attr("srcset", $(this).attr("src").replace("./images/smilies/", "{T_THEME_PATH}/smilies/2x/").replace(".gif", ".png") + " 2x");
	});
</script>

:idea: I am currently using pre-scaled 2x images based on the SVG vector graphics in my own forums because SVG rendering at lower resolutions in Google Chrome is somewhat ugly. I've got a demo page here for comparison, ideally viewed with a 200% display scale factor to see the difference:
https://www.filebot.net/forums/styles/A ... e/smilies/

User avatar
Kailey
Community Team Leader
Community Team Leader
Posts: 36
Joined: Mon Sep 01, 2014 10:54 pm

Re: HiDPI smilies for phpBB

Post by Kailey »

The work is greatly appreciated. I've alerted the Development Team to this topic - might be something that can be included in a future release.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: HiDPI smilies for phpBB

Post by hanakin »

Thank you so much for the work; this is very useful. I was working on this myself https://www.phpbb.com/customise/db/styl ... gest_svgs/ but this saves me so much time if we have permission to can use these? We would probably just include the SVG versions.
Donations welcome via Paypal Image

rednoah
Registered User
Posts: 2
Joined: Fri Sep 01, 2023 9:25 am

Re: HiDPI smilies for phpBB

Post by rednoah »

Feel free to use them. I paid for complete ownership with the Fiverr artists I worked with.

eytapioca
Registered User
Posts: 1
Joined: Thu Jan 11, 2024 6:57 am

Re: HiDPI smilies for phpBB

Post by eytapioca »

It's great, rednoah! There are some icons so fun. I wonder ask how can you do that?

User avatar
P_I
Community Team
Community Team
Posts: 136
Joined: Fri Oct 31, 2014 4:56 am

Re: HiDPI smilies for phpBB

Post by P_I »

Let me also add my thank you for contributed these to the phpBB community.
rednoah wrote: Fri Sep 01, 2023 10:38 am :idea: phpBB does not currently support responsive images but I was able to add the srcset attributes to make 2x images work via jQuery code at the end of my overall_footer.html theme template file without modifying core phpBB code:
https://github.com/rednoah/Absolution/b ... .html#L133

Code: Select all

<script type="text/javascript">
	// use high resolution smilies
	$("img.smilies, #smiley-box img").each(function(i) {
		$(this).attr("srcset", $(this).attr("src").replace("./images/smilies/", "{T_THEME_PATH}/smilies/2x/").replace(".gif", ".png") + " 2x");
	});
</script>
I have trying to get this to work with the default prosilver style without success on phpBB 3.3.11.

I created the styles/prosilver/theme/smilies/2x directory and copied the contents of phpBB-smilies-main/pixel-remaster/smilies/ into that directory. Then copied the above code into styles/prosilver/template/overall_footer.html and used ACP -> Purge the cache.

However the new smilies do not see to be appearing when I scale to 200%. Tested using both Chrome and Edge on Windows 11.

Am I missing something?

User avatar
P_I
Community Team
Community Team
Posts: 136
Joined: Fri Oct 31, 2014 4:56 am

Re: HiDPI smilies for phpBB

Post by P_I »


Post Reply