Responsive design

(@crodesign)

What would I need to do and to what file, to not load the JS but do load an image (random or first in list) if the browser viewport is less than some dimension, say, 600 pixels? This is a need to be properly responsive so the user doesn’t download many images (or even large ones) when on a mobile device.

Below is my mod to the pub_footer.html.twig file. This did not work but rather killed the script completely.

if (screen.width<=799)
{
    /*<![CDATA[*/
    {# UNCOMPRESSED:
    try {
        (function($){
            myatu_bgm.addTopImage(
                "{% if opacity < 100 %}-moz-opacity:.{{ opacity }};filter:alpha(opacity={{ opacity }});opacity:.{{ opacity }};{% endif %}",
                function() {
                    // Either fade in or display immediately
                    if ((typeof myatu_bgm !== "undefined") && (myatu_bgm.initial_ease_in === "true")) {
                        $(this).fadeIn("slow");
                    } else {
                        $(this).show();
                    }
                }
            );
        }(jQuery));
    } catch(e) {}
    #}
    try{(function(a){myatu_bgm.addTopImage("{% if opacity < 100 %}-moz-opacity:.{{ opacity }};filter:alpha(opacity={{ opacity }});opacity:.{{ opacity }};{% endif %}",function(){if((typeof myatu_bgm!=="undefined")&&(myatu_bgm.initial_ease_in==="true")){a(this).fadeIn("slow")}else{a(this).show()}})}(jQuery))}catch(e){};
    /*]]>*/
}
else
{
  <img id="myatu_bgm_top" class="myatu_bgm_fs" src="{{ random_image.url }}" alt="{{ random_image.alt }}" {% if opacity < 100 %}style="-moz-opacity:.{{ opacity }}; filter:alpha(opacity={{ opacity }}); opacity:.{{ opacity }};"{% endif %}  />
}

Thank you in advance.

http://wordpress.org/extend/plugins/background-manager/

Viewing 4 replies - 1 through 4 (of 4 total)

Anonymous User 4048828
(@anonymized-4048828)

11 years, 2 months ago
Hi!

You could replace the current <script>...</script> in that file with:
```
<script type="text/javascript">
    /*<![CDATA[*/
    try {
        (function($){
            if ($(window).width() > 799) {
                myatu_bgm.addTopImage(
                    "{% if opacity < 100 %}-moz-opacity:.{{ opacity }};filter:alpha(opacity={{ opacity }});opacity:.{{ opacity }};{% endif %}",
                    function() {
                        // Either fade in or display immediately
                        if ((typeof myatu_bgm !== "undefined") && (myatu_bgm.initial_ease_in === "true")) {
                            $(this).fadeIn("slow");
                        } else {
                            $(this).show();
                        }
                    }
                );
            }
        }(jQuery));
    } catch(e) {}
    /*]]>*/
    </script>
```
But this would not mean it is responsive, just disabled entirely if the initial screen width is 799 pixels or less; this includes Background Manager’s ability to detect change of orientation (landscape/portrait mode).
Thread Starter crodesign
(@crodesign)

11 years, 2 months ago

I had a feeling it was something like that.

This would be a very large step in the right direction. Now that I see this working, I hope I can complete the rest of the functions to make it “Responsive” (or at least bandwidth responsible).

Thread Starter crodesign
(@crodesign)

11 years, 2 months ago

Adding a low-res image to my stylesheet for the breakpoint in the above script, I am able to provide a workaround to making your plugin responsive. When I have more time, I will make changes to your script. I would be happy to share it with you when it is completed.

Thank you for your very quick help in my simple matter above.

Ramzii
(@ramzii)

10 years, 9 months ago

So, any news on this matter? Thanks

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Responsive design’ is closed to new replies.