Problem/Motivation

Previously, using the core rendering of #attached properties, you had the option of defining attributes on the element, which would be added to the tag. The "media" key for css elements is one such example. This would end up being rendered as a

element with media= attribute which could be used to define media queries in CSS. The bg_image_formatter module uses this method to provide responsive background images. I am trying to adapt that module to use the Attach Inline framework for rendering its inline css. However, these are dropped. How did core do this?

Steps to reproduce

I am using an experimental branch of bg_image_formatter, I can push that in a bit.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#3 attachinline-render_media_query-3167803-3.patch1.5 KBbburg

Comments

bburg created an issue. See original summary.

bburg’s picture

bburg
he/him
Location Washington, DC
commented

So this seems to only need two tweaks,

1, Actually set the media element in CssCollectionRendererDecorator

2, Hash the entire $options array in AssetResolverDecorator, because it seemed to be overwriting styles that were duplicative, though legitimate breakpoints. For example, if one were being lazy and using the same image style for mobile and tablet:

<style media="">.hero__image {background-color: #FFFFFF ;background-image:  url('/sites/default/files/styles/background_mobile/public/2020-02/homepage.jpg') ;background-repeat: no-repeat ;background-attachment: scroll ;background-position: left top ;z-index: auto;}</style>

<style media="(min-width: 700px)">.hero__image {background-color: #FFFFFF ;background-image:  url('/sites/default/files/styles/background_mobile/public/2020-02/homepage.jpg') ;background-repeat: no-repeat ;background-attachment: scroll ;background-position: left top ;z-index: auto;}</style>

The second would overwrite the first, and then the mobile layout wouldn't get a style.

Patch coming.

bburg’s picture

bburg
he/him
Location Washington, DC
commented
Status: Active » Needs review
StatusFileSize
new attachinline-render_media_query-3167803-3.patch1.5 KB
gapple’s picture

gapple
he/they
Primary language English
commented
Related issues: +#3095522: Duplicate snippets aren't supported

I think it would be better to allow a whole attributes array, and not just media.

As far as I can tell, the array key isn't meaningful, so 'attachinline-' . count($css) would work fine, instead of serialize + hash.

bburg’s picture

bburg
he/him
Location Washington, DC
commented

I was following the example of CssCollectionRenderer which seems to hard code references to those attributes. Without digging into the DTD, I'm not sure what else a style tag would need besides perhaps the global attributes.

Whichever works for the hash, I I liked it as it seems to avoid any potential clashes pretty well. But I can see a lot of those being a performance hit.

  • gapple committed 36f1473 on 8.x-1.x 
    Issue #3167803 by bburg, gapple: Allow attributes on elements
gapple’s picture

gapple
he/they
Primary language English
commented
Status: Needs review » Fixed

This now works in 8.x-1.2

$attachments['#attached']['css'][] = [
    'data' => '.site-logo { border: 2px solid #F00; }',
    'attributes' => [
      'media' => 'all',
    ],
  ];
gapple’s picture

gapple
he/they
Primary language English
commented

(Also note that if you're testing nonces, the config option was renamed)

 $config['attachinline.settings']['csp-allow-method'] = 'nonce';

Status: Fixed » Closed (fixed)

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