0

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}

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.