Alternative images for mobiles on Wordpress

[Deleted User]

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?

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?

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

maccored

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

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;

}