Making AdRotate WordPress Plugin mobile responsive

To make the adrotate ad blocks mobile responsive.

Edit the adrotate/adrotate-output.php file to add some class and id  selectors to the <div> that the plugin creates when it makes the blocks. Then we can style each <div> to make them responsive.


$output .='<div id="adrote_advblock'.$block_id.'" class="adrote_advblock" style="'.$gridfloat.'margin:0;padding:'.$block->gridpadding.'px;clear:none;width:'.$gridwidth.';height:'.$gridheight.';border:'.$block->gridborder.';">';
					for($i=0;$i<$block_count;$i++) {
						$banner_id = adrotate_pick_weight($selected);

						$output .='<div class="adrote_advadvert" style="margin:'.$block->admargin.'px;padding:'.$block->adpadding.'px;clear:none;float:left;width:'.$adwidth.';height:'.$adheight.';border:'.$block->adborder.';">';
						if($block->wrapper_before != '') { $output .= stripslashes(html_entity_decode($block->wrapper_before, ENT_QUOTES)); }
						$output .= adrotate_ad($banner_id, false, 0, $block_id);
						if($block->wrapper_after != '') { $output .= stripslashes(html_entity_decode($block->wrapper_after, ENT_QUOTES)); }
						$output .= '</div>';

This create a class called  adrote_advblock

and so then you style all the blocks of adverts  to float in the middle. This you add to your theme’s stylesheet


/* Ad rotate Styling
------------------------------------------------------------ */
.adrote_advblock {

margin-left:auto !important;
margin-right:auto !important;}

If your adverts are more than 240 wide which would be the case if you are using 125px blocks, then the block is too wide for the smallest mobile responsive themes. Or if you sidebar is wider than 320px, the width of the iphone you will need to add some more styling to reduce these images so they look great icon smile Making AdRotate Wordpress Plugin mobile responsive
That is were the id come in, the plugin above a div with a unique idea for each block was created because how you make a 125px by 125 px block is going to be different to a full width image
So in the below the block ID1 is full width images and the block ID 2 is 125px by 125px. I have chosen to resize them the images so I still get a grid. I remove the border and then add it again around each image in the block :


@media only screen and (max-width: 260px){
/* 125px block Ad rotate Styling for the smallest screens
------------------------------------------------------------ */
#adrote_advblock2 img {
width:80%;
margin-left:10%;
margin-right:10%;
border: 2px dashed #e3e7d0;
}
#adrote_advblock2 .adrote_advadvert {border:none !important;}

/* 256px full width of sidebar Ad rotate Styling for the smallest screens
------------------------------------------------------------ */
#adrote_advblock1 img {
width:80%;
margin-left:5%;
margin-right:5%;
border: 2px dashed #e3e7d0;
}

#adrote_advblock3 .adrote_advadvert {border:none !important;}

responsive design for adrotate wordpress plugin Making AdRotate Wordpress Plugin mobile responsive
You can see it on my clients website ( still a work in progress) Everywhere You Go

Comments

  1. Excellent … I was looking for a way of ficing the responsiveness of the adrotate widgets. I will try this later todasy or tomorrow to see if it also works with me. I suppose all the code needed is mentioned above, not ?? Thanks for the explanation !!

  2. A nice quick fix. This should seriously be considered in their next verison.

    Just to clarify, only lines 1 and 5 of the PHP above, in adrotate_block function, are what is replaced.

    if you have a scenario with the sidebar wrapping below the content, adding the following will allow block to extend and wrap

    @media only screen and (max-width: 768px) {
    .adrote_advblock {
    width:100% !important;
    }
    }

  3. I can’t figure out how to get the php file pasted exactly right. Lines 1 and 5? Could anyone paste the complete file? Needing this to work on an existing responsive site.

  4. Thanks, but I get the following error:

    “Fatal error: Call to undefined function adrotate_pick_weight() in /nfs/c02/h06/mnt/30748/domains/mydomain.com/html/wp-content/plugins/adrotate/adrotate-output.php on line 296″

    Also, it seems there is a closing bracket “}” missing somewhere your code your code.

  5. i have an internal server erro when i replace this code with the new one :
    $output .= ‘id.’” class=”block_outer b-’.$block->id.’”>’;
    $j = 1;
    for($i=0;$i<$block_count;$i++) {
    $banner_id = array_rand($selected);

    $output .= 'id;
    if($block->columns == 1) {
    $output .= ‘ block_both ‘;
    } else if($j == $block->columns) {
    $output .= ‘ block_right ‘;
    $j = 1;
    } else if($j == 1) {
    $output .= ‘ block_left ‘;
    $j++;
    } else {
    $j++;
    }
    $output .= ‘”>’;

    if($block->wrapper_before != ”) {$output .= stripslashes(html_entity_decode($block->wrapper_before, ENT_QUOTES)); }
    $output .= adrotate_ad($banner_id, false, 0, $block_id);
    if($block->wrapper_after != ”) { $output .= stripslashes(html_entity_decode($block->wrapper_after, ENT_QUOTES)); }
    $output .= ”;

  6. Would this still work on the current AdRotate version? I may need some help sorting this one out lol.

Speak Your Mind

*