[RFC|Merged] Removal of imagesets

[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

[Vinny]

Totally in favor.

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.

[Arty]

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

[Vinny]

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/

[Arty]

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.

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]

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.

[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

[Arty]

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

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

[Arty]

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.

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.