1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Adsense - Different size in "Above Content" on forum_index

Discussion in 'Styling and Customization Questions' started by DaveL, Jan 6, 2015.

  1. DaveL

    DaveL Well-Known Member

    Just working my way through @Brogan great adsense for responsive design tutorial.

    One problem I do have is that when im in landscape mode on my tablet viewing a thread or something similar, the 728x90 banner looks fine. The only issue is in the forum list where the 728x90 dosent work properly because of the sidebar.

    Forum Index
    Screenshot_2015-01-06-13-04-19.png

    Looks fine elsewhere
    Screenshot_2015-01-06-13-04-36.png

    The only way of partially solving this is if I up the minimum to 1000

    Which makes it look fine on the forum index, but the downside being is that only 468x60 banners are shown elsewhere and they look too small.

    Anyone else had this issue, if so, how did you overcome it?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You need to use <xen:if is="{$sidebar}"> in your ad template code, serving different (sized) ads for pages with and without a sidebar.
     
  3. DaveL

    DaveL Well-Known Member

    Thanks Brogan.

    Sorry to be a pain, but where would I insert that in this code?
    Code:
    <xen:if is="!{xen:helper ismemberof, $visitor, 7,4,6}">
    <div style="text-align: center; padding: 4px 0 2px 0; border: 1px solid @primaryLighterStill">
    
    
    <xen:if is="!{xen:helper ismemberof, $visitor, 7,4,6}">
    <div style="text-align: center; padding: 4px 0 2px 0; border: 1px solid @primaryLighterStill">
    
    
    <center><script type="text/javascript">
        google_ad_client = "ca-pub-xxxxxxxxxxx";
        width = document.documentElement.clientWidth;
        google_ad_slot = "123456789";
        google_ad_width = 320;
        google_ad_height = 100;
      
        if (width > 483) {
        google_ad_slot = "123456789";
        google_ad_width = 468;
        google_ad_height = 60;
        }
      
        if (width > 1000) {
         google_ad_slot = "123456789";
         google_ad_width = 728;
         google_ad_height = 90;
        }
      
    </script>
    <!-- AC2015 - Above Content - 320x100 -->
    <script type="text/javascript"
    src="//pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></center>
    
    
    </div>
    </xen:if>
    Also, by making the ad smaller if a sidebar is detected, would that have implications for people using desktops? 728x90 obviously works fine on a desktop with a sidebar - wouldnt want it making the ad smaller in that situation because it has detected the sidebar.
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    If you use that conditional statement and there is a sidebar on the page, it will process the code inside the statement, regardless of whether it is a desktop or mobile.

    XenForo does not detect devices, it uses browser width to determine how content is laid out.
    That applies equally to all devices.

    In its simplest form:
    Code:
    <xen:if is="{$sidebar}">
        Ad 1
    </xen else />
        Ad 2
    </xen:if>
    
    You will need to build that in to your existing template code.
     
  5. DaveL

    DaveL Well-Known Member

    Sorry Brogan, I can see the logic in your conditional, but its totally thrown me. How would I combine that with your responsive adsense code so it defines the widths?
     
  6. DaveL

    DaveL Well-Known Member

    @Brogan Is there any chance you could give a very brief example of how you would use the conditional along with your responsive code please.
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    This is my ad_below_top_breadcrumb template.

    Code:
    <xen:hook name="ad_below_top_breadcrumb" />
    
    <style type="text/css">
    .below-top-breadcrumb-with-sidebar-dynamic {
    width: 234px;
    height: 60px;
    }
    
    @media(min-width: 346px) {
        .below-top-breadcrumb-with-sidebar-dynamic {
        width: 320px;
        height: 50px;
        }
    }
    
    @media(min-width: 494px) {
        .below-top-breadcrumb-with-sidebar-dynamic {
        width: 468px;
        height: 60px;
        }
    }
    
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 234px;
    height: 60px;
    }
    
    @media(min-width: 346px) {
        .below-top-breadcrumb-no-sidebar-dynamic {
        width: 320px;
        height: 50px;
        }
    }
    
    @media(min-width: 494px) {
        .below-top-breadcrumb-no-sidebar-dynamic {
        width: 468px;
        height: 60px;
        }
    }
    
    @media(min-width: 754px) {
        .below-top-breadcrumb-no-sidebar-dynamic {
        width: 728px;
        height: 90px;
        }
    }
    </style>
    
    <xen:if is="!{$visitor.user_id}">
        <xen:if is="!in_array({$contentTemplate}, array('', 'cta_featuredthreads_featured', 'message_page', 'error', 'search_form', 'search_form_post', 'search_form_profile_post', 'search_results', 'register_form', 'register_facebook', 'register_twitter', 'register_google', 'login', 'error_with_login', 'contact', 'thread_view', 'cta_overtaking_index'))">
            <xen:if is="@enableResponsive">
                <xen:if is="{$sidebar}">
                    <div style="text-align: center; padding: 8px 0">
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <!-- Below Top Breadcrumb (With Sidebar) - Dynamic -->
                        <ins class="adsbygoogle below-top-breadcrumb-with-sidebar-dynamic"
                             style="display:inline-block"
                             data-ad-client="ca-pub-***"
                             data-ad-slot="***"></ins>
                        <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                <xen:else />
                    <div style="text-align: center; padding: 8px 0">
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <!-- Below Top Breadcrumb (No Sidebar) - Dynamic -->
                        <ins class="adsbygoogle below-top-breadcrumb-no-sidebar-dynamic"
                             style="display:inline-block"
                             data-ad-client="ca-pub-***"
                             data-ad-slot="***"></ins>
                        <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </xen:if>
            <xen:else />
                <xen:if is="{$sidebar}">
                    <div style="text-align: center; padding: 8px 0">
                        <script type="text/javascript">
                        google_ad_client = "ca-pub-***";
                            /* Below Top Breadcrumb Narrow */
                            google_ad_slot = "***";
                            google_ad_width = 468;
                            google_ad_height = 60;
                        </script>
                        <script type="text/javascript"
                        src="//pagead2.googlesyndication.com/pagead/show_ads.js">
                        </script>
                    </div>
                <xen:else />
                    <div style="text-align: center; padding: 8px 0">
                        <script type="text/javascript">
                        google_ad_client = "ca-pub-***";           
                                /* Below Top Breadcrumb Wide */
                                google_ad_slot = "***";
                                google_ad_width = 728;
                                google_ad_height = 90;
                        </script>
                        <script type="text/javascript"
                        src="//pagead2.googlesyndication.com/pagead/show_ads.js">
                        </script>
                    </div>
                </xen:if>           
            </xen:if>
        </xen:if>
    </xen:if>
    You can use that as a guide and adapt it to suit your site/needs.
     
  8. DaveL

    DaveL Well-Known Member

    Thanks. I had already seen that when I was searching, but that's for dynamic adsense.

    @Brogan Will I need to alter all my current code, or just the code which relates to the 728x90 banner? As that's the only part causing the issue. Would I put the conditional statement within the current code or have to have it separate?
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    It's for both.

    There is a section for responsive and one for non responsive.
     
  10. DaveL

    DaveL Well-Known Member

    Ah brilliant, just saw that at the bottom of the code. Will have a play when I get in from work.

     

Share This Page