How to set gallery custom field to slick slide container-CodePudding

I am trying to assign a custom field gallery image as a background image on a slick slide wrap.

        foreach ($gallery_image_ids as $gallery_image_id ) {
         $slides .= "<div class='slick-slide-wrap' >";
         $slides .= wp_get_attachment_image( $gallery_image_id, 'large');
         $slides .= "</div>";
        }

I have been able to set it using an image tag. However, I'd like to be able to set it as a background image on the container above, but it keeps erroring when I have tried the following code below.

    $test = wp_get_attachment_url( $gallery_image_id, 'large');
    foreach ($gallery_image_ids as $gallery_image_id ) {
        $slides .= "<div class='slick-slide-wrap' background-image: url(' .$test. ')>";
        $slides .= wp_get_attachment_image( $gallery_image_id, 'large');
        $slides .= "</div>";
    }

CodePudding user response：

The function wp_get_attachment_image you're using returns an HTML img element.

What you need is wp_get_attachment_image_url which returns the image URL: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_url/

$slides .= '<div  style="background-image: url(' . wp_get_attachment_image_url( $gallery_image_id, 'large') . ');">';