How to make grid images link directly to the document file
In Document Library Pro, you can easily configure document titles and buttons to link directly to a file download using the plugin settings or a shortcode. However, by default, clicking a document’s featured image will take the user to the single document page.
If you want the featured image to open the direct file in a new tab, you can achieve this using a small custom code snippet. If you're not sure how to use the following code snippet, then see our guide on how to add code snippets.
Code snippet
The following script detects a click on the featured image, finds the direct link used by the title, and opens that link in a new tab instead.
add_action('wp_footer', function() {
?>
<script>
jQuery(document).ready(function($) {
// Use event delegation to target the featured image in the document grid
$(document).on('click', '.dlp-grid-card .dlp-grid-card-featured-img img', function(e) {
e.preventDefault();
// Find the parent card and locate the direct link in the title
var $card = $(this).closest('.dlp-grid-card');
var $link = $card.find('.dlp-grid-card-title a'); if ($link.length) {
window.open($link.attr('href'), '_blank');
}
});
// Change the cursor to a pointer to indicate the image is clickable
$(document).on('mouseenter', '.dlp-grid-card .dlp-grid-card-featured-img img', function() {
$(this).css('cursor', 'pointer');
});
});
</script>
<?php
}, 100);
Important note
For this script to find the correct URL, the document title and its link must be enabled in your layout settings.
If searching the knowledge base hasn't answered your question, please contact support.