deliciousbrains / wp-image-processing-queue

Resize WordPress images in the background
203 stars 18 forks source link

Unable to crop? #9

Closed kupoback closed 7 years ago

kupoback commented 7 years ago

Hi, so I am running the code for these banner images found on this site here, and when I call to it within my code, I assumed it was under the normal array of add image size.

add_image_size( w, h, crop? )

With my code, I am doing so within the first array, or in this sense 0, 590, array('center','center') however, upon doing so crops the image down from 2000x890 to 1326x590 and ignores the third parameter, the cropping. I needed the image to stay at 2000px wide and crop the height to 590px with the focus on the center.

Am I doing something wrong? Do I have my code set up wrong? What's going on?

ipq_get_theme_image( $image_ID,
    array(
        array( 2000, 590, array( 'center', 'center' )  ),
        array( 1000, 445, array( 'center', 'center' ) ),
    ),
    array(
      'class' => 'img-responsive',
      'alt'   =>  __( $title, 'boss' ),
    )
);
dirksnat commented 7 years ago

@kupoback did you find a solution?

I'm having the same problem. The crop param doesn't seem to have any effect. Setting $crop to true or array('center','center') seems to resize the width while keeping the original aspect ratio in tact, like it does when $crop is set to false.

kupoback commented 7 years ago

No, the issue wasn't resolved. I ended up scraping the thing as there didn't seem to be much activity going on. However, going forward, it might have been a server issue, or the fact that I was trying to resize images that were uploaded prior to the function being called. Images uploaded after seemed to work, but at the point in the project, it was difficult to tell. I haven't come across another project to test this theory yet.

kupoback commented 7 years ago

I am reopening this issue as I am trying to use this for a second time on a personal project to see if I can get it to work.

When I set the crop to either true or array( 'center', 'center' ) it doesn't return a srcset instead just the first item. See example.

echo ipq_get_theme_image( 10, array(
            array( 1920, 1000, array('center', 'center') ),
            array( 600, 400, array('center', 'center')),
            ),
            array(
                'class' => 'img-fluid'
            )
    );

So with that, I get only this: <img width="1920" height="1000" src="http://localhost/wp-content/uploads/2017/10/home-hero-1920x1000.jpeg" class="img-fluid" alt="">

Is there something I'm missing? Something I'm not understanding, or just something that isn't implemented?

koraysels commented 7 years ago

i also have the same.. it does not crop

A5hleyRich commented 7 years ago

i also have the same.. it does not crop

@koraysels this sounds unrelated, please open a separate issue.

A5hleyRich commented 7 years ago

@kupoback wp_calculate_image_srcset is used internally, which will only include images in the srcset that matches the original aspect ratio.

https://developer.wordpress.org/reference/functions/wp_calculate_image_srcset/

Note that only image sizes matching the aspect ratio for the original image will be returned by wp_calculate_image_srcset() since the srcset attribute is only meant to be used for resolution switching, not changing aspect ratios at different viewport widths (often referred to as the “art direction” use case). See: http://usecases.responsiveimages.org/.

andrew-boyd commented 3 years ago

👋 Hello, I know this issue is closed but I'm seeing the exact same issue in my current project. I'm trying to crop images to a square 1:1 aspect ratio and the crop parameter has no effect on the image.

echo ipq_get_theme_image(
  $avatar,
  array(
    array(350, 350, true),
    array(700, 700, true)
  ),
  array(
    'class' => 'avatar-image',
    'alt' => 'Headshot for ' . $display_name
  )
);

ends up generating an img tag that looks like this where none of the images are cropped for square formatting and the base theme image crops are also included. (formatted for legibitily):

<img 
  class="avatar-image"
  width="350"
  height="219"
  src="//localhost:3000/wp-content/uploads/2021/03/example.jpg"
  alt="Headshot for [display name here]"
  srcset="
    //localhost:3000/wp-content/uploads/2021/03/example.jpg 2118w,
    //localhost:3000/wp-content/uploads/2021/03/example-1536x960.jpg 1536w,
    //localhost:3000/wp-content/uploads/2021/03/example-2048x1280.jpg 2048w,
    //localhost:3000/wp-content/uploads/2021/03/example-1400x875.jpg 1400w,
    //localhost:3000/wp-content/uploads/2021/03/example-750x469.jpg 750w,
    //localhost:3000/wp-content/uploads/2021/03/example-300x188.jpg 300w,
    //localhost:3000/wp-content/uploads/2021/03/example-768x480.jpg 768w,
    //localhost:3000/wp-content/uploads/2021/03/example-1024x640.jpg 1024w"
  sizes="(max-width: 350px) 100vw, 350px"
>

A.) Am I misunderstanding what the image processing queue is supposed to equip me to do? B.) Is this project still being maintained?