Is this compatible with picturefill

[AndyOGo]

I wonder if this is compatible with picturefill?

[hendrikeng]

@AndyOGo we are using https://github.com/aFarkas/respimage to achieve art direction ( different images for different viewports ) the problem is, depending on the case, two different object-fit values might be needed. i forked the repo and simply disabled the polyfill for a specific viewport. a work around would be to add an option like 'artdirecion' that would provide another data-object-fit and data-object-position for that specific case. i might work on it and provide a link to the fork here.

[AndyOGo]

@hendrikeng Thanks for your answer. Indeed art direction is my next problem. Though this is exactly where the standard leaks... Suppose I would use the <picture> element, I would expect that every active source being able to specify not only src attribute but also any attribute like class, object-fit, object-position.

Like so:

<picture>
  <source
    srcset="foo-sm.jpg, foo-sm@2.jpg x2"
    media="(min-width: 200px)"
    object-position="top center"
  />
  <source
    srcset="foo-md.jpg, foo-md@2.jpg x2"
    media="(min-width: 600px)"
    class="medium-addition-for-a-class"
  />
  <source
    srcset="foo-lg.jpg, foo-lg@2.jpg x2"
    media="(min-width: 900px)"
  />
  <img
    src="foo.jpg"
    srcset="foo@2.jpg x2"
    class="picture__img"
    alt="Foo image"
    object-fit="cover"
    object-position="center"
  />
</picture>

[hendrikeng]

@AndyOGo as far as i know you can't apply those specific changes directly to the source elements, to do something like that the polyfill has to be extended to something like this:

<picture>
  <source
    srcset="foo-sm.jpg, foo-sm@2.jpg x2"
    media="(min-width: 200px)"
  />
  <source
    srcset="foo-md.jpg, foo-md@2.jpg x2"
    media="(min-width: 600px)"
  />
  <source
    srcset="foo-lg.jpg, foo-lg@2.jpg x2"
    media="(min-width: 900px)"
  />
  <img
    src="foo.jpg"
    srcset="foo@2.jpg x2"
    class="picture__img"
    alt="Foo image"
    object-fit-source[0]="cover"
    object-fit-source[1]="contain"
    object-fit-source[2]="cover"
    object-position-source[0]="center"
    object-position-source[1]="top center"
    object-position-source[2]="bottom center"
  />
</picture>

that would mean to add an extra art-direction function like objectFitPolyfillArtDirection('picture__img') , check how many <source> child nodes are in the parent element and add object-xxx-[x] data-set support to the <img> element ....i am not sure if that's the right way or probably too much of an overkill.

@constancecchen does it make sense at all?

with a polyfill like object-fit-images you could work with inline stlyes and mediaqueries to solve the problem easily ...unfortunately polyfills like object-fit-images work with bg-images and don't support art-direction or picture elements (as far as i know).

[AndyOGo]

@hendrikeng Thanks for you feedback. Yeah, though i would rather place them in the respective <source> and the matching <source> just overrides the "default" <img> attributes.

Btw.: I have also raised a discussion here: https://github.com/ResponsiveImagesCG/ri-usecases/issues/62#issuecomment-321685964 If you like the idea please upvote. IMHO it's really missing focal positioning per art direction.

[cee-chen]

Hey all, sorry for the delay, been super busy lately. I'd consider this to be out of scope for the base polyfill, although definitely feel free to fork or write your own code that bridges the two plugins.