How to add link to images in the JAC module in 't3-mast-top' position

cemsdb

How does one make the images in the JAC module (in 't3-mast-top' position) have the same link as their related button url?

saguaros

cemsdb Hi

I updated this snippet of code:

<?php if($helper->get('data.img-icon', $i)) : ?>
<div class="img-icon img-icon-top">
<?php if($helper->get('data.btn-link', $i)) : ?><a href="<?php echo $helper->get('data.btn-link', $i) ?>"><?php endif; ?>
	<img src="<?php echo $helper->get('data.img-icon', $i) ?>" alt="<?php echo $helper->get('data.title', $i) ?>" />
<?php if($helper->get('data.btn-link', $i)) : ?></a><?php endif; ?>
</div>
<?php endif ; ?>

in this file: /templates/ja_brickstore/acm/features-intro/tmpl/style-1.php

Kindly check.

cemsdb

saguaros Hi Saguaros, thank you, that almost worked! Alas, only the images on the left side items are working. The right side items' images have no links.

I'm not sure it's actually related to what side they're at, as when the screen is small and they're all on the same location (centered, as opposed to right or left), the same thing happens (only some items have image links). It's probably being influenced by item order or style, or else.

Also, is there a way to make the item-button change color while hovering its related image (the same as if hovering the button itself)?

saguaros

This module divides into left/right columns, I updated both and there should be links for all images now.

Kindly check.

cemsdb

saguaros Hi Saguaros, thanks, that worked great!

Did you edit the same file? What additional snipped of code did you add for the right columns?

Plus, is there a way to make the buttons change color when the images are hovered (the same as hovering the buttons themselves)?

saguaros

cemsdb Yes, I made the same change in the same file above.

For the hover color, try this:

.acm-features.style-1 .features-item-col:hover .features-item-inner .btn-border.btn-inverse {
    background: #ffffff;
    color: #272727;
}

.acm-features.style-1 .features-item-col:hover .features-item-inner .btn-border {
    background: #272727;
    color: #ffffff;
}

cemsdb

saguaros Hi Saguaros, thanks, that almost worked. Alas, the code you provided is causing both items on the left to hover at the same time. Is there a way to make each one hover independently, depending on where the cursor is?

Plus, to help other Joomlart members it might be worthwhile for post an update of the first code you provided (which includes both sides)

saguaros

This file is on your site already: /templates/ja_brickstore/acm/features-intro/tmpl/style-1.php

style-1php.zip

1kB

and I updated above css code a bit:

.acm-features.style-1 .features-item.odd:hover  .features-item-inner .btn-border.btn-inverse,
.acm-features.style-1 .features-item.even:hover  .features-item-inner .btn-border.btn-inverse {
    background: #ffffff;
    color: #272727;
}

.acm-features.style-1 .features-item.odd:hover  .features-item-inner .btn-border,
.acm-features.style-1 .features-item.even:hover  .features-item-inner .btn-border {
    background: #272727;
    color: #ffffff;
}

cemsdb

saguaros Thanks again Saguaros, that worked great!

*The feature in this post might be considered a good addition to future template updates (or specifically the JAC module). Customers would likely appreciate a "link image" button in the module 🙂