WordPress Help Articles

Updated: April 20, 2025

In the digital age, visual content is king. Whether you’re a photographer, blogger, or business owner, your website likely relies on images to engage visitors. However, with great visuals comes great responsibility – especially when it comes to legal compliance, image attribution, and giving proper credit to content creators. The Via Webs Media Credits plugin for WordPress is designed to address these concerns, making it easier than ever to ensure all images are correctly attributed while enhancing your website’s overall user experience.

What Is the Via Webs Media Credits Plugin?

The Via Webs Media Credits plugin is a feature-rich tool developed for WordPress that allows you to add custom media fields for photo credits. With this plugin, you can attach a photographer’s name along with a URL for more information or credit details directly to your media files. It then displays these credits on a beautifully responsive gallery. The gallery is presented in an attractive Polaroid-style grid with “Load More” functionality, advanced sorting options, pagination controls, and a lightbox for viewing full-size images.

Key Features and How to Use Them

1. Custom Media Fields for Attribution:
   • One of the standout features of the plugin is its ability to let you add two custom fields – Media Credit Name and Media Credit URL – to every image you upload. This means that every image in your Media Library carries clear attribution information. When you upload images to WordPress, simply fill out these fields to indicate the photographer’s name and, if available, the source or more detailed credit information.
2. Responsive Polaroid-Style Gallery:
   • The plugin displays images in a modern grid layout that is fully responsive for desktops, tablets, and mobile devices. This stylish design not only elevates your site’s visual appeal but also reinforces the seriousness of content attribution. Visitors see your images presented professionally, knowing that legal and ethical guidelines are being followed.
3. Advanced Sorting and Pagination Options:
   • Beyond simple display, the plugin gives you control over the gallery’s behavior with shortcode parameters. You can choose whether the gallery should load all images at once or use pagination with an AJAX-powered “Load More” button. Moreover, you can specify sorting options:
     • Sort By: Organize your images by “date” (default) or “name.”
     • Order: Choose “ASC” (ascending) or “DESC” (descending) order.
     • Number per Page: Determine how many images appear on each page when pagination is enabled.
4. Lightbox Integration:
   • When users click on an image, the plugin opens the full-sized version in a lightbox. This creates an immersive viewing experience that keeps visitors on your site and minimizes distractions. Combining the lightbox feature with proper credit information makes it simple for users to appreciate the work and the attribution behind it.

The Legal Importance of Proper Image Attribution

From a legal perspective, proper attribution is not just a best practice – it’s often a legal requirement. Copyright laws protect the work of photographers and artists, meaning that using an image without permission or without proper credit can lead to serious legal repercussions. The Via Webs Media Credits plugin helps you comply with these laws by ensuring that every image is clearly attributed. Here are some legal benefits:

• Copyright Compliance: By automatically displaying the photographer’s name and linking to their source (when available), you reduce the risk of copyright infringement. This is crucial for websites that use images under license or rely on user-contributed content.
• Transparency: Clearly visible credits build trust with your visitors and content creators. Transparency in attribution can prevent potential legal disputes and enhance your website’s reputation as a responsible and ethical platform.
• Risk Mitigation: In cases where a dispute arises, proper attribution can serve as evidence that you respected copyright and licensing terms. It may help mitigate damages or legal penalties.
• Encourages Ethical Sharing: When users see proper credits, they are more likely to respect intellectual property rights themselves. It sets a strong example for ethical content use and sharing online.

Installation and Setup

1. Upload and Activate:
   • Upload the plugin through your WordPress dashboard or via FTP, then activate it.
2. Configure Media Items:
   • Update your Media Library items by entering appropriate credit names and URLs. This step is crucial for ensuring legal compliance.
3. Insert the Shortcode:
   • Place the shortcode in your desired post or page. For example: [media_cre dit pagination=”yes” sort_by=”date” order=”DESC” per_page=”16″]
   • Adjust the parameters to fit your gallery’s desired appearance and functionality.

The Via Webs Media Credits plugin is an essential tool for anyone serious about both the aesthetics and legality of their visual content. By providing a user-friendly method to add custom photo credits, a responsive and engaging gallery layout, and robust sorting and pagination options, the plugin not only improves the user experience but also helps maintain legal compliance. Proper attribution is vital in today’s digital environment, where copyright issues are increasingly scrutinized. With Via Webs Media Credits, you can ensure that every image is presented professionally – building trust with your audience and potentially protecting your website from legal disputes. Download this code as a WordPress plugin

// -----------------------------------------------------------------------------
// 1. Add Custom Fields to Media Attachment Edit Screen
// -----------------------------------------------------------------------------

function viawebs_add_media_credit_fields($form_fields, $post) {
    $media_credit_name = get_post_meta($post->ID, '_media_credit_name', true);
    $media_credit_url  = get_post_meta($post->ID, '_media_credit_url', true);

    $form_fields['media_credit_name'] = array(
        'label' => 'Media Credit Name',
        'input' => 'text',
        'value' => esc_attr($media_credit_name),
        'helps' => 'Enter the name of the media creator or source.',
    );

    $form_fields['media_credit_url'] = array(
        'label' => 'Media Credit URL',
        'input' => 'text',
        'value' => esc_url($media_credit_url),
        'helps' => 'Enter the URL to credit the media source.',
    );

    return $form_fields;
}
add_filter('attachment_fields_to_edit', 'viawebs_add_media_credit_fields', 10, 2);

function viawebs_save_media_credit_fields($post, $attachment) {
    if (isset($attachment['media_credit_name'])) {
        update_post_meta($post['ID'], '_media_credit_name', sanitize_text_field($attachment['media_credit_name']));
    }
    if (isset($attachment['media_credit_url'])) {
        update_post_meta($post['ID'], '_media_credit_url', esc_url($attachment['media_credit_url']));
    }
    return $post;
}
add_filter('attachment_fields_to_save', 'viawebs_save_media_credit_fields', 10, 2);

// -----------------------------------------------------------------------------
//    AJAX Function to Load More Images (with Sorting)
// -----------------------------------------------------------------------------

function viawebs_load_more_media_credits() {
    if (!isset($_POST['page']) || !isset($_POST['per_page'])) {
        wp_send_json_error(['message' => 'Missing parameters.']);
    }
    $page     = intval($_POST['page']);
    $per_page = intval($_POST['per_page']);
    $offset   = ($page - 1) * $per_page;
    
    $sort_by = isset($_POST['sort_by']) ? sanitize_text_field($_POST['sort_by']) : 'date';
    $order   = isset($_POST['order']) ? sanitize_text_field($_POST['order']) : 'DESC';

    $args = array(
        'post_type'      => 'attachment',
        'post_status'    => 'inherit',
        'posts_per_page' => $per_page,
        'offset'         => $offset,
        'meta_query'     => array(
            array(
                'key'     => '_media_credit_name',
                'compare' => 'EXISTS',
            ),
        ),
        'order' => $order,
    );
    if ($sort_by === 'name') {
        $args['orderby'] = 'meta_value';
        $args['meta_key'] = '_media_credit_name';
    } else {
        $args['orderby'] = 'date';
    }

    $query  = new WP_Query($args);
    $output = '';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= viawebs_get_media_credit_with_image(get_the_ID());
    }
    wp_reset_postdata();

    ob_clean();
    wp_send_json_success($output);
}
add_action('wp_ajax_load_more_media_credits', 'viawebs_load_more_media_credits');
add_action('wp_ajax_nopriv_load_more_media_credits', 'viawebs_load_more_media_credits');

// -----------------------------------------------------------------------------
//    Function to Generate HTML for a Single Media Credit (Polaroid Style)
// -----------------------------------------------------------------------------

function viawebs_get_media_credit_with_image($attachment_id) {
    $credit_name   = get_post_meta($attachment_id, '_media_credit_name', true);
    $credit_url    = get_post_meta($attachment_id, '_media_credit_url', true);
    $image_url     = wp_get_attachment_image_src($attachment_id, 'medium');
    $full_image_url = wp_get_attachment_image_src($attachment_id, 'full');

    if ($image_url) {
        $image_html = '<a href="' . esc_url($full_image_url[0]) . '" data-lightbox="media-gallery">
            <img src="' . esc_url($image_url[0]) . '" alt="' . esc_attr($credit_name) . '" class="viawebs-media-credit-image">
        </a>';

        if (!empty($credit_name)) {
            $credit_html = '<p class="media-credit">';
            if (!empty($credit_url)) {
                $credit_html .= '<a href="' . esc_url($credit_url) . '" target="_blank">' . esc_html($credit_name) . '</a>';
            } else {
                $credit_html .= esc_html($credit_name);
            }
            $credit_html .= '</p>';
        } else {
            $credit_html = '<p class="media-credit">Unknown Photographer</p>';
        }
        return '<div class="media-credit-item">' . $image_html . $credit_html . '</div>';
    }
    return '';
}

// -----------------------------------------------------------------------------
//    Shortcode to Display the Media Credits Gallery
//    New Parameters:
//     - pagination: "yes" or "no" (default "yes")
//     - sort_by: "date" or "name" (default "date")
//     - order: "ASC" or "DESC" (default "DESC")
//     - per_page: number per page (only for pagination; default 16)
// -----------------------------------------------------------------------------

function viawebs_media_credit_shortcode($atts) {
    $atts = shortcode_atts(array(
        'pagination' => 'yes',   // "yes" to use Load More, "no" to load all media immediately
        'sort_by'    => 'date',  // "date" or "name"
        'order'      => 'DESC',  // "ASC" or "DESC"
        'per_page'   => 16,      // Number per page if pagination is yes
    ), $atts, 'media_credit');

    wp_enqueue_script('jquery');

    $output  = '<style>
        .media-credit-grid {
            display: grid;
            gap: 20px;
            justify-content: center;
            padding: 20px;
        }
        /* Responsive Grid: Desktop, Tablet, Mobile */
        @media (min-width: 1024px) {
            .media-credit-grid { grid-template-columns: repeat(4, 1fr); }
        }
        @media (max-width: 1023px) and (min-width: 600px) {
            .media-credit-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 599px) {
            .media-credit-grid { grid-template-columns: repeat(1, 1fr); }
        }
        .media-credit-item {
            background: white;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            text-align: center;
            max-width: 250px;
            margin: 10px auto;
            transition: transform 0.2s ease-in-out;
        }
        .media-credit-item:hover {
            transform: scale(1.05);
        }
        .viawebs-media-credit-image {
            width: 100%;
            height: auto;
            border-bottom: 20px solid white;
        }
        .media-credit {
            font-size: 16px;
            text-align: center;
            padding: 8px 0;
            background: white;
        }
        .load-more-btn {
            display: block;
            width: 200px;
            margin: 20px auto;
            padding: 10px 15px;
            font-size: 16px;
            text-align: center;
            background: #8b70a8;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        .load-more-btn:hover {
            background: #42295c;
        }
    </style>';
    $output .= '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>';

    if (strtolower($atts['pagination']) === 'no') {
        $sort_by = $atts['sort_by'];
        $order   = $atts['order'];
        $args    = array(
            'post_type'      => 'attachment',
            'post_status'    => 'inherit',
            'posts_per_page' => -1,
            'meta_query'     => array(
                array(
                    'key'     => '_media_credit_name',
                    'compare' => 'EXISTS',
                ),
            ),
            'order' => $order,
        );
        if ($sort_by === 'name') {
            $args['orderby'] = 'meta_value';
            $args['meta_key'] = '_media_credit_name';
        } else {
            $args['orderby'] = 'date';
        }
        $query = new WP_Query($args);
        $grid_items = '';
        while ($query->have_posts()) {
            $query->the_post();
            $grid_items .= viawebs_get_media_credit_with_image(get_the_ID());
        }
        wp_reset_postdata();
        $output .= '<div class="media-credit-grid">' . $grid_items . '</div>';
    } else {
        $per_page = intval($atts['per_page']);
        $output .= '<div id="media-credit-grid" class="media-credit-grid"></div>';
        $output .= '<button id="load-more-media" class="load-more-btn" data-page="1" data-perpage="' . esc_attr($per_page) . '" data-sort_by="' . esc_attr($atts['sort_by']) . '" data-order="' . esc_attr($atts['order']) . '">Load More</button>';
        $output .= '<script>
            jQuery(document).ready(function($) {
                function loadMediaCredits(page) {
                    var button = $("#load-more-media");
                    var perPage = button.data("perpage");
                    var sortBy = button.data("sort_by");
                    var order = button.data("order");
                    
                    $.ajax({
                        url: "' . admin_url('admin-ajax.php') . '",
                        type: "POST",
                        dataType: "json",
                        data: {
                            action: "load_more_media_credits",
                            page: page,
                            per_page: perPage,
                            sort_by: sortBy,
                            order: order
                        },
                        success: function(response) {
                            if (response.success && $.trim(response.data) !== "") {
                                $("#media-credit-grid").append(response.data);
                                button.data("page", page);
                            } else {
                                button.hide();
                            }
                        },
                        error: function() {
                            console.log("AJAX failed");
                        }
                    });
                }
                $("#load-more-media").on("click", function() {
                    var nextPage = $(this).data("page") + 1;
                    loadMediaCredits(nextPage);
                });
                // Load initial set
                loadMediaCredits(1);
            });
        </script>';
    }
    return $output;
}
add_shortcode('media_credit', 'viawebs_media_credit_shortcode');