Target some JA_ACM (Gallery) links _blank and others _self?

synapsis

I'd like ONE item in my Gallery (ACM) module on the home page to link to a new window (target="_blank").

However, short of altering the html to force all of the blocks to open in a new tabs/windows, I can't see a way to accomplish this from anything in the support forums. This seems like an important function within any linking module, such as JA_ACM.

Please help me find a good solution. Thanks in advance for your swift assistance.

Matt

saguaros

synapsis

Hi Matt,

You mean that you want to add target blank to only 1 item in the slideshow instead of all items?

May I know which item you want to add? I think you can use JS to add this attribute.

synapsis

I would also like to know if it could be possible to make the entire image (not just the Masthead Title) a link, so they can click (or touch) a much larger image than just the small piece of text to get to the desired page. On mobile, those lines of text are quite small compared to the image they're on.

Thank you so much!

synapsis

Not the slideshow. The Gallery in position: content-mast-top.

I want to make some items in the Gallery open in new tabs (blank), and others to open in self.

Is there code I can insert into the Gallery module to accomplish this?

Thank you for getting to me so quickly.

saguaros

Hi synapsis

At the end of this file: /templates/ja_shoe/js/script.js

I added this code:

//Add target for ACM - Gallery
$('.acm-gallery .isotope-layout .item:nth-child(2) a').attr('target', '_blank');

It will help to add target blank attribute to the first item in the gallery.

To add the attribute to other specific item, you can change the child element selector: .item:nth-child(2)

You may wonder why this is the first item in backend but it uses .item:nth-child(2) selector. Because the output of this module on frontend, there must be a 'first' item (which is blank) so in order to update, you must use .item:nth-child(2)

Regards

synapsis

I would strongly suggest that you create a target selector (drop-down, etc) in the Gallery Module on the next update of that extension, please. This is something that should be available on every item, not just one in a specific position.

But for now, I GREATLY appreciate this custom fix, and I thank you for your effort and time. You've helped me a lot over the years I've been using Joomlart products. So thank you. Keep being awesome.

Matt

synapsis

I still hope it might be possible to make the entire image in the gallery linkable, not just the text overlay. This would be an improvement, especially for mobile users with small screens (and even smaller text links).

Thanks!

saguaros

synapsis

You can open this file:

/templates/ja_shoe/acm/gallery/tmpl/style-1.php

At approx line 46, you will see this line:

<img <?php if($helper->get ('gallery.img-mb', $i)) echo "class='hidden-xs'"?> src="<?php echo $helper->get ('gallery.img', $i) ?>" alt="">

change it to:

<?php if($helper->get ('gallery.link', $i)): ?>
	<a href="<?php echo $helper->get ('gallery.link', $i) ?>"><img <?php if($helper->get ('gallery.img-mb', $i)) echo "class='hidden-xs'"?> src="<?php echo $helper->get ('gallery.img', $i) ?>" alt=""></a>
<?php endif ; ?>

It looks like this:

synapsis

saguaros -- I wanted to thank you again for the above solution to my request. But, I seem to need a little more help. Due to the 'hidden-xs' class applied to this bit of code, it seems your solution to make the whole image linked to the article is prevented from working on mobile (small) screens. Any advice?

saguaros

synapsis

You can open the same file: /templates/ja_shoe/acm/gallery/tmpl/style-1.php

Look for this code:

<?php if($helper->get ('gallery.img-mb', $i)) :?>
	<img class="visible-xs" src="<?php echo $helper->get ('gallery.img-mb', $i) ?>" alt="">
<?php endif ;?>

change it to:

<?php if($helper->get ('gallery.img-mb', $i)) :?>
	<a href="<?php echo $helper->get ('gallery.link', $i) ?>">
	<img class="visible-xs" src="<?php echo $helper->get ('gallery.img-mb', $i) ?>" alt="">
	</a>
<?php endif ;?>

synapsis

Also, I'd like the red bar (subhead) under the main text headline to appear also on mobile screens -- not just on large ones. I'm hoping this is as easy as removing a hidden-xs in the gallery code somewhere also. I tried commenting out the echo hidden-xs above, but that just resulted in TWO images showing, instead? Unsure why.

saguaros

synapsis At this moment, as I can see that it's showing on desktop only, could you share screenshot?

synapsis

Thank you for getting back to me and for your solution.

You've solved the image-as-link issue. Works on all my devices regardless of screen width now. Perfect!

Is there any way this could be added to the Gallery module so that I won't have to worry about updates? I know that's a big request, but I think people will like having these options.

Now I just need to resolve the hidden-xs issue with the subhead issue. I want them to show on small screens also (as they contain important information). I will try to solve it first on my own. But please post a solution if you have one. I'll check back later in case I get stuck.

My sincere thanks, again. You rock.
Matt

saguaros

synapsis

You can override this way:

1 - Copy this folder: /templates/ja_shoe/acm/gallery/tmpl/
2 - Paste into this directory:

/templates/ja_shoe/local/acm/gallery/tmpl/

If the 'local' folder doesn't exist now, pls create it.

Next time, you can make change to this override file: /templates/ja_shoe/local/acm/gallery/tmpl/style-1.php

Your changes in this local folder will not be lost when updating new version of template.

About the 'hidden-xs', could you share screenshot of the subhead text that you're referring to?

synapsis

Okay... I've looked. I'm struggling to find where the hidden-xs call is located, so I can remove it. Please advise.

synapsis

saguaros

Hi synapsis

These belong to different module:

1 - File: /templates/ja_shoe/acm/slideshow/tmpl/style-owl.php

2 - File: /templates/ja_shoe/local/acm/gallery/tmpl/style-owl.php

I removed them for you.

Kindly check.

synapsis

Thank you. Any suggestions on the borders between gallery items?

saguaros

You can try this custom css:

.acm-gallery .isotope-layout .item {
    padding: 4px !important;
}