UX Improvements [#1690216]

Lets open a discussion with a view to improve the usability of this module, probably reduce the front end complexity and make it more intuitive for end users.

There's lots of great functionality here, but for wider adoption it needs to be less complex and more intuitive.

If possible, ideally I think this needs to be whittled down to a single additional field for "width" on the image style edit form. For Drupal 8 that's probably going to be the kind of thing we need to do, so its very easy to use.

Status

- breakpoints and default_suffix are defined by the theme
- on the appearance page a user can select to use the default settings or override the default_suffix and/or disable some styles
- on the resp_img settings a user can add site wide (for all themes) suffixes and breakpoints
- user defined breakpoints can be enabled/disabled
- a user defined breakpoint with the same name as a theme defined one, will override it.

Comment	File	Size	Author
#7	i1690216-7a.png	24.06 KB	attiks
#7	i1690216-7b.png	45.71 KB	attiks
#6	i1170478-106a.png	14.31 KB	attiks
#6	i1170478-106b.png	45.61 KB	attiks
#3	i1690216.png	45.05 KB	attiks
#1	resp_img_ux_1.png	56.56 KB	attiks

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

attiks CreditAttribution: attiks commented 18 July 2012 at 06:40

Version:	7.x-1.x-dev	» 8.x-1.x-dev
Issue tags:		+mobile, +user experience, +frontend performance, +media queries, +Needs backport to D7, +Responsive Design, +Design Initiative, +d8mux

File	Size
resp_img_ux_1.png	56.56 KB

The problem is that you can have multiple sets of image styles (like image_mobile, logo_mobile, sidebar_mobile, ...) and they all use the same breakpoint (don't have to, but most likely they will), so if you add the breakpoint directly to the imagestyle it means that if it changes you have to change it in three different places.

On the other hand we still need the notion of suffixes to be able to handle inline images, because in that case the only thing we now is the URL of the image and we need a way to map it back to a particular responsive set of image styles.

Those things aside, we need some UX improvements to make it easier to configure it, some ideas:

Enter suffixes and breakpoints directly on the screen
'Load default' will load some 'sane' defaults
'Load from theme' would load the breakpoints from the theme.info file

Moving this to 8.x and tagging, this will be backported to D7 as well.

Feedback, other ideas, comments, ....

Comment #2

attiks CreditAttribution: attiks commented 18 July 2012 at 20:24

'Load from theme' is added to latest d8 version, it expects the following inside theme.info
resp_img[mobile] = 0
resp_img[narrow] = 560
resp_img[wide] = 851
resp_img[tv] = 3456

and it only creates suffixes if they don't already exist.

Comment #3

attiks CreditAttribution: attiks commented 19 July 2012 at 13:08

File	Size
i1690216.png	45.05 KB

Code is no longer using ctools but the new config system

UI is changed:

Comment #4

Jeff Burnz CreditAttribution: Jeff Burnz commented 20 July 2012 at 11:50

Why can't the Name field automatically become the Suffix? The notion of "suffix" is hard to understand, in fact I have no idea what it does or why I need to enter it. Other systems in Drupal, such as content types, or creating a View, write the machine name automatically - its this machine name that is important and not something the user should have to think about.

Load from theme seems like a nice feature, by why not automate this - why do I have to manually load from theme, you can get this without any user interaction. After things are loaded from theme is there any notification of what the source is - such as "theme", "database" etc, say like Page manager can tell where the configuration is sourced from. Users I think will worry that if they load from theme - will this go away if they change themes?

Just my two cents.

Comment #5

attiks CreditAttribution: attiks commented 20 July 2012 at 12:24

1/ Suffix will become machine_name so they are autogenerated, the naming of the image styles will be fixed basename__suffix (so always 2 underscores).

2/ Load from theme will be solved and automatic, suffixes are going to be theme specific. I'll add 'source' to the settings so we can track the origin.

Question:

Can an end-user alter suffixes defined by the theme?
Can an end-user delete suffixes defined by the theme?

Comment #6

attiks CreditAttribution: attiks commented 20 July 2012 at 17:01

File	Size
i1170478-106b.png	45.61 KB
i1170478-106a.png	14.31 KB

I worked some more on the UI/UX

If a theme has suffixes/breakpoints in the .info file, they can be enabled/disabled in the theme settings

The settings pages of resp_img lists all enabled theme suffixes and allows the user to add more, user defined suffixes can be enabled/disabled

Comment #7

attiks CreditAttribution: attiks commented 20 July 2012 at 18:47

Status:

Active

» Needs review

File	Size
i1690216-7b.png	45.71 KB
i1690216-7a.png	24.06 KB

default_suffix is moved to the theme settings, main reason is that (for the moment) you cannot save a single theme setting.

resp_img contains only the theme settings and a tab to easily create image_styles, you can override a theme defined breakpoint, by using the same name while adding a user defined one.