0

Suppose i want to implement a responsive header with compliance for multiple devices. To do so (with a beautiful result ofc), i need different versions of the picture, resized and cropped by their sides, then put all of them in a ... block. I could just upload multiple versions of it, but that wouldn't be user friendly, since i'm forced to create the pictures one by one.

I thought something like adding

add_image_size("grand_neo", 320, 450, true);

to functions.php, then in my header.php get it with

wp_get_attachment_image($id, 'grand-neo');

where $id is the header image's one. But how to get it? Thanks anyone willing to help.

  • A clarificatino before trying to really answer: out of box WordPress images comes with srcset attribute support since Version 4.4. It automatically add some images variations for responsiveness and it allows you to filter it's values. Isn't working for you? – Celso Bessa May 14 '17 at 23:54
  • Function header_image returns the image's path, meaning that my <img> tag is hardcoded and includes this function as src tag. Unless i can find a way to render it as out of the box image, no. – Daniele Squalo May 15 '17 at 1:04
0

I have a similar need in some projects of mine and solved by getting the image ID from it's URL and then writing the markup with wp_get_attachment_image as it will return a markup with srcset attribute.

To get the image ID, I am using Gustavo Bordoni's helpers as it follows and shown in here.

function attachment_url_to_postid( $url ) {
    global $wpdb;

    $dir = wp_upload_dir();
    $path = $url;

    if ( 0 === strpos( $path, $dir['baseurl'] . '/' ) ) {
        $path = substr( $path, strlen( $dir['baseurl'] . '/' ) );
    }

    $sql = $wpdb->prepare(
        "SELECT post_id FROM $wpdb->postmeta WHERE meta_key = '_wp_attached_file' AND meta_value = %s",
        $path
    );
    $post_id = $wpdb->get_var( $sql );
    if ( ! empty( $post_id ) ) {
        return (int) $post_id;
    }
}

function attachment_url_to_postid( $url ) { global $wpdb;

$dir = wp_upload_dir();
$path = $url;

if ( 0 === strpos( $path, $dir['baseurl'] . '/' ) ) {
    $path = substr( $path, strlen( $dir['baseurl'] . '/' ) );
}

$sql = $wpdb->prepare(
    "SELECT post_id FROM $wpdb->postmeta WHERE meta_key = '_wp_attached_file' AND meta_value = %s",
    $path
);
$post_id = $wpdb->get_var( $sql );
if ( ! empty( $post_id ) ) {
    return (int) $post_id;
}

}

and it's wrapper:

function get_attachment_id_by_url( $url ) {
    $post_id = attachment_url_to_postid( $url );

    if ( ! $post_id ){
        $dir = wp_upload_dir();
        $path = $url;
        if ( 0 === strpos( $path, $dir['baseurl'] . '/' ) ) {
            $path = substr( $path, strlen( $dir['baseurl'] . '/' ) );
        }

        if ( preg_match( '/^(.*)(\-\d*x\d*)(\.\w{1,})/i', $path, $matches ) ){
            $url = $dir['baseurl'] . '/' . $matches[1] . $matches[3];
            $post_id = attachment_url_to_postid( $url );
        }
    }

    return (int) $post_id;
}

and then, the markup:

wp_get_attachment_image( $image_id, $args['desired_image_size_as_registered'] );

Hope it helps.

  • Thank you. I'll try your solution. Anyways i found a way to do exactly what i was thinking about, plus avoiding to save an image for every size. I put it in this thread – Daniele Squalo May 16 '17 at 11:57

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.