Support » Theme: WP Macchiato » Different header images for different size screens

  • Hello,
    I would like to have different images display for different media width.
    I have 4 images:

    1. one for desktop
    2. one for width under 1018px but above 768px
    3. one for width under 767px but above 480px
    4. one for width below 480px
    5. Searching for solutions, I have found this thread:
      change the site-header image on mobile
      I have foolowed the instructions, adding the following to my functions.php file (though I am sure I did not specify the width correctly, don’t know how to make a condition between two values:

      <?php
      add_action('wp_head', 'my_custom_js_script');
      
      function my_custom_js_script(){
      ?>
      <script>
      jQuery( document ).ready( function( $ ) {
      
         function change_image_res() {
      
             if ( $( window ).width() <= 1018 ) {
                 $( '#site-logo a img' ).attr( "src", 'http://www.wingtsun.co.il/images/logo-banner-1018.png' );
             } else ( $( window ).width() <= 480 ) {
                 $( '#site-logo a img' ).attr( "src", 'http://www.wingtsun.co.il/images/logo-banner-480.png' );
             } else {
                 $( '#site-logo a img' ).attr( "src", 'http://www.wingtsun.co.il/images/logo-banner-767.png' );
             }
         }
      
         $( window ).load( function() {
             change_image_res();
         } );
      
         $( window ).resize( function() {
             change_image_res();
         } );
      
          $('#site-logo a img').show();
      
      } );
      </script>
      <?php
      }
      ?>

      I only included three images, the fourth is specified in the header.file, and I don’t know if it is right or not.
      And made the change in CSS file, to prevent the “jumping” of the image, as was said.
      However, I don’t code myself in php, and there is one instruction missing:
      What should I do in my header.php file to make it all work?
      As of now, the appropriate portion of my header.php looks like this:

             	<header id="masthead" class="header" role="banner">
                  	<div class="row">
                      	<div class="col-md-12">
                          	<div class="logo site-branding">
      
                                  <div id="site-logo"><a href="http://www.wingtsun.co.il/" rel="home"><img src="http://www.wingtsun.co.il/images/logo-banner3.png" alt=" ווינג-צון ישראל " /></a></div>
      
                              </div> 
                         	</div>
                      </div>	
                  </header>

      I appreciate very much a bit of help here.
      Usually, for some reason, I don’t get any help on this forum. I really hope this time is different…
      Thank you,
      Vera

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Different header images for different size screens’ is closed to new replies.