2

Im trying to get this featured image only when wiewport is < 768:

add_image_size( 'img-movil', 660, false );

I have no much coding skills. I was reading about how to pass a variable from JS to PHP with jQuery $.ajax() but I don't understand it completely. This is what I did:

First step. I try to set JS variable and send it to the server:

    $(document).ready(function(){
          var viewportWidth = $(window).width();
          if (viewportWidth < 768) {
            var modoView = 'movil';
            $.ajax({
               type: "POST",
               url: 'front-page.php',
               data: {
                   modoView : modoView
               },
               success: function(data) {
                   alert("success!");
               }
            });
    }

It doesn't work (success allert doesn't fire). I will appreciate any help with it.

Second step (when first step works), check if PHP variable is present (this code is in the body of front-page.php):

<?php
if (isset($_POST['modoView'])) {
  $my_image_size = 'img-movil';
}
?>

Is it right? Thank you in advance.

  • Why do you want to load a different image size? Does the 'shrunk' image (on smaller devices) go blurry? If not, then there is no reason to load another image, just use CSS to make sure the image doesn't spill over the viewport. If the reason you're doing it so to recude bandwidth/download amount, then you are actually increasing this by loading another image (compared to just keeping the first one) – Dan. Nov 30 '16 at 11:48
  • If you want to load the device-specific image in the first instance (response) then you would have to write some PHP to detect the device type. There is no 100% reliable way of doing this, but the best is probably by reading the user-agent value and then setting the image size string accordingly. – Dan. Nov 30 '16 at 11:52
  • Hi Dan, Thank you for your answer. There is another reason for doing it: the mobile image size is bigger than desktop image size, and ther are 200 posts loaded in the front page, so I want to get just the image size I need in each case. – aitor Nov 30 '16 at 11:56
  • Ok, I'll research user-agent way. Thank you. – aitor Nov 30 '16 at 11:58
  • you can also have a look to wp_get_attachment_image_srcset() , that retrieves the value for an image attachment’s ‘srcset’ attribute. developer.wordpress.org/reference/functions/… – Benoti Nov 30 '16 at 12:08
0

After a few days reading about srcset attribute (Thanks Benoti for point to this!), definitely, I can see that this is the right way. This solution is simple, enough to solve this question, although srcset attribute with <picture> tag is much more powerfull. My solution:

Declare sizes in functions.php

add_image_size( 'c200x200', 200, 200, true );
add_image_size( 'c400x400', 400, 400, true );

Check a custom field with the size stored

I have two types of posts, big and small, with 200x200 and 400x400 px img size.

$tamano = get_field('tamano');
if ($tamano == '200x200') {
  $clase = 'c200x200';
} elseif ($tamano == '400x400') {
  $clase = 'c400x400';
} else {
  $clase = 'sin-clase';
}

Build the img tag

<?php
      $img_id = get_post_thumbnail_id();
      $img_src = wp_get_attachment_image_url( $img_id, 'c200x200' );
      $img_srcset = wp_get_attachment_image_srcset( $img_id, $clase );
      $alt_text = get_post_meta($img_id , '_wp_attachment_image_alt', true);
      ?>

      <img
          srcset="<?php echo esc_attr( $img_srcset ); ?>"
          alt="<?php echo $alt_text; ?>"
          sizes="(min-width: 768px) 400px, 200px"
          src="<?php echo esc_url( $img_src ); ?>"
      >

Background:

https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

http://alistapart.com/article/responsive-images-in-practice

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.