Problem/Motivation

The media is only resized by the base css in origins. Many times the media is much too big for the screens being viewed on. The home page stream can have many images per post and all of them bigger than they need to be for handheld devices. On the full node view, the image is original size and horribly unoptimized.

Proposed resolution

Use the Picture module to load appropriate sized images for the screen size. The field entity and field instances would then need to be adjusted to have properly sized images with the ability to see larger versions if wanted.

Remaining tasks

  • Apply the appropriate field entity displays to the individual content types.
  • Style the elements to look more consistent.

User interface changes

API changes

CommentFileSizeAuthor
#4 issue-2172677-4-responsive-media.patch38.34 KBDevin Carlson
#3 issue-2172677-3-responsive-media.patch26.67 KBDevin Carlson
#1 issue-2172677-responsive-media.patch28.55 KBZarabadoo
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Zarabadoo’s picture

Zarabadoo CreditAttribution: Zarabadoo commented
Issue summary: View changes
FileSize
issue-2172677-responsive-media.patch28.55 KB

Upload the first patch to add a feature that stores image styles and breakpoint mappings for the picture module.

Zarabadoo’s picture

Zarabadoo CreditAttribution: Zarabadoo commented
Title: Make the media attached to posts reposnzive » Make the media attached to posts responsive

Fix the title spelling.

Devin Carlson’s picture

Devin Carlson CreditAttribution: Devin Carlson commented
Status: Active » Needs review
FileSize
issue-2172677-3-responsive-media.patch26.67 KB

An updated version of #1 which moves some code around in order to make dependencies more explicit, standardizes some weights and removes the oembed file displays in favour of in-progress picture module integration with oembed formatters.

Otherwise tested #1 and didn't run into any issues.

Devin Carlson’s picture

Devin Carlson CreditAttribution: Devin Carlson commented
FileSize
issue-2172677-4-responsive-media.patch38.34 KB

An updated version of #3 which fixes a number of issues:

  • Unfortunately, the breakpoint exports in both #1 and #3 were created using Breakpoint 7.x-1.1 which has inconsistent features output, which caused a variety of issues. The export functionality was fixed with #1827756: Fix export functionality which has not yet made it into a stable release. The attached patch contains a complete overhaul of the breakpoint export using the fixed export functionality.
  • Files displayed when viewing a full node now render using the default view mode while viewing files directly render using the full view mode. All breakpoints and image styles have been renamed accordingly.
  • File display configuration is automatically duplicated for the full view mode and the picture file formatter configuration is overridden appropriately.
  • Fixed file display formatters sometimes showing as overridden.
  • Added a number of patches to the Picture module in order to fix various issues.
Devin Carlson’s picture

Devin Carlson CreditAttribution: Devin Carlson commented
Status: Needs review » Fixed

Tested #4 with a fresh Commons install and verified that the attached media is responsive and that images display using appropriate image styles depending on the viewport.

Committed #4 to Commons 7.x-3.x.
http://drupalcode.org/project/commons.git/commit/075e4c7

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.