Images in Wygwam with the CE Image Bulk Tag NOT Responsive

Question

I have tried to use CE Images Bulk Tag with Wygwam per Ryan Masuga instructions ( http://bit.ly/1NEzxUF ). It works for resizing the images, putting in floats and padding around the image when needed. One problem when I pull the browser to the next viewport the image does not resize, its not responsive. I am using bootstrap, so I have added the class .img-responsive. I also added the class #news img {max-width: 100%; height: auto; display:block;}, thinking that might help. Still no image responsive behavior.

example: http://osd.seeingishosting.com/news/news-view/testing-images

<div class="col-md-8" id="news">

{exp:channel:entries channel="News"}
     <h2>{title}</h2>

    {exp:ce_img:bulk width="700" crop="no" allow_scale_larger="no" quality="80" 
    output='<img src="{made}" alt="{attr:alt}" class="img-responsive osd-border" style="max-width:{width}px;{attr:style}" />'}

    {main_body_copy}

    {/exp:ce_img:bulk}

{/exp:channel:entries}

Answer 1

there are two problems at least with your code.

First, it appears that the 'class' statement is not being added to the image in the article - here is what is currently produced in the article:

<img src="/images/made/images/uploads/IMG_7381-test_700_1050_80.JPG" alt="" class="" style="max-width:700px;">

The alt and class tags are not being populated.

The second is that even if you add the img-responsive tag back in a browser inspector the use of max-width:700px;seems to be fixing the width at 700px - so simply remove this and let bootstrap's default 100% width do its stuff. With these changes this image definition seems to scale OK with changing viewport sizes...

<img src="/images/made/images/uploads/IMG_7381-test_700_1050_80.JPG" alt="" class="img-responsive odd-border">

I think you got a bit confused by the 'bulk' tag syntax. You don't need to recreate the tag - it simply 'edits' whatever img tag you have in your {main_body_copy}. So to add the two additional fields you want passed through to the final image, you should put them within an 'attributes' tag - something like:

{exp:ce_img:bulk width="700" crop="no" allow_scale_larger="no" quality="80" attributes="alt='{attire:alt}' class='img-responsive osd-border' style='{attire:style}'"}

Hope this helps.