[Fix Managing Responsive Image] Not working— contextual, content-specific crops are not used nor apparently saved at all

Created on 28 August 2023, over 1 year ago
Updated 29 August 2023, over 1 year ago

Problem/Motivation

Content-specific crops not getting saved.

When the media image is edited from within the context of a node ('Override media item in context of Action "Example") the crops are available, but they do not apply when viewed— indeed, they are apparently not saved, because when edited again it starts with the crop from the media itself not the override. Other overridable elements, such as ALT text, are working as expected.

Steps to reproduce

Version: 1.1.1

Two crop types configured (manual crop with automated crop fallback).

Used in two image styles.

Which are used by two responsive image styles.

For the full setup:

composer create-project drutopia/drutopia_dev_template:dev-main --keep-vcs --no-interaction drutopia-dev-site

And install Drutopia Drupal through the UI (not Drush, sorry).

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

1.2

Component

Code

Created by

🇺🇸United States mlncn Minneapolis, MN, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mlncn
  • 🇺🇸United States mlncn Minneapolis, MN, USA

    this is the case whether or not using the patch specified here https://www.drupal.org/project/media_library_media_modify/issues/3270150... 🐛 Can Media Library Media Modify be used with Image Widget Crop? RTBC

  • 🇫🇷France DrDam

    Have you activate Media Contextual Crop Reference module ?

    This mode are mandatory to use "media with context" fields.

  • Status changed to Postponed: needs info over 1 year ago
  • 🇺🇸United States mlncn Minneapolis, MN, USA

    One more note, "media_responsive_thumbnail" is used but again i don't think it's on display but 'save' that the problem is.

  • 🇺🇸United States mlncn Minneapolis, MN, USA

    Oh! We were not using https://www.drupal.org/project/media_contextual_crop_field_formatter

    I think i thought that it was required and would already be there!

  • 🇺🇸United States mlncn Minneapolis, MN, USA

    OK we seem much closer— a fatal error! Are we missing some configuration still? The 1.1 branch says it can use image formatter?

    TypeError: Cannot access offset of type string on string in media_contextual_crop_preprocess_responsive_image() (line 121 of modules/contrib/media_contextual_crop/media_contextual_crop.module).

    Full stack trace:

    call_user_func_array('media_contextual_crop_preprocess_responsive_image', Array) (Line: 285)
    Drupal\Core\Theme\ThemeManager->render('responsive_image', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 50)
    __TwigTemplate_47a341848160189fbb6f607d6291742d->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('core/themes/stable9/templates/field/responsive-image-formatter.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('responsive_image_formatter', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 174)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->macro_render_item(Array, Array, 1) (Line: 1226)
    twig_call_macro(Object, 'macro_render_item', Array, 80, Array, Object) (Line: 92)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('themes/contrib/bulma/templates/field/field.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array) (Line: 449)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 48)
    __TwigTemplate_8496e98d7d525cdc12108954e67330e7->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('core/themes/stable9/templates/content/media.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('media', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 174)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->macro_render_item(Array, Array, 1) (Line: 1226)
    twig_call_macro(Object, 'macro_render_item', Array, 80, Array, Object) (Line: 92)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('themes/contrib/bulma/templates/field/field.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array) (Line: 449)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 56)
    __TwigTemplate_7910549fe739a1a59cef75d2554898f9->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array, Array) (Line: 68)
    __TwigTemplate_de4070671666045e3ad965541aac976d->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('themes/contrib/octavia/src/templates/ds/ds-3col-stacked.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('ds_3col_stacked', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 39)
    __TwigTemplate_e1d55ad726a4050ffe258b4ecce97cab->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('modules/contrib/ds/templates/ds-entity-view.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('ds_entity_view', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array, ) (Line: 238)
    Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 583)
    Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 231)
    Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 128)
    Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
    Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
    call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
    Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 187)
    Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
    Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
    Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
    Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
    Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
    Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
    Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
    Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 51)
    Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
    Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
    

    And you've been very helpful, do you have an open collective or Kofi or similar to throw in some token of appreciation?

  • 🇫🇷France DrDam

    Did your media image use the standard "field_image" field ?
    Can you get me the "responsive_image.styles.XXX.yml" configuration file you used.

    The support of responsive_image are currently minimal, so maybe I have made some mistake here.

  • Status changed to Needs review over 1 year ago
  • 🇺🇸United States mlncn Minneapolis, MN, USA

    Yes! We will of course be filling out more image styles per responsive image style, but in our initial we had only one.

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States mlncn Minneapolis, MN, USA

    All right! The crops are being saved, and no fatal error!

    Still not seeing the crops— missing somewhere to configure that?

    And/or also getting this:

    Warning: foreach() argument must be of type array|object, null given in media_contextual_crop_preprocess_responsive_image() (line 134 of modules/contrib/media_contextual_crop/media_contextual_crop.module).

    Full stack trace of the warning:

    media_contextual_crop_preprocess_responsive_image(Array, 'responsive_image', Array)
    call_user_func_array('media_contextual_crop_preprocess_responsive_image', Array) (Line: 285)
    Drupal\Core\Theme\ThemeManager->render('responsive_image', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 50)
    __TwigTemplate_47a341848160189fbb6f607d6291742d->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('core/themes/stable9/templates/field/responsive-image-formatter.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('responsive_image_formatter', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 174)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->macro_render_item(Array, Array, 1) (Line: 1226)
    twig_call_macro(Object, 'macro_render_item', Array, 80, Array, Object) (Line: 92)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('themes/contrib/bulma/templates/field/field.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array) (Line: 449)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 48)
    __TwigTemplate_8496e98d7d525cdc12108954e67330e7->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('core/themes/stable9/templates/content/media.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('media', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 174)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->macro_render_item(Array, Array, 1) (Line: 1226)
    twig_call_macro(Object, 'macro_render_item', Array, 80, Array, Object) (Line: 92)
    __TwigTemplate_eb6d2d2a2d7fd6807b01e1645b9b71fe->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('themes/contrib/bulma/templates/field/field.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array) (Line: 449)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 56)
    __TwigTemplate_7910549fe739a1a59cef75d2554898f9->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array, Array) (Line: 68)
    __TwigTemplate_de4070671666045e3ad965541aac976d->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('themes/contrib/octavia/src/templates/ds/ds-3col-stacked.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('ds_3col_stacked', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array) (Line: 474)
    Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 39)
    __TwigTemplate_e1d55ad726a4050ffe258b4ecce97cab->doDisplay(Array, Array) (Line: 394)
    Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
    Twig\Template->display(Array) (Line: 379)
    Twig\Template->render(Array, Array) (Line: 40)
    Twig\TemplateWrapper->render(Array) (Line: 53)
    twig_render_template('modules/contrib/ds/templates/ds-entity-view.html.twig', Array) (Line: 372)
    Drupal\Core\Theme\ThemeManager->render('ds_entity_view', Array) (Line: 436)
    Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
    Drupal\Core\Render\Renderer->render(Array, ) (Line: 238)
    Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 583)
    Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 231)
    Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 128)
    Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
    Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
    call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
    Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 187)
    Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
    Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
    Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
    Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
    Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
    Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
    Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
    Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 51)
    Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
    Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
    
  • 🇫🇷France DrDam

    Stack traces are from twig, so it doesn't be usefull ...

    I push new commit in 1.2.x-dev, with "better understanding" of responsive images...

    can you test ?

  • 🇫🇷France DrDam

    Edit : I edit title to point to the right bug

    • 492e6366 committed on 1.2.x
      Issue #3383635: phpcs & dsm
      
  • Status changed to Fixed over 1 year ago
  • 🇺🇸United States mlncn Minneapolis, MN, USA

    That works!!

  • Status changed to Fixed over 1 year ago
  • 🇫🇷France DrDam

    released in 1.2.1

Production build 0.71.5 2024