How to make entire masonry card into a link, instead of only the image.
Permalink Browser Info Environment
I need the entire masonry card to be the link, not just the image. As of right now the image is the only part that you can click to get to the appropriate page. I need it to take them to the page if they click anywhere in the masonry card, or at the very least I need the text to also be a link to the appropriate page.
| Type: | Ticket |
|---|---|
| Status: | Archived |
These solutions make the whole card clickable with the little hand icon, but clicking doesn't do anything unless the image is clicked. This is only giving the illusion that the whole card is clickable. I tried both options you presented and they both did the same thing. Surely there's some little tweak to make this work. I'm working with page lists and topics for my galleries, if that helps troubleshoot.
I followed your instructions exactly, I even tried straying from them a little bit afterwards and couldn't find any way to make the clickable card actually redirect. Again, the image is still the only part that redirects to the page.
I followed your instructions exactly, I even tried straying from them a little bit afterwards and couldn't find any way to make the clickable card actually redirect. Again, the image is still the only part that redirects to the page.
I have updated code snippets in my initial post to work with galleries based on pagelist.
Now, it will also exclude tags under image description from triggering lightbox/opening links.
Now, it will also exclude tags under image description from triggering lightbox/opening links.
Thank you! That did the trick. I even tested to make sure it didn't cause any issues somewhere else and couldn't find anything. This works.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
1. Copy content of
packages\grand_gallery\blocks\grand_gallery\view.phpinto (create masonry_cards_custom.php file)
packages\grand_gallery\blocks\grand_gallery\templates\masonry_cards_custom.php2. Go to your site and switch to edit mode.
3. Change block template to "Masonry Cards Custom".
4. Edit block, choose "Settings" tab. For "Basic Template (only for Custom Templates)" field set "masonry_cards".
5. Now open your custom .php fle in text editor
packages\grand_gallery\blocks\grand_gallery\templates\masonry_cards_custom.php
and paste this code at the bottom of file
<script> $(function() { $('.gg-container-<?php echo $bID; ?>').on('click', '.gg-item-card-text', function(e) { if ($(e.target).is('.js-gg-item-card-text-tag')) { return; } $(this).closest('.gg-item-outer').find('.gg-item')[0].click(); }); }); </script> <style> .gg-container-<?php echo $bID; ?> .gg-item-card-text { cursor: pointer; } </style>Alternatively, you can move this code outside of template, if you don't want to have <style> and <script> tags in there (which is probably a better idea in the end).
In block "Settings" tab, you can add you custom css class, for example:
And then paste this code anywhere you want (css files usually should be placed in <head> and js files before closing </body> tag):