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

Why is there no 'responsive' variable/switch in XF 1.2?

Discussion in 'General XenForo Discussion and Feedback' started by CyclingTribe, Jun 25, 2013.

  1. CyclingTribe

    CyclingTribe Well-Known Member

    @Mike and @Kier I like the new responsive layout for 1.2 - it's very much at the forefront of forum design, but the lack of server-side control is bugging me. It's like we have no control over it - period.

    I appreciate that the viewport size is definied on the client side, but is there no way to get that information back into XF and set a $responsive_mode = 1 switch?

    It would make a great deal of difference in our ability to control the layout elements, such as logos and ads - show the normal logo when not in responsive mode, the smaller one when you are; same with the ads.

    Is it possible? Is it impractical (too much code refactoring)?

    It would be great if us site owners could have control over our layout based on the device being used to view it.

    Cheers,
    Shaun :D
     
    Last edited: Jun 25, 2013
    Garamond likes this.
  2. Chris D

    Chris D XenForo Developer Staff Member

    I'm really not sure I am following this.

    You can use media queries to control any portion of the CSS.

    What is it that you want to do that you cannot with media queries?
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

    What would this variable do exactly and how would it be set?
     
  4. CyclingTribe

    CyclingTribe Well-Known Member

    How would I use CSS media queries to load two different banner ad code snippets (large for desktop, small for mobile)?

    How would I use CSS media queries to do if/else template changes based on whether XF is in responsive mode or not?
     
  5. CyclingTribe

    CyclingTribe Well-Known Member

    I'm not sure how it would be set, hence my initial question to the devs.

    The variable itself could be a simple on/off to denote whether your site is being displayed in responsive mode or not, or could be variable to denote desktop (res=0), tablet (res=1), or mobile phone (res=2), etc.

    This would give site owners the opportunity to modify templates specifically based on the type of device being used to view the site - something (it appears) you cannot currently do.
     
  6. Mike

    Mike XenForo Developer Staff Member

    "Responsive mode" is something that doesn't exist. It simply means that the site responds to the size of the viewport.

    An iPhone in portait mode is 320 pixels wide and can be 480 wide in landscape (iPhone 5 may be different). Android phones are all different. My Nexus 7 is somewhere around 600x880. The iPad is 768x1024. The concept of phone vs tablet doesn't really exist. If I want, I can drag my desktop browser window to be narrow and it should respond too.

    If you want to detect these things, you need to detect them in JavaScript or CSS media queries. They're not sent the server.
     
    Last edited: Jun 25, 2013
  7. Chris D

    Chris D XenForo Developer Staff Member

    Quite simple:

    <img src="styles/mybigbanner.jpg" class="bigBanner" />
    <img src="styles/mylittlebanner.jpg" class="littleBanner" />

    They both exist in the template side by side.

    Then in CSS:

    Code:
         .littleBanner
         {
              display: none;
         }
    
        <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveNarrowWidth)
        {
              .littleBanner
              {
                   display: block;
              }
    
              .bigBanner
              {
                   display: none;
              }
        }
        </xen:if>
    I'm aware you meant banner ADS, by the way, but the same could apply. There's also lots of advice out on the interwebs and even some Javascript based solutions to manage the responsiveness of adsense code (for example).
     
    caliman, 0ptima, HWS and 2 others like this.
  8. Russ

    Russ Well-Known Member

    You could do something like this.... in logo_block:

    Code:
          <div id="logo"><a href="{$logoLink}">
             <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
             <img src="@headerLogoPath" class="fullLogo" alt="{$xenOptions.boardTitle}" />
             <img src="@imagePath/xenforo/sources/mobilelogo.png" class="mobileLogo" alt="{$xenOptions.boardTitle}" />
           </a></div>
    

    Then css...

    Code:
    .mobileLogo
    {
    display: none;
    }
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
    {
       .mobileLogo
       {
         display: block;
         padding: 25px;
       }
       .fullLogo
       {
         display: none;
       }
    }
    </xen:if>
    
    Just a thought.
     
    Eagle, Shelley, HWS and 3 others like this.
  9. Chris D

    Chris D XenForo Developer Staff Member

    Great minds think alike.

    EDIT: Just fixed my code to be more correct.
     
    Lisa and Russ like this.
  10. Shelley

    Shelley Well-Known Member

    Nice one chris just the example I was looking for. Excellent post. (y)
     
  11. HWS

    HWS Well-Known Member

    Small minds just spend likes. :D
     
    JVCode likes this.
  12. CyclingTribe

    CyclingTribe Well-Known Member

    Thanks for the logo examples guys, but what about ad-code snippets in templates - we can't load two sets and hide one with CSS, that will create false impressions and get us into trouble with our ad networks.

    Can anyone provide a javascript example that can be used to detect the viewport size and display template elements based on the size?
     
  13. Brogan

    Brogan XenForo Moderator Staff Member

  14. CyclingTribe

    CyclingTribe Well-Known Member

    So you could do something like this in the head of the PAGE_CONTAINTER template?:

    Code:
    <script type="text/javascript">
      width = document.documentElement.clientWidth;
      responsive_mode = "2";
      if (width > 500) {
        responsive_mode = "1";
      }
      if (width > 800) {
        responsive_mode = "0";
      }
    </script>
    
    How would you get the responsive_mode value into a useful conditional in XF?
     
  15. Jeremy P

    Jeremy P Well-Known Member

    @Clickfinity What are you trying to accomplish with this? Responsive is a CSS thing. It can vary even on a single pageload. Resize your browser right now and you'll see the style scales down.

    It has nothing to do with PHP or anything on the server side.
     
  16. akia

    akia Well-Known Member

    If your using DfP then see my thread here: http://xenforo.com/community/threads/javascript-help-ad-tags.53335/

    I've figured it out and it works a treat in my testing.
     
    CyclingTribe likes this.
  17. CyclingTribe

    CyclingTribe Well-Known Member

    I'm trying to protect my revenue and stop XF 1.2 from trashing the layout by being "responsive" with 728x90 banners in place!! (y)

    Adsense offers responsive javascript for their ad code, but many other networks do not; in the case of BuySellAds, for example, I've been advised to "drop" their code for small viewport layouts to protect their advertiser's impression counts. In other words, drop revenue!

    As it stands - with no server-side control - I will simply have to disable responsive as it will not fit in with the banner sizes I use and I am not willing to sacrifice revenue for the sake of the responsive "feature".

    I would like to use it. I feel my members and guests will benefit greatly from it (especially after using XenForo.com in responsive mode I myself on my mobile). But unless I can control it, it will simply cost me money.

    What I would like is a simple way to load specific sizes ad_ templates based on the viewport width. That way I can set-up a number of ads within whatever network I'm using, make an XF template for each ad code snippet, and then load the appropriate ad size template based on viewport width (I do realise this is not an entirely exact science as the viewport width can change, but for the vast majority of page requests the width will remain at whatever size it has been requested at [with the obvious exception of orientation changes - but for 'mobile' view widths I'd load small enough banners to fit land/port]).

    What about using an existing javascript library like http://responsejs.com/ or http://verge.airve.com/ - pushing just the width (on page load) into a variable - $viewport-width for example - giving us the opportunity to use that value to display specific content in the templates.

    I'm not looking to change what responsive is or does, just enhance it by getting some server-side (me) control over it - so that I can adjust my site to suit my preference and those of my membership. That cannot be completely achieved through CSS media queries alone, can it?
     
  18. Jeremy

    Jeremy XenForo Moderator Staff Member

    Considering that a responsive design is meant to respond to requests on the client machine, there really isn't anything a server can do about it (it never receives the size). You are free to include a JavaScript library to load your ads post-load based on view size.
     
    Brogan likes this.
  19. CyclingTribe

    CyclingTribe Well-Known Member

    You cannot query the viewport size before serving the page?
     
  20. CyberAP

    CyberAP Well-Known Member

    So Adsense wins, use it. And if your provider wants to compete with Google it should offer these must-have features. As for now the solution they gave you just shows how much they care about their clients.
     
    Lone Wolf, Rudy and Brogan like this.

Share This Page