retrieving attachment id to set as background image to a figure element

Check out get_attached_media() and possibly wp_get_attachment_url() as well. You’ll get an array of posts from get_attached_media() and you can loop over that array and pass the IDs to wp_get_attachment_url().

• This reply was modified 6 years, 9 months ago by stephencottontail.

Okay, we’re getting closer. I am getting the background image of the_post_thumbnail() but not from the images that I’m attaching to the post.

functions.php
What I have here is a function that basically removes the formatting from when you insert an image in to a post and then reformats it to include the <figure> and <figcaption> elements.

<?php
        add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

        function my_img_caption_shortcode_filter($val, $attr, $content = null)
        {
            extract(shortcode_atts(array(
                'id'    => '',
                'align' => '',
                'width' => '',
                'caption' => ''
            ), $attr));

            if ( 1 > (int) $width || empty($caption) )
            return $val;

            $capid = '';
            if ( $id ) {
                $id = esc_attr($id);
                $capid = 'id="figcaption_'. $id . '" ';
                $id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
            }

            $grabImgURL = wp_get_attachment_url( get_post_thumbnail_id($ID) );

            return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="background-image: url('. $grabImgURL . ')" >' . do_shortcode( $content ) . '<figcaption ' . $capid . 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
        }
?>

So again, it’s grabbing the post thumb but not the images that I’m attaching to the post itself. How do I grab those ID’s?

• This reply was modified 6 years, 9 months ago by harshclimate.
• This reply was modified 6 years, 9 months ago by harshclimate.

Hi harshclimate!

The attachment IDs can be extracted from the returned array from get_attached_media(). It has all of a post’s attachments except the featured image. It returns an array of post objects, so the ID of any particular post is $post->ID. As it happens, the index value of each item in the array is also the ID.

I’m glad you are so pleased with my past support efforts that you seek me out for further help, but please don’t do that. Seeking out specific forum members is really frowned upon. We know you have done so in all innocence, so this transgression is not reflecting poorly on you. There can be any number of members capable of helping you, it’s in your best interest to get the first available response instead of waiting around for a specific person who may not even have a good answer for you. No one’s knowledge is limitless and we all have our special fields of knowledge.

As it happens, if you post in this Developing forum, I will more than likely see your post and will reply if I’m able to help. If you have something that’s not WP related that you’d like to communicate to me, a direct message through Slack is fine. All WP support questions should remain in these forums. I (and anyone else) will not respond to support questions in Slack beyond saying “don’t do that”.

As you now know, support is also available via IRC. FYI, I don’t follow that IRC channel, but a number of very knowledgeable people do.

Whoops, yeah… sorry about that! I’ve always been very happy with anyone’s help. Even if not from a moderator! I should probably read the wordpress forum rules for once, huh? ??

So you told me about get_attached_media($post->ID) but how would I would use that in my example above? When I replaced my variable $grabImgURL = wp_get_attachment_url( get_post_thumbnail_id($ID) ); changing it to $grabImgURL = get_attached_media($post->ID); it didn’t produce anything. It’s probably because I have no idea what I’m doing.

So far this works:

$images = get_attached_media('image', $post->ID);

            foreach($images as $image) {
                echo '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="background-image: url('. wp_get_attachment_image_src($image->ID) . ')" >' . do_shortcode( $content ) . '<figcaption ' . $capid . 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
            }

The only problem is that it’s not showing up as a background image. It’s just giving me style="background-image: url(Array)"

Here’s what I need to have happen, and it is a big issue – I have a photography post which is it’s own CPT. In that post, I have the featured image which is the post thumb, then I have the post text, then I have all the other photographs that are related to that day that I shot photos. So those images were placed in a 12 column wide div (1140px wide), which is great for landscape orientated photographs, but really suck for portrait orientation – They are simply too large. So what I wanted to do was create a figure element that would contain the background image of the attached images. One figure per photograph, then the caption would reside inside that element (these figures are 50% wide). That way the majority of the photograph would be in the same sized element and would lay out perfectly. When someone clicks that image, it’ll take you to the attachment page where the whole photo would render.

Does this accomplish the solution I need?

• This reply was modified 6 years, 9 months ago by bcworkz. Reason: Inserted misplaced paragraph

wp_get_attachment_image_src() returns an indexed array (0=url, 1=width, 2=height, 3=is_intermediate). So you need '" style="background-image: url('. wp_get_attachment_image_src($image->ID)[0] . ')" >'

(added index reference [0])

Based on your description of your overall goal, I’m not sure backgrounds are the best approach. It would work, but the departure from default behavior is significant. I think the best approach is something that does not appreciably alter default behavior.

If this were my site, my initial approach would be to utilize the default gallery scheme. Alter the image thumbnail (actual small images, not featured images, also called thumbnails in code) cropping criteria so thumbnails used by the gallery are square aspect and any extra image area is cropped instead of scaled to fit. You would use add_image_size() for this. If you need to use an existing size designation, use remove_image_size() before adding. Whatever you find problematic with this approach can likely be altered with some custom coding.

Realize that changing image sizes does not affect images already uploaded. There are plugins available that will regenerate existing images that change due to new image size definitions.

Another approach would be to find some sort of gallery plugin that works the way you want from the start.

So would add image size for a 1:1 ratio be specified in functions?

Right functions.php, with the third $crop parameter set to true so the 1:1 frame is always filled. Or if you prefer, override a default image size settings as shown here.

Anything done with image sizes should be from within a callback to ‘after_setup_theme’ action (or later).

The update images plugin needs to be run once after making the image size change. After that it can be removed, as new uploads will honor your size changes.

Nothing is changing on my site. No matter what changes I make to functions nothing changes. Sometimes ATOM does weird things with multiple project folders open. I’m probably working out of different site versions. SIGH!