0
Welcome Guest! Login
0 items Join Now

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

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

    Posted 4 years 9 months ago
    • I used this tutorial to make changes to the Content List particle - all working very well so thanks.
      But I would like to do the same to the readmore link - have it open in a new window. I'm using the content list particle to display portfolio items and I want the readmore to go to the live site, but don't want the visitor to leave my site. Tried to follow the same pattern as that for the content list but it broke when I added the .target bit to the readmore bit in the yaml file.

      Can you help?
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

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

    Posted 4 years 9 months ago
    • Linda Neale wrote:
      I used this tutorial to make changes to the Content List particle - all working very well so thanks.
      But I would like to do the same to the readmore link - have it open in a new window. I'm using the content list particle to display portfolio items and I want the readmore to go to the live site, but don't want the visitor to leave my site. Tried to follow the same pattern as that for the content list but it broke when I added the .target bit to the readmore bit in the yaml file.

      Can you help?

      Please see the guide AMP Series - Content List particle
    • Last Edit: 4 years 7 months ago by DanG.
  • Re: dang!!...where was that guide now??

    Posted 4 years 9 months ago
    • Hello Dan, good afternoon, I am looking to see if you can help me please. I applied the fix for the horizontalmenu on my ambrosia template and I was able to modify the menu items, thanks for that btw. The problem I am having is that whatever I do I cannot get the menu's to show up on my home page, I've looked everywhere and cannot seem to make this happen, the menu's appear on every other page on our site except for on the homepage. Any help would be much appreciated. Thanks in advance.
      Great Day..
  • Re: dang!!...where was that guide now??

    Posted 4 years 9 months ago
    • I am trying to link the contact map image from a particle via this guide but the files do not match the files for the Salient template so I am not sure which files to modify! Is there a document for Salient? This might be simple, but I am very new to Gantry5 so any help is appreciated!
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

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

    Posted 4 years 9 months ago
    • Amanda Doane wrote:
      I am trying to link the contact map image from a particle via this guide but the files do not match the files for the Salient template so I am not sure which files to modify! Is there a document for Salient? This might be simple, but I am very new to Gantry5 so any help is appreciated!

      So you would be copying these 3 files from here:
      \templates\rt_salient\scss\salient\_contact.scss
      \templates\rt_salient\particles\salient\contact.html.twig
      \templates\rt_salient\particles\salient\contact.yaml

      to here:
      \templates\rt_templateName\scss\salient\contact.scss
      \templates\rt_templateName\particles\salient\contact.html.twig
      \templates\rt_templateName\particles\salient\contact.yaml
    • The following users have thanked you: Amanda Doane

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

    Posted 4 years 9 months ago
    • DanG wrote:
      Amanda Doane wrote:
      I am trying to link the contact map image from a particle via this guide but the files do not match the files for the Salient template so I am not sure which files to modify! Is there a document for Salient? This might be simple, but I am very new to Gantry5 so any help is appreciated!

      So you would be copying these 3 files from here:
      \templates\rt_salient\scss\salient\_contact.scss
      \templates\rt_salient\particles\salient\contact.html.twig
      \templates\rt_salient\particles\salient\contact.yaml

      to here:
      \templates\rt_templateName\scss\salient\contact.scss
      \templates\rt_templateName\particles\salient\contact.html.twig
      \templates\rt_templateName\particles\salient\contact.yaml

      Thank you for clarifying the files. Next question would be, what lines of code do I edit because they are not the same or easily identifiable (to me at least) than that of the tutorial in this thread.
  • Re: dang!!...where was that guide now??

    Posted 4 years 9 months ago
    • This is where I am getting lost: the contact.html.twig file I need to edit does not match up (well enough for me to figure it out) with these instructions.
      Now we edit imageblock.html.twig so find this code, around Line#15:

      <span class="g-imageblock-img"><img alt="image" src="{{ url(listgriditem.image)|e }}"/></span>


      and we'll change that line to:

      <span class="g-imageblock-img"><a href="{{ url(listgriditem.site | default(gantry_base)) }}"><img alt="image" src="{{ url(listgriditem.image)|e }}"/></a></span>


      then around Line#19 find:

      <span class="g-imageblock-title"><a href="">{{ listgriditem.headline|raw }}</a></span>


      and we'll change that line to:

      <span class="g-imageblock-title"><a href="{{ url(listgriditem.site | default(gantry_base)) }}">{{ listgriditem.headline|raw }}</a></span>


      lastly around Line#23 find:

      <span class="g-imageblock-title"><a href="">{{ listgriditem.titlebottom }}</a></span>


      and we'll change that line to:

      <span class="g-imageblock-title"><a href="{{ url(listgriditem.site | default(gantry_base)) }}">{{ listgriditem.titlebottom }}</a></span>

      My contact.html.twig file looks like:

      {% extends '@nucleus/partials/particle.html.twig' %}
      
      {% block particle %}
      
      	{% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %}
      
      	<div class="g-contact {{ particle.class|e }}">
      		{% set contactmap %}
      			{% for map in particle.maps %}
      			<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 %}
      				<div class="g-contact-map-marker" style="top: {{ map.top|e }};left: {{ map.left|e }}">
      					<i class="{{ map.icon|e }}"></i>
      				</div>
      				{% endif %}
      			</div>
      			{% endfor %}
      		{% endset %}
      		
      		{% if particle.mapposition == 'top' %}
      			{{ contactmap }}
      		{% endif %}
      		
      		{% for contactitem in particle.contactitems %}
      		<div class="g-contact-item">
      			{% if contactitem.icon %}<div class="g-contact-icon"><span class="{{ contactitem.icon }}"></span></div>{% endif %}
      			{% if contactitem.label %}<div class="g-contact-label">{{ contactitem.label|raw }}</div>{% endif %}
      			{% if contactitem.text %}<div class="g-contact-text">{{ contactitem.text|raw }}</div>{% endif %}
      		</div>
      		{% endfor %}
      		
      		{% if particle.mapposition == 'bottom' %}
      			{{ contactmap }}
      		{% endif %}
      	</div>
      
      {% endblock %}
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

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

    Posted 4 years 8 months ago
    • This little guide will help you make the Promo Image particles image Hyperlinked to a user defined URL. For this guide I'm using our Ethereal template but this works for 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:

      promoimage.html.twig
      promoimage.yaml

      Now lets edit promoimage.yaml so find this section (starting around line#18):
          title:
            type: input.text
            label: Title
            description: Customize the title text.
            placeholder: Enter title
      
          image:
            type: input.imagepicker
            label: Promo Image
            description: Select desired promo image.

      and change that to:
          title:
            type: input.text
            label: Title
            description: Customize the title text.
            placeholder: Enter title
      
          link:
            type: input.url
            label: Url
            description: Url for the image. Leave empty to go to home page.
            
          image:
            type: input.imagepicker
            label: Promo Image
            description: Select desired promo image.

      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 promoimage.html.twig so find this code, around Line#9:
      	<span class="g-promoimage-iconbutton {{ particle.iconbutton|e }}"></span>
          <div class="g-promoimage-caption">

      and we'll change that line to:
      	<span class="g-promoimage-iconbutton {{ particle.iconbutton|e }}"></span>
          <a href="{{ particle.link|e }}"><img src="{{ url(particle.image)|e }}" alt="{{ particle.title|e }}"></a>
          <div class="g-promoimage-caption">

      where we've added:


      <a href="{{ particle.link|e }}"><img src="{{ url(particle.image)|e }}" alt="{{ particle.title|e }}"></a>


      Save the file and lets go to Template Manager. Select the Outline -> Layout Manager where the Promo Image particle will reside.
      Once the particle is placed lets set it up:
      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.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

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

    Posted 4 years 8 months ago
    • Back to Deleted you go!
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

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

    Posted 4 years 8 months ago
    • Vee Burris wrote:
      Hello Dan, good afternoon, I am looking to see if you can help me please. I applied the fix for the horizontalmenu on my ambrosia template and I was able to modify the menu items, thanks for that btw. The problem I am having is that whatever I do I cannot get the menu's to show up on my home page, I've looked everywhere and cannot seem to make this happen, the menu's appear on every other page on our site except for on the homepage. Any help would be much appreciated. Thanks in advance.
      Great Day..

      Would you please create a Super Admin login for me and place it in the SECURE part of your Reply

      This image is hidden for guests.
      Please log in or register to see it.


      so that I can take a look.

Time to create page: 0.098 seconds