How to link the entire grid card to the single document page
By default, when you use Document Library Pro's grid layout, only the document title can link to the single document page. This guide explains how to make the images in the grid link to the single document page too.
Prerequisites
Before you start, make sure Document Library Pro is installed and already displaying documents in a grid layout, and that you have checked the box to include both images and titles in the grid, and that the document title links to the single document page. (You can control this on the settings page.)
Code snippet
Add the below code snippet to your site. If you're not sure how to use the following code snippet, then see our guide on how to add code snippets.
add_action('wp_footer', function() {
?>
<script>
jQuery(document).ready(function($) {
$(document).on('click', '.dlp-grid-card .dlp-grid-card-featured-img img', function(e) {
e.preventDefault();
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');
}
});
$(document).on('mouseenter', '.dlp-grid-card .dlp-grid-card-featured-img img', function() {
$(this).css('cursor', 'pointer');
});
});
</script>
<?php
}, 100);
Result
After activating the snippet:
- Clicking the grid image opens the single document page in a new tab.
- Users get a clear visual cue since the cursor changes on hover.
- It applies to all Document Library Pro grids on the site.
- If the title is hidden or not linked, then the image will not be clickable either.
If searching the knowledge base hasn't answered your question, please contact support.