Follow-up to #2334387: UI changes to support current responsive image standards

Problem/Motivation

The help text in general (both field descriptions and actual help page) does not conform to UI guidelines and needs clean-up. Specifically, it's all way too long, and it focuses on exposing the underlying technical details vs. being more use-case focused "Use this to foo your bar so your users can baz." See Field UI settings descriptions for an example.

Proposed resolution

Write it

Remaining tasks

User interface changes

Described above.

API changes

There are no API changes: those have already been taken care of in other issues. This would just improve the ability to make use of those API changes through a UI.

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task because this a follow-up to a recent critical change.
Issue priority Major because the sizes attribute will be very difficult to configurate without this UI change.
Prioritized changes The main goal of this issue is improve usability for the new sizes attribute. Making this easier to use will give Drupal 8 full ability to make use of the responsive images specification, which ultimately means better front-end performance for Drupal 8 sites. This is also a follow-up change to a recent critical, #2260061: Responsive image module does not support sizes/picture polyfill 2.2.
Disruption This will not be disruptive for core, contrib modules or themes. This only adds easier configuration and does not change the underlying APIs.
Members fund testing for the Drupal project. Drupal Association Learn more

Comments

attiks created an issue. See original summary.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

yoroy’s picture

Issue tags: +ux-interfacetext

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

rodrigoaguilera’s picture

Status: Needs work » Needs review
Issue tags: +Dublin2016
FileSize
8.22 KB

Here is a first patch fixing some unneeded HTML inside a string and coding standards

pmchristensen’s picture

Assigned: Unassigned » pmchristensen

I'm reviewing the patch doing the mentored sprint at Dublin 2016.

pmchristensen’s picture

Assigned: pmchristensen » Unassigned
Status: Needs review » Needs work

Did a review and have the following comments:

  1. +++ b/core/modules/responsive_image/responsive_image.module
    @@ -28,7 +28,7 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
    +      $output .= '<p>' . t('The Responsive Image module provides an image formatter that allows browsers to select which image file to display based on media queries or which image file types the browser supports, using the HTML 5 picture and source elements and/or the sizes, srcset and type attributes. For more information, see the <a href=":responsive_image">online documentation for the Responsive Image module</a>.', array(':responsive_image' => 'https://www.drupal.org/documentation/modules/responsive_image')) . '</p>';
    

    Look at the comment below about possible changes.

  2. +++ b/core/modules/responsive_image/responsive_image.module
    @@ -39,14 +39,20 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
    +      $output .= '<dd>' . t('While you have the option to provide only one image style per breakpoint, the sizes option allows you to provide more options to browsers as to which image file it can display, even when using multiple breakpoints for art direction. Breakpoints are defined in the configuration files of the theme.') . '</dd>';
    

    Look at the comment below about possible changes.

  3. +++ b/core/modules/responsive_image/responsive_image.module
    @@ -39,14 +39,20 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
    +      $output .= '<dd>' . t('Below the Sizes field you can choose multiple image styles so the browser can choose the best image file size to fill the space defined in the Sizes field. Typically you will want to use image styles that resize your image to have options that range from the smallest px width possible for the space the image will appear in to the largest px width possible, with a variety of widths in between. You may want to provide image styles with widths that are 1.5x to 2x the space available in the layout to account for high resolution screens. Image styles can be defined on the <a href=":image_styles">Image styles page</a> that is provided by the <a href=":image_help">Image module</a>.', array(
    

    Look at the comment below about possible changes.

  4. +++ b/core/modules/responsive_image/responsive_image.module
    @@ -39,14 +39,20 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
    +      $output .= '<dd>' . t('After defining responsive image styles, you can use them in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the format <em>Responsive image</em>, click the Edit icon, and select one of the responsive image styles that you have created. For general information on how to manage fields and their display see the <a href=":field_ui">Field UI module help page</a>. For background information about entities and fields see the <a href=":field_help">Field module help page</a>.', array(
    

    Look at the comment below about possible changes.

It is looking very good and everything is working. Please considerate to change from concat strings to array and then doing an implode - this is faster. eg:
$output[] = 'something';
$output[] = t('Something translated');
$output[] = 'Something more';
$output = implode('', $output);

You should also replace the array with short tag version '[]'. As by the coding standards for Drupal - this check is already included in the PHPCS. https://www.drupal.org/docs/develop/standards/coding-standards#array

pguillard’s picture

Status: Needs work » Needs review
FileSize
12.68 KB
12.71 KB

Here is a patch that (I hope) addresses #7 suggestions

Jelle_S’s picture

Status: Needs review » Needs work

I think @pmchristensen also meant the arrays as second parameters to the t() function when he said:

You should also replace the array with short tag version '[]'

Other than that it looks fine to me.

pguillard’s picture

Status: Needs work » Needs review
FileSize
12.64 KB
9.83 KB

Thanks @Jelle_S fro this clarification

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

kari.kaariainen’s picture

It should say:

"The vw unit is viewport width and is used instead of a percentage because vw always refers to the width of the entire viewport."

instead of:

"The vw unit is viewport width and is used instead of a percentage because the percentage always refers to the width of the entire viewport."

starshaped’s picture

Re-rolled patch to be up to date with 8.4.x.

starshaped’s picture

Updated the help text to replace 'percentage' with 'vw' as noted in #12.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.