Responsive Image banner

[ericleonardo]

Hi! I see that by simply adding "img-responsive" class to image tag (img) on my banner makes the image responsive.

This is because I use bootstrap and "img-responsive" is a bootstrap class which makes images responsive.

Please, what Revive file should I edit to output images with "img-responsive" class by default?

Best regards,

Eric

[ericleonardo]

This is how I'm calling my ads and trying to add "img-responsive" class to the IMG tag, but it is not working.

This works for any other DIV in my page, except for that containing the banner image (div someclass).

 

<div class="someclass">

<ins data-revive-zoneid="1" data-revive-target="_blank" data-revive-id="e5fe80ecb449da9c1d387597aabef1d3"></ins>
<script src="//example.com/adserver/www/delivery/asyncjs.php"></script>

</div>

<script>
$(document).ready(function () {
         var img = $('.someclass').find('img');     //if I change '.someclass' to '.container', every image in my page accept the new class, except the banner image
         $(img).addClass('img-responsive');     // eg: twitter bootstrap
      });
</script>

Why I can't add new class JUST for the banner img with this code?

[ericleonardo]

SOLVED! Now I'm using the "Javascript Tag" Invocation Code (instead of Asynchronous Javascript Tag) serving Responsive and Centered image.

Just put the invocation code inside a DIV and added a piece of code in the end only for the addClass purpose, THIS WAY:

<div class="mydiv">

//INVOCATION CODE (I added "async" inside script tag hoping it to work asyncly, despit not being the Async invocation code)

<!-- Revive Adserver Javascript Tag - Generated with Revive Adserver v4.1.0-rc1 -->
<script async type='text/javascript'><!--//<![CDATA[
   var m3_u = (location.protocol=='https:'?'https://example.com.br/adserver/www/delivery/ajs.php':'http://example.com.br/adserver/www/delivery/ajs.php');
   var m3_r = Math.floor(Math.random()*99999999999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
   document.write ("?zoneid=1");
   document.write ('&amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
   document.write ("&amp;loc=" + escape(window.location));
   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
   document.write ("'><\/scr"+"ipt>");
   

//HERE IS THE SIMPLE CODE to add two Bootstrap classes on the image: make image Responsive and horizontally Centered.

   $(document).ready(function () {
        var img = $('.mydiv').contents().find('img').addClass('img-responsive center-block');
            });    //END

//]]>--></script><noscript><a href='http://example.com.br/adserver/www/delivery/ck.php?n=a1389b42&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://example.com.br/adserver/www/delivery/avw.php?zoneid=1&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=a1389b42' border='0' alt='' /></a></noscript>
    
    
</div>    

[Jorgesc]

On 02-10-2017 at 5:32 PM, ericleonardo said:

SOLVED! Now I'm using the "Javascript Tag" Invocation Code (instead of Asynchronous Javascript Tag) serving Responsive and Centered image.

Just put the invocation code inside a DIV and added a piece of code in the end only for the addClass purpose, THIS WAY:

<div class="mydiv">

//INVOCATION CODE (I added "async" inside script tag hoping it to work asyncly, despit not being the Async invocation code)

<!-- Revive Adserver Javascript Tag - Generated with Revive Adserver v4.1.0-rc1 -->
<script async type='text/javascript'><!--//<![CDATA[
   var m3_u = (location.protocol=='https:'?'https://example.com.br/adserver/www/delivery/ajs.php':'http://example.com.br/adserver/www/delivery/ajs.php');
   var m3_r = Math.floor(Math.random()*99999999999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
   document.write ("?zoneid=1");
   document.write ('&amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
   document.write ("&amp;loc=" + escape(window.location));
   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
   document.write ("'><\/scr"+"ipt>");
   

//HERE IS THE SIMPLE CODE to add two Bootstrap classes on the image: make image Responsive and horizontally Centered.

   $(document).ready(function () {
        var img = $('.mydiv').contents().find('img').addClass('img-responsive center-block');
            });    //END

//]]>--></script><noscript><a href='http://example.com.br/adserver/www/delivery/ck.php?n=a1389b42&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://example.com.br/adserver/www/delivery/avw.php?zoneid=1&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=a1389b42' border='0' alt='' /></a></noscript>
    
    
</div>    

Hola, esta alternativa te hace responsive el banner aun que sea de una medida superior o se deben subir dos imagenes. 1 con la medida escritorio (970x90 o 728x90) y otra para mobile (320x50 o 300x50) ???

 

Gracias