0

I'm currently attempting to incorporate Interchange by Foundation Zurb with Sonata Media bundle.

The interchange documentation states you should do the following:

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">

So in my project I have tried the following:

<img data-interchange="[{% media post.image, 'small' %}, (default)], [{% media post.image, 'big' %}, (large)]">

However this results in the following:

image

So instead of respecting the interchange rules it ignores them and puts the image on twice. Has anyone got this working correctly, or have any suggestions as to how I would go about fixing it?

On a side note, I realize the image is crap quality I'm just using it as a test graphic.

Doug
  • 1,850
  • 23
  • 50

1 Answers1

1

OK have figured it out with the help of Rande from the Sonata Project. Rendering an image using the 'Media' tag add's a load of other html to the image which would usually be useful but in this context breaks it instead. So rather than using 'Media' you should use 'Path' which renders just the image path which is more suited to how Zurb Interchange expects it's images. So the final code looks like this:

<img data-interchange="[{% path post.image, 'small' %}, (small)], [{% path post.image, 'big' %}, (large)]">

Source: https://github.com/sonata-project/SonataMediaBundle/issues/577

Doug
  • 1,850
  • 23
  • 50