0

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.

1
  • 1
    $attachment is not defined anywhere!
    – Sumit
    Apr 20 '16 at 8:19
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!

1
  • you're a lifesaver :) that definitely did the trick. cheers indeed! Apr 22 '16 at 1:35

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.