I'm having issues on our Drupal 7 site. We have created a new content type that includes a hero image. The problem is that full sized images that we upload aren't displayed on the page (despite calling for "Original image" in the manage display settings.

enter image description here

Instead, the page is displaying the image in Drupal's "large" image style, then scaling up on the page and creating a blurry image.

Here's a test page: https://claremontmckdev.prod.acquia-sites.com/content/history-0

  • There must be something overriding the field settings, very difficult to say what that is without seeing the code. Check your theme/templates and custom modules first, also make sure the page isn’t built with panels or something. Those are the sort of things to check – Clive Feb 22 '18 at 18:00
  • Do you have some code that is dealing that handles displaying either a video or an image on the page? Maybe in the theme or template file? – CG Monroe Feb 22 '18 at 18:01
  • Thanks. I think you are both on the right track. There is code that displays either a video or image on the page. I have checked the template code but couldn't find the issue (then thought it might be a simple setting within the D7 dashboard). I'll look at the code again. – Martin Beck Feb 22 '18 at 18:12
  • Here's a code snippet from a default.inc custom module file. I can't see anything amiss here though.... $pane->configuration = array( 'label' => 'title', 'formatter' => 'picture_sizes_formatter', 'delta_limit' => '0', 'delta_offset' => '0', 'delta_reversed' => 0, 'formatter_settings' => array( 'image_link' => '', 'fallback_image_style' => 'original image', 'sizes' => '400', 'image_styles' => array( 'large' => 'large', ...... ), ), – Martin Beck Feb 22 '18 at 18:31

Based on the markup on your test page reflecting an html5 element and the code snippet calling for a "picture_sizes_formatter", I suspect your site has the Picture and Breakpoints module) installed which automatically serve images based on predefined/configured breakpoints.

Go to the Picture Mappings configuration page Config > Media > Picture Mappings (/admin/config/media/picture) to examine existing mappings and add new ones. picture mapping config link from configuration page

You should be able to add a new picture mapping for a wider breakpoint to serve the original image, thus limiting serving the large image to a narrower desktop viewport.

Once you've added an additional mapping (and possibly a wide breakpoint), don't forget to clear the caches before reloading your test page.

| improve this answer | |
  • Thanks for the suggestion @anson-w-han. We do have the Picture and Breakpoint modules but I don't think that's the issue. Checked the mappings and we only have the three defaults for Event image, Footer block and Media block there. Also photos uploaded in other content types don't have the issue (for instance claremontmckdev.prod.acquia-sites.com/news/…). Tested by creating a new mapping with settings to hopefully override the issue but it had no effect. – Martin Beck Feb 26 '18 at 19:01
  • The image in your production site news story example doesn't look to be rendered with the same markup (<picture> tag). It may be worth checking the content type template or even a pane template to see if they are specifically calling for a particular picture size format rule (which would explain why it disregards your new mapping setting). – Anson W Han Feb 26 '18 at 22:30
  • That was my instinct too -- settings in the content type ask for display of the original image -- but I think the override it's buried deep in the code. The developer used the Features module to create and display this content item. I'm going to pursue that theory and will report back if I solve it. Thanks for your time. – Martin Beck Feb 27 '18 at 0:47

In the off chance that anyone else is struggling with this issue, we were able to solve the conundrum. The pages were created via panels and the formatter settings for the image within the panel settings were set to "picture." Changed that to "Image" and all was copacetic.

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.