How to get the title of the random images from media library?

Question

I am displaying random images in my homepage. My problem is, I can't get the title of the images to show in lightbox.

Here are my codes.

Codes that gets the images from the media library

function get_images_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'posts_per_page' => 6,
        'orderby' => 'rand'
    );
    $query_images = new WP_Query( $args );
    $images = array();
    foreach ( $query_images->posts as $image) {
        $images[]= $image->guid;
    }
    return $images;
}

Code that displays the images from the media library

function display_images_from_media_library() {

    $imgs = get_images_from_media_library();
    $html = '<div class="no-gutter">';

    foreach($imgs as $img) {
            $html .= '<div class="col-lg-4 col-sm-6 photo-gallery">
            <a class="portfolio-box" data-lightbox="out-of-the-box" data-title="' . $attachment->post_title . '" href="' . $img . '"><img src="' . $img . '" alt="" />
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-category text-faded">
                            View <i class="fa fa-search-plus"></i>
                        </div>
                    </div>
                </div>
            </a></div>';
    }

    $html .= '</div>';

    return $html; } ?>

Hope you could help me.

Answer 1

Your first function get_images_from_media_library() only returns images guid, I'd suggest to extend it by returning all image datas :

function get_images_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'posts_per_page' => 6,
        'orderby' => 'rand'
    );
    $query_images = new WP_Query( $args );
    $images = array();
    foreach ( $query_images->posts as $image) {
        $images[]= $image;
    }
    return $images;
}

Then, in your second function to get what you're need (guid and title) like this :

function display_images_from_media_library() {
    $imgs = get_images_from_media_library();
    $html = '<div class="no-gutter">';
    foreach($imgs as $img) {
        $html .= '<div class="col-lg-4 col-sm-6 photo-gallery">
            <a class="portfolio-box" data-lightbox="out-of-the-box" data-title="' . esc_attr($img->post_title) . '" href="' . $img->guid . '"><img src="' . $img->guid . '" alt="" />
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-category text-faded">
                            View <i class="fa fa-search-plus"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>';
    }
    $html .= '</div>';
    return $html;
}

Don't forget to escape HTML and quotes with esc_attr() when sending text value on HTML attribute (eg "title", "data-title"...) to avoid quotes conflict or HTML markups rendered as plain text ;)

Cheers!