0
Welcome Guest! Login
0 items Join Now

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

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

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

    Posted 11 years 1 month ago
    • Don't be fooled by the title you've found the right place for my compendium of Gantry 5 artilces and modification guides.
    • Last Edit: 8 years 3 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: AMP Series

    Posted 8 years 10 months ago
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: AMP Series - Vertical Menu particle for Gantry 5 template

    Posted 8 years 9 months ago
    • There have been some user requests for a Gantry 5 vertical menu with styling. With the advent of Kraken we now have such a menu. This guide will show you how to integrate my implementation of it into any other Gantry 5 template. I've also added a little 3D transform to the page-surround when the Vertical Menu opens.

      In this guide I wull be integrating the Kraken menu into our Salient template.

      If you don't have this folder-path (\custom\particles) then create it [JOOMLA-ROOT]\templates\rt_templateName\custom\particles likewise if you don't have the folder-path (custom\scss\salient) then create it [JOOMLA-ROOT]\templates\rt_templateName\custom\scss\salient

      Then from The Kraken template [JOOMLA-ROOT]\templates\rt_kraken\particles copy these two files to our \custom\particles folder:

      sidemenu.html.twig
      sidemenu.yaml

      I've attached the Kraken files in a ZIP file below. Just extract them and then upload them to [JOOMLA-ROOT]\templates\rt_templateName\custom\particles

      Then in your [JOOMLA-ROOT]\templates\rt_templateName\custom\scss\salient create a file called "_sidemenu.scss"

      Next paste this code into that file:
         /*************************/
          /* VERTICAL MENU styling */
          /*************************/
       
      /** Large Mode **/
      @media only screen and (min-width: 75rem) {
        #g-vmenu .g-main-nav .g-toplevel > li {
          margin: 0.5rem 0;
          display: block;
          width: 50%;
        }
        #g-vmenu .g-main-nav {
            margin: 0;
        }
        #g-vmenu .g-main-nav .g-toplevel > li > .g-menu-item-container {
            padding: 0.2345rem 0;
        }
        .dir-ltr #g-vmenu .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {
            right: 0.5rem;
        }
        #g-vmenu .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {
            vertical-align: top;
            position: absolute;
        }
        #g-vmenu .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator:after {
            content: "\f105";
            opacity: 0.5;
        }
        .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator:after {
            width: 1.25rem;
            padding: 0.25rem;
            height: 1.25rem;
        }
        .dir-ltr #g-vmenu .g-main-nav .g-dropdown {
            left: 100%;
        }
        #g-vmenu .g-main-nav .g-dropdown {
            background: #01b2ff;
            border: 1px solid transparent;
            border-radius: 0;
            top: -0.75rem;
        }
        #g-vmenu .g-main-nav .g-toplevel > li .g-menu-item-content {
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            width: 80%;
        }
        #g-vmenu .g-main-nav .g-toplevel > li > .g-menu-item-container:hover {
            color: #9f1012;
        }
        body#g-offcanvas-sidemenu #g-offcanvas {
            width: 20rem;
            background: #03345B;
        }
        .g-offcanvas-open#g-offcanvas-sidemenu {
            position: fixed;
        }
        .g-offcanvas-open .g-offcanvas-left #g-page-surround {
          transform: perspective(1500px) translate3d(184px, 0, -95px) rotateY(-20deg) !important;
          height: 100vh !important;
          width: 100vw !important;
          overflow-y: hidden !important;
          box-sizing: border-box !important;
          background: rgba(128, 128, 128, 1) !important;
        }
        .g-offcanvas-open .g-nav-overlay, .g-menu-overlay {
            background: rgba(128, 128, 128, .5) !important;
        }
      }
      /** Small Screen Mobile Modes **/
      @media only screen and (max-width: 47.9375rem) {
        #g-navigation .g-block.size-65 {
          display: none;
        }
      }

      If you don't have the folder-path (custom\scss\) then create it [JOOMLA-ROOT]\templates\rt_templateName\custom\scss\. Inside this folder create a file called "custom.scss"
      Inside it paste this code:
          @import "dependencies";
          @import "salient/sidemenu";

      Now we're ready to place our SideMenu particle in our Outline(s) -> Layout Manager.
      We will be using the OffCanvas Section.
      This image is hidden for guests.
      Please log in or register to see it.


      Follow these steps:
      - Use the "+" to add a Grid to the Section.
      - Drag the SideMenu Particle to your newly created Grid.
      - If necessary grab the Left most edge of the Grid/Particle and drag up till you see a Black line appear just below the Mobile Menu Particle. The Black line indicates you can drop the SideMenu Particle at this point.
      - If you have any other particles that are below the SideMenu you may want to shut them off (Green Power toggle -> slide to Red)
      - Click the Edit Gear at the RH top of the SideMenu particle to open the particles modal window.
      - Go to the BLOCK tab and for #2 -> CSS-ID -> enter "g-vmenu" then for #3 -> CSS Classes -> "vmenu"
      - Apply & SAVE
      - Then go to the Page Settings Tab -> Body Attributes -> Body ID -> enter in "g-offcanvas-sidemenu"
      This image is hidden for guests.
      Please log in or register to see it.


      - Apply & SAVE

      Now your Front End will have a an Open Side Menu:
      This image is hidden for guests.
      Please log in or register to see it.


      Then click the OffCanvas Toggle and the Front End changes to this:
      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 8 years 2 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: 1-AMP Series - Hyperlinked image for Ethereals ImageBlock

    Posted 8 years 9 months ago
    • There are some really cool particles being introduced with our Gantry 5 templates and one of my favourites is Ethereals ImageBlock.
      This little guide will help you make that image Hyperlinked. Again thanks to my TwigGuru Djamil ;) for his guidance.

      If you don't have this folder-path (\custom\particles) than create it [JOOMLA-ROOT]\templates\rt_ethereal\custom\particles

      Then from [JOOMLA-ROOT]\templates\rt_ethereal\particles copy these two files to our \custom\particles folder:

      imageblock.html.twig
      imageblock.yaml

      Now lets edit imageblock.yaml so find this section (starting around line#36):
      listgriditems:
        type: collection.list
        array: true
        label: Content Lists
        description: Create each item to appear in the content row.
        value: title
        ajax: true
      
        fields:
          .title:
            type: input.text
            label: Title
            skip: true
          .image:
            type: input.imagepicker
            label: Image

      and change that to:
      listgriditems:
        type: collection.list
        array: true
        label: Content Lists
        description: Create each item to appear in the content row.
        value: title
        ajax: true
      
        fields:
          .title:
            type: input.text
            label: Title
            skip: true
          .site:
            type: input.url
            label: Url
            description: Url for the image. Leave empty to go to home page.
          .image:
            type: input.imagepicker
            label: Image

      where we've added:

      .site:
      type: input.url
      label: Url
      description: Url for the image. Leave empty to go to home page.


      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>

      Save the file and lets go to Template Manager. Select the Outline -> Layout Manager where the ImageBlock particle will reside.
      Once the particle is placed lets set it up:
      We setup the first part as normal:
      This image is hidden for guests.
      Please log in or register to see it.



      Now lets set up the "Content Lists":
      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: 8 years 3 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: 2-AMP Series - Info List particle

    Posted 8 years 9 months ago
    • When a user clicks a hyperlinked element in some of our particles they find that the target destination (New OR Parent tab|window) is hard-coded.
      This little guide should help you to modify the particle to add a target destination choice field of "Self OR New Window" in the setup window.

      For this guide I'll be using the InfoList particle which has a hardcoded <a target="_blank" href.... code line.

      We ALWAYS recommend to our members NEVER modify an ORIGINAL file!!!. So if you don't have this folder setup on your server than please duplicate it.
      You need to have [JOOMLA-ROOT]/templates/rt_templateName/custom/particles setup.
      This image is hidden for guests.
      Please log in or register to see it.


      From your [JOOMLA-ROOT]\templates\rt_templateName\particles copy infolist.yaml and infolist.html.twig to your newly created [JOOMLA-ROOT]/templates/rt_templateName/custom/particles folder.

      In your [JOOMLA-ROOT]/templates/rt_templateName/custom/particles folder, using a text editor like Notepad++ , open infolist.yaml to edit.
      This image is hidden for guests.
      Please log in or register to see it.


      On the left is the file in it's original format. To the "fields:" section code block we'll be adding:
      .target:
        type: select.selectize
        label: Target
        description: Target browser window when item is clicked.
        placeholder: 'Select...'
        default: _blank
        options:
            _parent: Self
            _blank: New Window""

      so it looks like the right hand side of the image.

      In your [JOOMLA-ROOT]/templates/rt_templateName/custom/particles folder, using a text editor like Notepad++ , open infolist.html.twig to edit.
      This image is hidden for guests.
      Please log in or register to see it.


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



      On the upper panel of both screenshots is the file in it's original format. We'll be adding:
      target="{{ infolist.target|default('_blank')|e }}"

      to
      <a href="{{ infolist.link|e }}">

      so it looks like the lower panels of both screenshots:
      <a target="{{ infolist.target|default('_blank')|e }}" href="{{ infolist.link|e }}">

      Now when you open the particle you will see:
      This image is hidden for guests.
      Please log in or register to see it.


      Select "Self OR New Window" to define the target destination of your link.
    • Last Edit: 8 years 1 month ago by DanG.
    • The following users have thanked you: iain, Samuel Jackson, Manie

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: 3-AMP Series - Content List particle

    Posted 8 years 9 months ago
    • When a user clicks a hyperlinked element in some of our particles they find that the target destination (New OR Parent tab|window) is hard-coded.
      This little guide should help you to modify the particle to add a target destination choice field of "Self OR New Window" in the setup window.

      For this guide I'll be using the Content List particle which has its link fields hardcoded to open in the same window or tab.

      We ALWAYS recommend to our members NEVER modify an ORIGINAL file!!!. So if you don't have this folder setup on your server than please duplicate it.
      You need to have this folder [JOOMLA-ROOT]\templates\rt_templateName\custom\particles created.
      This image is hidden for guests.
      Please log in or register to see it.


      From your [JOOMLA-ROOT]\templates\rt_templateName\particles copy contentlist.yaml and contentlist.html.twig to your newly created [JOOMLA-ROOT]\templates\rt_templateName\custom\particles folder.

      In your [JOOMLA-ROOT]\templates\rt_templateName\custom\particles folder, using a text editor like Notepad++ , open contentlist.yaml to edit.

      There are two parts to the Content List particle, the Content Text area and beneath that the Content Lists. For these two sections of the YAML file we'll be modifying the existing:
      <a href="

      to look like this:
      <a target="{{ someIdentifier.target|default('_blank')|e }}" href="


      On the left is the Content Text section in it's original format. To the "fields:" section code block we'll be adding:
      target:
        type: select.selectize
        label: Target
        description: Target browser window when item is clicked.
        placeholder: 'Select...'
        default: _blank
        options:
            _parent: Self
            _blank: New Window""
      This image is hidden for guests.
      Please log in or register to see it.


      so it looks like the right hand side of the image.

      Again, on the left is the Content List section in it's original format. To the "fields:" section code block we'll be adding:
      .target:
        type: select.selectize
        label: Target
        description: Target browser window when item is clicked.
        placeholder: 'Select...'
        default: _blank
        options:
            _parent: Self
            _blank: New Window""
      This image is hidden for guests.
      Please log in or register to see it.


      so it looks like the right hand side of the image.

      In your [JOOMLA-ROOT]\templates\rt_templateName\custom\particles folder, using a text editor like Notepad++ , open contentlist.html.twig to edit.

      On the screenshot is the file in it's original format. We'll be adding:
      target="{{ particle.target|default('_blank')|e }}"

      to
      <a href="{{ particle.link|e }}">
      This image is hidden for guests.
      Please log in or register to see it.


      so it looks like the lower panel top code line of the screenshot with the full line below:
      {% if particle.readmore %}<a target="{{ particle.target|default('_blank')|e }}" href="{{ particle.link|e }}" class="button {{ particle.readmoreclass|e }}">

      Then in the lower code line of this screenshot we'll be adding:
      target="{{ listgriditem.target|default('_blank')|e }}">

      to
      <a href="{{ listgriditem.link|e }}">

      so it looks like the lower panel lower code line of the screenshot with the full line below:
      <a target="{{ listgriditem.target|default('_blank')|e }}" href="{{ listgriditem.link|e }}">

      Now when you open the particle you will see:
      This image is hidden for guests.
      Please log in or register to see it.


      When you create a Contentlist item the Target Selector is here:
      This image is hidden for guests.
      Please log in or register to see it.


      Select "Self OR New Window" to define the target destination of your link.
    • Last Edit: 8 years 1 month ago by DanG.
    • The following users have thanked you: Samuel Jackson

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: 4-AMP Series - Promo Image particle

    Posted 8 years 8 months ago
    • This little guide will help you make that Promo Image particle image Hyperlinked. For this guide I've used our Ethereal 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:

      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 up the Promo Image "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: 8 years 3 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Gantry 4 layout in Gantry 5

    Posted 8 years 8 months ago
    • For those of you trying out Gantry 5 for the first time, you have the option of selecting a variety of "presets" that are pre-configured layouts for the most popular configuration of module positions.
      This image is hidden for guests.
      Please log in or register to see it.



      You can access this building start point by going to the Layout Manager in the Outline your using and then clicking, in the upper RH, the LOAD button. You can then select a Preset layout that will configure for you the module positions, in Gantry 5 these are now Sections & Rows, to be used in your Outline. You can alternatively select some pre-configured Outlines from the existing template Outlines.
      This image is hidden for guests.
      Please log in or register to see it.



      For those of you that think you might miss the old Gantry 4 layout we have included that for you as a pre-configured layout. In Gantry 5 this version of the Gantry 4 module position's is enhanced so that you have lost nothing.

      Thanks to Kat this is a representation of the Gantry 4 module position's in the Gantry 5 layout selection:

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

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

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 8 years 2 months ago by DanG.
    • The following users have thanked you: neuclix

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Integrate Ethereal's ImageBlock particle to other Templates

    Posted 8 years 8 months ago
    • Ethereal has a pretty cool ImageBlock particle. In this guide we'll integrate that into the Callisto template. The same process would actually be used for any Gantry 5 template. I'd like to thank our guru Djamil for the guidance in writing this guide :cheer:

      Extract out from the attached particles.zip the two files:
      imageblock.html.twig and
      imageblock.yaml

      These files originally came from [JOOMLA-ROOT]\templates\rt_ethereal\particles

      Upload the files to:
      This image is hidden for guests.
      Please log in or register to see it.


      the folder -> [JOOMLA-ROOT]\templates\rt_callisto\custom\particles.
      If you don't have the folders custom\particles on your server you'll have to create them.


      Extract out from the attached scss.zip the three files:
      _imageblock.scss and
      _particlemixins.scss
      _listgrid.scss

      These files originally came from [JOOMLA-ROOT]\templates\rt_ethereal\scss\ethereal

      Upload the files to:
      This image is hidden for guests.
      Please log in or register to see it.


      the folder -> [JOOMLA-ROOT]\templates\rt_callisto\custom\scss.
      If you don't have the folders custom\scss on your server you'll have to create them.

      In your [JOOMLA-ROOT]/templates/rt_callisto/custom/scss/custom.scss (this is a link) file add this:
      @import "dependencies";
      @import "listgrid";
      @import "imageblock";

      In Template Manager for the Outline -> Layout Manager you're using you'll see in the LH column a new particle -> ImageBlock. Drag & Drop this to the location to be used.
      This image is hidden for guests.
      Please log in or register to see it.


      Click on the gear icon to setup the ImageBlock particle:
      This image is hidden for guests.
      Please log in or register to see it.


      Save the layout and then go to the BASE OUTLINE -> Styles -> click RECOMPILE CSS. Once this is done you will see this in your Front End:

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 7 years 3 months ago by MrT. Reason: Removed dead link
    • The following users have thanked you: Laurent BRIERE

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Integrate Ethereal's ImageBlock particle to other Templates

    Posted 8 years 8 months ago

Time to create page: 0.119 seconds