0
Welcome Guest! Login
0 items Join Now

5-AMP Series - Contact Map particle

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

    Re: 5-AMP Series - Contact Map particle

    Posted 5 years 1 week ago
    • 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: 4 years 7 months ago by DanG.
    • The following users have thanked you: Atti, Amanda Doane, Matt, anitaweb, Beginner

    • Atti's Avatar
    • Atti
    • Jr. Rocketeer
    • Posts: 36
    • Thanks: 1

    Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

    Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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.
  • Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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: 5 years 1 week ago by David B Anson.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

    Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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 :rolleyes:

      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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

    Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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.
  • Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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
  • Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

    Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • 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 ;)
  • Re: dang!!...where was that guide now??

    Posted 5 years 1 week ago
    • Dan

      I owed you one for the RokBooster faux-pas

      David

Time to create page: 0.123 seconds