Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Alternative images for mobiles on Wordpress

  • 10-10-2017 11:16am
    #1
    Posts: 0


    Having a little trouble with 2 side by side images on a page. Look great on The PC but on the mobile it requires the user to scroll horizontally.

    Can anyone recommend a way to have the images resize in order to fit the mobile screen?


Comments

  • Moderators, Society & Culture Moderators Posts: 25,558 Mod ✭✭✭✭Dades


    Ideally the two images should appear vertically when the screen becomes a certain size, and maybe shrink in size.

    Is the Wordpress theme you are using not responsive?


  • Registered Users, Registered Users 2 Posts: 396 ✭✭M.T.D


    Have you possibly given the images and/or their container a fixed size (width and height)
    Try giving using a % width then their size will vary with the screen size also give them a min-width so on small screens they will stack
    depending on your layout you might want to give them a max-width as well


  • Registered Users, Registered Users 2 Posts: 10,748 ✭✭✭✭maccored


    <img src="IMAGE LINK" style='width:100%;'">


  • Registered Users, Registered Users 2 Posts: 6,289 ✭✭✭Talisman


    Responsive images were introduced as a feature of WordPress 4.4. You should define some custom image sizes, this can either be accomplished using the functions.php file for the website theme or by using a plugin. You can read about custom featured image sizes on the official website.

    I posted some code for defining image sizes in a Development thread recently: Dealing with Responsive Websites - Clients

    Here is more complete code that allows you to create img tags using the hioice_responsive_thumbnail() function. The images are responsive based the available container width. If the browser supports the 'imgsrc' attribute it will display the image which best fits the width.
    // Add custom image size support
    add_theme_support( 'post-thumbnails' );
    
    // Use the 'after_setup_theme' hook to register the thumbnail sizes
    add_action( 'after_setup_theme', 'hioice_setup_thumbnails' );
    
    // A 'pure' function to get the array of keys for the image widths
    function hioice_default_image_widths() {
      $widths = array('240w', '480w', '640w', '854w', '1024w', '1136w', '1280w', '1366w', '1600w', '1920w', '2048w', '2560w', '3840w', '4096w', '7680w' );
      return $widths;
    }
    
    // Adds custom image sizes
    function hioice_setup_thumbnails() {
    
      /*
       * image_sizes are stored in a two dimensional array:
       * [ aspect_ratio ][ width ] => image_size
       *
       * Each image_size element an array which stores
       * the width and height in pixels.
       * image_size : [ width, height ]
       */
    
      $image_sizes = array(
        '16_9' => array(
          '7680w' => array( 7680, 4320 ),
          '4096w' => array( 4096, 2304 ),
          '3840w' => array( 3840, 2160 ),
          '2560w' => array( 2560, 1440 ),
          '2048w' => array( 2048, 1152 ),
          '1920w' => array( 1920, 1080 ),
          '1600w' => array( 1600, 900 ),
          '1366w' => array( 1366, 768 ),
          '1280w' => array( 1280, 720 ),
          '1136w' => array( 1136, 640 ),
          '1024w' => array( 1024, 600 ),
          '854w' => array( 854, 480 ),
          '640w' => array( 640, 360 ),
          '480w' => array( 480, 272 ),
          '240w' => array( 240, 136 )
        ),
        '4_3' => array(
          '2048w_43' => array( 2048, 1536 ),
          '1600w_43' => array( 1600, 1200 ),
          '1400w_43' => array( 1400, 1050 ),
          '1280w_43' => array( 1280, 960 ),
          '1024w_43' => array( 1024, 768 ),
          '640w_43' => array( 640, 480 ),
          '480w_43' => array( 480, 360 ),
          '320w_43' => array( 320, 240 ),
          '240w_43' => array( 240, 180 )
        ),
        '1_5' => array(
          '600w_15' => array( 600, 400 ),
          '506w_15' => array( 506, 338 ),
          '412w_15' => array( 412, 275 ),
          '375w_15' => array( 375, 250 ),
          '360w_15' => array( 360, 240 ),
          '320w_15' => array( 320, 214 ),
          '240w_15' => array( 240, 160 )
        )
      );
    
      /*
       * Iterate over the image_sizes array structure
       * adding each image size to WordPress.
       */
    
      foreach ($image_sizes as $groups => $sizes) {
        foreach ($sizes as $key => $value) {
          add_image_size( $key, $value[0], $value[1] );
        }
      }
    
    }
    
    // Creates 'srcset' attribute from array of image urls
    function hioice_thumbnail_srcset( $srcset_arr ) {
    
      $srcset = '';
    
      foreach($srcset_arr as $key => $value) {
        if ($srcset) {
          $srcset .= ', ';
        }
        $srcset .= $value . ' ' . $key;
      }
    
      return $srcset;
    
    }
    
    // Returns <img> tag string with responsive 'srcset' attribute
    // NOTE: There is no alt or title attribute added to the tage
    function hioice_responsive_thumbnail( $image_id, $size = 'image', $class = '' ) {
    
      $thumbnail = wp_get_attachment_image_src( $image_id, $size )[0];
    
      $thumbnail_sizes = hioice_default_image_widths();
    
      $thumbnail_metadata = wp_get_attachment_metadata( $image_id );
    
      $srcset = array();
    
      foreach ($thumbnail_sizes as $size) {
        if ( array_key_exists($size, $thumbnail_metadata['sizes']) ) {
          $srcset[$size] = wp_get_attachment_image_src( $image_id, $size )[0];
        }
      }
    
      $img_size = $thumbnail_metadata['width'] . "w";
      $srcset[$img_size] = wp_get_attachment_image_src( $image_id, $img_size )[0];
    
      $img_tag  = '<img src="' . $thumbnail . '"';
      $img_tag .= ( $srcset ? ' srcset="' . hioice_thumbnail_srcset($srcset) . '"': '' );
      $img_tag .= ( $class ? ' class="' . esc_attr($class) . '"' : '' );
      $img_tag .= ' sizes="auto">';
    
      return $img_tag;
    
    }
    


Advertisement