5-AMP Series - Contact Map particle
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
This little guide will help you make that Contact Map particle image Hyperlinked. For this guide I've used our Salient template but it will work with any Gantry 5 template.
If you don't have this folder-path (\custom\particles) than create it [JOOMLA-ROOT]\templates\rt_templateName\custom\particles
Then from [JOOMLA-ROOT]\templates\rt_templateName\particles copy these two files to our \custom\particles folder:
contact.html.twig
contact.yaml
Now lets edit contact.yaml so find this section (starting around line#98):
.left: type: input.text label: Left Position description: Set marker position from the left in rem, em, or px unit values default: "170px" pattern: '\d+(\.\d+){0,1}(rem|em|ex|ch|vw|vh|vmin|vmax|%|px|cm|mm|in|pt|pc)'
and change that to:
.left: type: input.text label: Left Position description: Set marker position from the left in rem, em, or px unit values default: "170px" pattern: '\d+(\.\d+){0,1}(rem|em|ex|ch|vw|vh|vmin|vmax|%|px|cm|mm|in|pt|pc)' .link: type: input.url label: Url description: Url for the image. Leave empty to go to home page.
where we've added:
.link:
type: input.url
label: Url
description: Url for the image. Leave empty to go to home page.
Now we edit contact.html.twig so find this code, around Line#9:
<div class="g-contact-map" style="background: url('{{ url(map.img)|e }}') no-repeat; min-height: {{ map.height|e }}"> {% if map.overlay %} <div class="g-contact-map-overlay"></div> {% endif %} {% if map.marker %}
and we'll change that line to:
<div class="g-contact-map" style="background: url('{{ url(map.img)|e }}') no-repeat; min-height: {{ map.height|e }}"> <a style="min-height: 400px; display: block;" href="{{ map.link|e }}"></a> {% if map.overlay %} {% endif %} {% if map.marker %}
Save the file and lets go to Template Manager. Select the Outline -> Layout Manager where the Contact Map particle will reside.
Once the particle is placed lets set up the Contact Map "URL" link:
This image is hidden for guests.
Please log in or register to see it.
You will see the new URL field coming from our modified YAML file. Place your link and then SAVE.
Now on the Front End you will see the image has becoming hyperlinkable and you can see the URL link at the bottom of my Chrome browser window.
This image is hidden for guests.
Please log in or register to see it.
ENJOY. - Last Edit: 9 years 1 month ago by DanG.
-
The following users have thanked you: Atti, Amanda Doane, Matt, anitaweb, Beginner
-
-
-
- Atti
- Jr. Rocketeer
- Posts: 36
- Thanks: 1
-
Excellent solution. There is one problem to solve: The "Headline" and the "Tile Bottom" are links as well and they go to the home page. So if someone by chance clicking on the title or the headline goes nowhere. is there a way to disable the link option for the title and headline or even better to go to the same destination as the image.
Thanks very much: M -
The following users have thanked you: DanG
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Attila Ajtai wrote:
Excellent solution. There is one problem to solve: The "Headline" and the "Tile Bottom" are links as well and they go to the home page. So if someone by chance clicking on the title or the headline goes nowhere. is there a way to disable the link option for the title and headline or even better to go to the same destination as the image.
Thanks very much: M
I'll tackle those tomorrow.
-
-
-
- David B Anson
- Sr. Rocketeer
- Posts: 244
- Thanks: 2
-
Dan
I followed your instuctions last week on how to introduce the ImageBlock to the Callisto template which worked succesfully and then saw this tutorial on how to hyperlink the image so tried it out and now my page here is totally screwed up. I tried reversing all the changes (I had kept old copies of the YAML and twig files), and recompiled the CSS but still I cannot seem to get back to where it was before I made these changes. Is there something else I should do?
Also, is there some documentation accompanying the ImageBlock particle - e.g. how do I get the various text elements to be hypertext links?
Thanks.
David - Last Edit: 9 years 6 months ago by David B Anson.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
David B Anson wrote:
I followed your instuctions last week on how to introduce the ImageBlock to the Callisto template which worked succesfully and then saw this tutorial on how to hyperlink the image so tried it out and now my page here is totally screwed up.
Actually I hadn't realized till much later that both of thos mods were for the same ImageBlock particle
Okay so your issue - first thing, this is crucial!!! - when doing mods like this ALWAYS turn OFF all caching and compression schemes. So please turn OFF RokBooster so I can see your original code.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Attila Ajtai wrote:
Excellent solution. There is one problem to solve: The "Headline" and the "Tile Bottom" are links as well and they go to the home page. So if someone by chance clicking on the title or the headline goes nowhere. is there a way to disable the link option for the title and headline or even better to go to the same destination as the image.
Thanks very much: M
Thanks for the heads up. I've edited my guide so that ALL link fields will take you to the URL you defined for the image.
-
-
-
- David B Anson
- Sr. Rocketeer
- Posts: 244
- Thanks: 2
-
Dan
I had forgotten I had installed RokBooster, sorry. Having turned it off and cleared all the caches everything is back to normal. I thought I was losing the plot with being able to revert changes.
David
-
-
-
- David B Anson
- Sr. Rocketeer
- Posts: 244
- Thanks: 2
-
Dan
Thanks for this but I think there is an unintentional mistake in your editing for line 23, should it not be:
<span class="g-imageblock-title"><a href="{{ url(listgriditem.site | default(gantry_base)) }}">{{ listgriditem.titlebottom|raw }}</a></span> -
The following users have thanked you: DanG
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
David B Anson wrote:
Dan
Thanks for this but I think there is an unintentional mistake in your editing for line 23, should it not be:
<span class="g-imageblock-title"><a href="{{ url(listgriditem.site | default(gantry_base)) }}">{{ listgriditem.titlebottom|raw }}</a></span>
Corrected, thanks for the pilot-eyes
-
-
-
- David B Anson
- Sr. Rocketeer
- Posts: 244
- Thanks: 2
-
Dan
I owed you one for the RokBooster faux-pas
David
-
Time to create page: 0.070 seconds