[RFC|Merged] Removal of imagesets

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
Post Reply
User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

[RFC|Merged] Removal of imagesets

Post by Arty »

Introduction
Original purpose of imagesets was to allow users use different sets of images with different styles. Almost nobody used this feature. Imagesets are tied to styles, using imageset from one style in another style almost always results in issues. So imagesets are used only for dynamic images (such as folder) and images that include language specific text (like "quote", "edit"), the rest can be replaced by theme.

Proposal
Completely remove imagesets, replace all hardcoded images with CSS.

How will images be structured?
Images that are currently in style/*/imageset/ will be in style/*/theme/images/
Images that are currently in style/*/imageset/{lang} will be in style/*/theme/{lang}/

How will language specific imagesets be handled?
Language specific stuff will be theme/{LANG}/, like theme/en/ and there will be file theme/{LANG}/stylesheet.css that includes all dimensions. In overall_header.html code would look like this:

Code: Select all

<link rel="stylesheet" href="{T_THEME_PATH}/stylesheet.css">
<link rel="stylesheet" href="{T_THEME_LANG_PATH}/stylesheet.css">
Advantages of these changes
  • Less style components to deal with, all images will be in one component.
  • More control over the way folder images are handled, allowing style author use sprites and font changes instead of relying only on one folder image. Same applies to language specific buttons: style authors will be able to use sprites.
  • No need to precompile stylesheets. All language specific stuff will be in a css file, so no need to insert imageset data in css file.
  • Mod authors won't have to modify acp style management and execute sql queries in order to add one simple language specific button.
  • Main stylesheet.css will contain fallback code for English language pack, so in case if theme directory for current language pack is missing, English buttons will automatically be shown.
Disadvanges of these changes
  • Forum admin will no longer be able to easily switch images in admin control panel, he'll have to edit entry in css file instead.
  • Logo file name will be hardcoded into overall_header.html
Tracker ticket
Ticket: http://tracker.phpbb.com/browse/PHPBB3-10336
Proposed patch (full removal): https://github.com/cyberalien/phpbb3/co ... cket/10336
Proposed patch (removal with backwards compatibility): https://github.com/cyberalien/phpbb3/tr ... -imagesets

User avatar
Vinny
Style Customisations
Style Customisations
Posts: 129
Joined: Thu May 20, 2010 4:01 am
Location: Brazil
Contact:

Re: Removal of imagesets

Post by Vinny »

Totally in favor.
CyberAlien wrote:Put language specific stuff in theme/{LANG}/, like theme/en/ and add file theme/{LANG}/stylesheet.css that includes all dimensions. In overall_header.html code would look like this:
I think that it can be in: theme/lang.css, not requiring path for the language.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Removal of imagesets

Post by Arty »

Vinny wrote:I think that it can be in: theme/lang.css, not requiring path for the language.
It could also be used for language specific images. Then in css file path to images would be empty and creating new language would be as simple as copying whole directory "en".

User avatar
Vinny
Style Customisations
Style Customisations
Posts: 129
Joined: Thu May 20, 2010 4:01 am
Location: Brazil
Contact:

Re: Removal of imagesets

Post by Vinny »

CyberAlien wrote:It could also be used for language specific images. Then in css file path to images would be empty and creating new language would be as simple as copying whole directory "en".
The images of languages are in: styles/prosilver/imageset/en/*.*, I consider changing everything for variable text, no longer needing images of languages.

To prevent:
copying whole directory "en".
and: http://www.phpbb.com/kb/article/how-to- ... our-style/

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Removal of imagesets

Post by Arty »

Vinny wrote:The images of languages are in: styles/prosilver/imageset/en/*.*, I consider changing everything for variable text, no longer needing images of languages.
I'm suggesting completely remove imageset, so that directory wouldn't exist.
Vinny wrote: To prevent:
copying whole directory "en".
and: http://www.phpbb.com/kb/article/how-to- ... our-style/
That can be solved by adding fallback code to global css file pointing to English images, then overwriting it in localized css file. Then if directory for current language pack doesn't exist, all buttons would work correctly, making that KB article obsolete. Like this:

Global CSS file styles/whatever/theme/stylesheet.css:

Code: Select all

.profile-icons a { background-image: url(en/profile.png); }
.profile-icons a.quote { background-position: 0 0; width: 80px; }
... etc
English or translated CSS file styles/whatever/theme/en/stylesheet.css:

Code: Select all

.profile-icons a { background-image: url(profile.png); }
.profile-icons a.quote { width: 80px; }
... etc

Derky
Development Team
Development Team
Posts: 18
Joined: Sat Oct 08, 2005 7:50 pm
Location: Netherlands
Contact:

Re: Removal of imagesets

Post by Derky »

Very good proposal, imagesets (with the unhandy .cfg files) are a real pain in 3.0 currently.
This will also solve the localisation problem (missing buttons) that is still present after 11 releases.

I think we absolutely need this in 3.1.

User avatar
nickvergessen
Former Team Member
Posts: 733
Joined: Sun Oct 07, 2007 11:54 am
Location: Stuttgart, Germany
Contact:

Re: Removal of imagesets

Post by nickvergessen »

While sprites seem to be a good idea, they should be "dynamic" so that MODs can just add there images easily.
But sprites should be discussed here: viewtopic.php?f=108&t=37476
Member of the Development-TeamNo Support via PM

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Removal of imagesets

Post by Arty »

Sprites is just one of benefits of removing imageset, its not a goal of removing imagesets.

User avatar
naderman
Consultant
Posts: 1727
Joined: Sun Jan 11, 2004 2:11 am
Location: Berlin, Germany
Contact:

Re: Removal of imagesets

Post by naderman »

This sounds like a good idea to me. There are two things I wonder:

Are there any legitimate use cases for non-theme images in the template? Cases where one would use <img> and want to have an image in the template? I don't think images would ever belong into the template, but would there be a way to verify that a theme provides the images a template requires for use in <img> tags?

How would we go about the transition? How much work would this mean for style authors? Is there a way to simplify the transition by providing some sort of fallback system? How much work would it be to update styles if the images are no longer available as template variables?

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Removal of imagesets

Post by Arty »

naderman wrote:Are there any legitimate use cases for non-theme images in the template? Cases where one would use <img> and want to have an image in the template?
Currently <img> tags are used in code for last post and newest post icons, like this:

Code: Select all

<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF -->
If imageset wouldn't exist anymore, that code could be changed to something like this:

Code: Select all

<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}" class="icon-newest">{L_NEWEST_POST}</a> <!-- ENDIF -->
and would require adding something like this to css:

Code: Select all

.icon-newest { 
    display: inline-block;
    background: url(newest.png) 0 50% no-repeat;
    width: 0; /* padding is used for width */
    height: 10px; /* image height */
    padding-left: 11px; /* offset text to hide it, equal to image width */
    overflow: hidden; /* hide text */
}
That would get rid of <img> tag and put meaningful text instead of it. After applying that css it would look the same as it used to.
naderman wrote:How would we go about the transition? How much work would this mean for style authors? Is there a way to simplify the transition by providing some sort of fallback system? How much work would it be to update styles if the images are no longer available as template variables?
That would require changing quite a lot of code, so transition won't be easy.

I'll test it on latest 3.1 version within next few days and will report back.

Post Reply