I am using Adaptive theme. I have set up and mapped 5 responsive styles on path admin/config/media/resp_img/groups/my_theme

responsive image mapping

My View displays Field: Image. The field format is set to jcarousel-smartport (I am not using jcarousel library at this point and the image style name is just because I plan to use it, so it's just a name).

So I would expect that when viewing on a desktop, the images should be as defined for jcarousel-desktop image style (100x100 in this case). But they are displayed as defined for jcarousel-smartport (50x50). And so on, for all screen sizes they don't change the display at all.

I don't see any javascript errors when viewing the View. The image html looks like this (even when viewed on a desktop):

<img typeof="foaf:Image" class="image-style-jcarousel-smartport" src="http://example.com/sites/example.com/files/styles/jcarousel_smartport/public/images/54134899_n.jpg" width="50" height="50" alt="">

Why is it not working?

CommentFileSizeAuthor
#1 Selection_022.png44.94 KBjelle_s
#1 Selection_023.png33.42 KBjelle_s
resp.png7.36 KBraincloud

Comments

jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented
StatusFileSize
new Selection_023.png33.42 KB
new Selection_022.png44.94 KB

In 2.x, when editing the field in your view there should be an image style called resp_img__my_theme (if your group is called my_theme as you stated above). If you choose that image style your images should be responsive.

This is my view:
Selection_022.png

And the image field settings (I'm using responsive_bartik and my group is called bartik):
Selection_023.png

The output of the image field should look something like this:

<picture class="resp-img-picture" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si.">
<!-- <source media="(min-width: 0px)"  class="resp-img-picture resp-img-picture-Mobile" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_mobile_1x/public/field/image/imagefield_Xj3wp0.jpg" width="50" height="46" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si."  /> -->
<source media="(min-width: 0px)" class="resp-img-picture resp-img-picture-Mobile" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_mobile_1x/public/field/image/imagefield_Xj3wp0.jpg" width="50" height="46" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si.">
<!-- <source media="(min-width: 560px)"  class="resp-img-picture resp-img-picture-Narrow" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_narrow_1x/public/field/image/imagefield_Xj3wp0.jpg" width="100" height="92" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si."  /> -->
<source media="(min-width: 560px)" class="resp-img-picture resp-img-picture-Narrow" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_narrow_1x/public/field/image/imagefield_Xj3wp0.jpg" width="100" height="92" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si.">
<!-- <source media="(min-width: 851px)"  class="resp-img-picture resp-img-picture-Wide" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_wide_1x/public/field/image/imagefield_Xj3wp0.jpg" width="200" height="185" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si."  /> -->
<source media="(min-width: 851px)" class="resp-img-picture resp-img-picture-Wide" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_wide_1x/public/field/image/imagefield_Xj3wp0.jpg" width="200" height="185" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si.">
<!-- <source media="only screen and (min-width: 3456px)"  class="resp-img-picture resp-img-picture-Tv" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_tv_1x/public/field/image/imagefield_Xj3wp0.jpg" width="400" height="369" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si."  /> -->
<source media="only screen and (min-width: 3456px)" class="resp-img-picture resp-img-picture-Tv" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_tv_1x/public/field/image/imagefield_Xj3wp0.jpg" width="400" height="369" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si.">
<noscript>&lt;img  class="resp-img-picture resp-img-picture-Mobile" typeof="foaf:Image" src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_mobile_1x/public/field/image/imagefield_Xj3wp0.jpg" width="50" height="46" alt="Blandit conventio laoreet lobortis usitas ymo zelus." title="Esse interdico nutus si." /&gt;</noscript>
<img alt="Blandit conventio laoreet lobortis usitas ymo zelus." src="http://respimg2.dev/sites/default/files/styles/bartik_custom_user_wide_1x/public/field/image/imagefield_Xj3wp0.jpg" width="200" height="185" title="Esse interdico nutus si." class="resp-img-picture resp-img-picture-Wide"></picture>
jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented
Status: Active » Fixed

Feel free to reopen if this doesn't work

Status: Fixed » Closed (fixed)

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