HiDPI smilies for phpBB

[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






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 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/

[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.

[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.

[rednoah]

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

[eytapioca]

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

[P_I]

Let me also add my thank you for contributed these to the phpBB community.

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?

[P_I]

Submitted as [PHPBB3-17304] HiDPI smilies for phpBB - phpBB Tracker