WordPress.org

Ready to get started?Download WordPress

Forums

Background Manager
Responsive design (5 posts)

  1. crodesign
    Member
    Posted 1 year ago #

    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/

  2. myatu
    Member
    Plugin Author

    Posted 1 year 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).

  3. crodesign
    Member
    Posted 1 year 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).

  4. crodesign
    Member
    Posted 1 year 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.

  5. Ramzii
    Member
    Posted 1 year ago #

    So, any news on this matter? Thanks

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags