link only images that are bigger

  • When uploading multiple images to a post all at once, they can either all be linked or none linked. Obviously you can go through afterwards and link or unlink them.

    But I wonder if there is some way to get it to link only images that are larger than the Large size?

    So for instance my Media setting for Large images is 800 pixels wide. If an image is less than 800px wide, it should not be linked, but if it is wider than 800px, it should be resized to 800 to fit on the page, then linked to the original image.

    Is this possible to achieve? Preferably something added in functions.php as I would prefer not to use use too many plugins, but if that’s all there is….

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • That would be a problem because at the time of linking, you don’t know what size the user’s device is. Even though your large size is 800px, it depends on the theme’s content width and the user’s device width for determining if the image fits on the page or should be linked.

    Thread Starter janew

    (@janew)

    I don’t understand. At the time of linking, the following code is inserted into the post:

    <a href="https://www.foo.com/wp-content/uploads/2020/12/image.jpg"><img src="https://www.foo.com/wp-content/uploads/2020/12/image-800x1159.jpg" alt="" width="800" height="1159" class="alignnone size-large wp-image-1346" /></a>

    Regardless of device, the image loaded has the size appended: 800×1159 – which means the original is larger than the image displayed and can be linked to. If there is no size appended to the image, then it is already showing the original and does not need to be linked.

    So even if the user is viewing on a phone with a 240px width, it is still showing the image with the 800×1159 size, just showing it smaller, so it fits on the device screen. But the picture itself is still 800px wide. Right?

    If I’m wrong, please explain, because that is how I understand this to work.

    With regard to content-width, I have already re-defined that to 800px, so there is no issue with that ever overriding my Media settings.

    Thanks!

    So even if the user is viewing on a phone with a 240px width, it is still showing the image with the 800×1159 size, just showing it smaller

    This is not correct, because during the output of the page, WordPress adds the srcset and sizes attributes for images, which allows the browser to choose the one that fits the device best. So the user isn’t always seeing the image that is specified in the content.

    Thread Starter janew

    (@janew)

    Fair enough, but I want it to link only when the original image is larger than the “Large” size set in Media settings. Maybe that part is mixing things up.

    I guess I should be asking for it to link images if the original image is wider than the max content-width. In that regard, nothing changes from browser to browser. Whether the viewport is 240px or 2400px, the content-width is always limited to 800px, and therefore the largest the image can be displayed is 800px. And I want to link to images that are larger than that.

    It’s my understanding that WordPress “knows” how big the original image is, so it can know if it is bigger than the max content-width and if it should link to it or not.

    I just don’t have any idea how to tell it to do so, in functions.php. Or if it’s even possible.

    I don’t know the Media functions very well. The interface to the Media Library is slightly different in the block editor than the Classic Editor. So you could research how the editor determines which option (link or no link) to request for the image when it’s inserted, but I personally don’t know where to look (PHP or JavaScript). It doesn’t sound like anything that belongs in a theme, though.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘link only images that are bigger’ is closed to new replies.