0
Welcome Guest! Login
0 items Join Now

Custom Responsive Grids for Gantry 5

  • Re: Custom Responsive Grids for Gantry 5

    Posted 3 years 7 months ago
    • Thank you! I try now. You solve a big problem to me, thanks a lot
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3225
    • Custom work done

    Re: Integrate Requiem's GridStatistic particle to other Templates

    Posted 3 years 7 months ago
    • Requiem introduced a GridStatistic particle. In this guide we'll integrate it into the Callisto template. This same process would actually be used for any Gantry 5 template.

      Extract out from the attached gridstatistic.zip the six files:
      gridstatistic.html.twig
      gridstatistic.yaml
      _gridstatistic.scss
      _particlemixins.scss
      odometer.js
      simplecounter.js
      typewriter.js

      These files originally came from [JOOMLA-ROOT]\templates\rt_requiem\...

      Upload the files to, if the folders don't exist then you will have to create them:
      gridstatistic.html.twig->[JOOMLA-ROOT]\templates\rt_callisto\custom\particles
      gridstatistic.yaml->[JOOMLA-ROOT]\templates\rt_callisto\custom\particles
      _gridstatistic.scss->[JOOMLA-ROOT]\templates\rt_callisto\custom\scss\requiem
      _particlemixins.scss->[JOOMLA-ROOT]\templates\rt_callisto\custom\scss
      odometer.js->[JOOMLA-ROOT]\templates\rt_callisto\custom\js
      simplecounter.js->[JOOMLA-ROOT]\templates\rt_callisto\custom\js
      typewriter.js->[JOOMLA-ROOT]\templates\rt_callisto\custom\js

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

      In this example I created my new GridStatistic particle in the Joomla Module Manager screen and assigned its module position to "showcase-a".
      This image is hidden for guests.
      Please log in or register to see it.


      In your Module Manager screen click "Edit Particle" to setup the GridStatistic 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.

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


      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.
    • The following users have thanked you: Randall Wood, Damir B.

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

    Re: G5 - Block Variations versus G4 Module Variations

    Posted 3 years 7 months ago
    • There have been quite a few Topics on Joomla module class suffixes and Gantry 5 Block Variations. Hopefully this Q & A session can shed some light on this issue.

      1 - How can I use a "Block Variations" as module class suffix ?

      Although they are similar functions, Gantry 5 Block Variations and Joomla module class suffix's are two different entities in our Gantry 5 templates.
      You can still use Joomla module class suffix's as we NEVER remove Joomla functionality but instead ALWAYS ADD to it.
      In the case of Gantry 5 for Joomla we have provided you a second option to apply styling to your modules, called the "Block Variation".
      Let's examine how Joomla and similarly our Gantry 4 templates handle a module class suffix, "box1", added to a Module.

      Joomla Protostar and Beez3 templates - module class suffix:
      moduletable box1 -> affects the module <div> block and Module-Title
      ..............
      .............
      custom box1 -> affects the content

      Joomla and a Gantry 4 template - module class suffix:
      rt-block box1 -> affects the module <div> block
      ..............
      .............
      custom box1 -> affects the content

      Joomla and a Gantry 5 template - module class suffix :
      moduletable box1g4 -> affects the module <div> block
      ..............
      .............
      custom box1g4 -> affects the content

      Joomla and a Gantry 5 template - Block Variation:
      g-block box1 -> affects the module <div> block
      ..............
      .............
      g-content -> affects the content

      *Note: the
      ..............
      .............
      represents the connection between the lower element which is a child of the parent element above it.

      So you can see that Joomla module class suffix's are alive and well in Gantry 5. It's just that instead of publishing Gantry 4 style module class suffix's we decided that it would be easier for a user to enter popularly used CSS styles from a Dropdown selection to be applied to the BLock -> content.


      2 - Is it necessary to use the Gantry 5 Layout Manager to add a "Block Variation" to a Module Position Particle ?

      Yes. Click the Cog icon to edit your Particle and select the "Block" Tab. Click on the "Variation" field and select from the Dropdown box.


      3 - How do I add a Joomla module class suffix to Gantry 5 ?

      Lets go through the steps of creating a Joomla module w/module class suffix and a Gantry 5 Module Position Particle using "Block Variation".

      In the Joomla Module Manager screen create Joomla Module of type "Custom HTML" and then entered my HTML content.
      This image is hidden for guests.
      Please log in or register to see it.


      In this example I created my own module position called "ModuleVariation" and assigned the module to that.

      Click on the Advanced tab and in the module class suffix field enter "box1g4" which I've used as the template is already using the class name "box1".
      This image is hidden for guests.
      Please log in or register to see it.


      Next we'll create our second Joomla module of type "Gantry 5 Particle".
      This image is hidden for guests.
      Please log in or register to see it.


      In this example I created my own module position called "BlockVariation" and assigned the module to that.
      To enter your content click on "Edit Particle" and in the modal window enter your HTML content.
      This image is hidden for guests.
      Please log in or register to see it.


      You'll notice that there is no BLOCK tab in the Particle Edit screen as the ONLY place you can manipulate a BLOCK is in the Layout Manager of an Outline.

      In the Joomla Module Manager screen you can now see your two new Joomla modules.
      This image is hidden for guests.
      Please log in or register to see it.


      Now that our Joomla modules are created we have to add them to our Gantry 5 layout. Go to your Outline -> Layout Manager -> Section you wish to use and then create two Grids to place your modules in.
      This image is hidden for guests.
      Please log in or register to see it.


      From the Left Hand Particle Picker column Drag over two Module Position Particles, one per Grid.
      Click on the Cog icon for the Gantry 5 Module Position Particle edit the title to something suitable. Then in the "Key" field enter the module position you assigned earlier to the module, in this case "BlockVariation".

      Now select the Block Tab and in the modal window that opens click on the "Variations" field and a Dropdown box will open. Select "box1" and then Apply and Save.

      Clear all your caches and go to your Front end and view the menu page.
      This image is hidden for guests.
      Please log in or register to see it.


      You will see your "box1" Block Variation in the HTML output and then see the two CSS code lines that style the text and background colour.

      At this point the Joomla module is using the "box1g4" Joomla module class suffix but has no styling attached to it. So lets clone our "box1" Block Variation.
      Using an Inspection Tool we can see that "color: #fff;" and "background: #0183a8;" are used to style our module.
      So we can simply create a module class suffix "box1g4" and assign those two Property:Values to it.
      Our code would then be:
      .box1g4 {
          color: #fff;
          background: #0183a8;
      }
      which we would add to our Custom CSS file.

      Clear caches and Refresh and now we see both our Joomla module class suffix and Gantry 5 Block Variation in effect.
      This image is hidden for guests.
      Please log in or register to see it.



      4 - I want to add a module on the right of the content (a Joomla article). Where is this Joomla content in the layout ?

      Please see the guide Adding Articles to Gantry 5 Templates and Adding Featured Articles to Gantry 5 Templates
      Our MainBody, MainBar and MainFeature BLOCKS(these vary with the Outline used) are commonly used to contain the Page Content Particle. Again depending on the Outline used you can insert a single or multiple module position Particle(s) to the Left or Right of the Page Content Particle.


      5 - Somewhere's is there a page showing all the positions ?

      Yes. If you look in the Documentation for the template,e.g. XENON, your using you will see these pages:
      Xenon: Front Page Layout
      Xenon: Default Page Layout


      6 - In the Gantry layout page, how can I see what modules are used and what I can remove ?

      The easiest way is to check the Documentation for the template and it will indicate all the USED module position and Gantry 5 Particles used in the RocketLauncher installation.
      If you are interested in a Module Position Particle and the Documentation can't help you then take note of the Title and module position names of the Module Position Particle your ineterested in and go to the Joomla Module Manager screen. Then look for the name or module position of your Module Position Particle to see if its currently in use.


      7 - Is it possible to remove everything in the Gantry layout for some pages, just keeping the header/mainmenu and footer.

      There is an easier way to minimize the module position Particles and direct Gantry 5 Particles in a Layout.
      In the Template Manager screen duplicate ANY Outline. Then edit that Outline to give it a name of your choosing. Go to the Layout Manager and then click the LOAD button in the upper RH corner and this open a modal window with a large array of "Presets and Outlines" options that can be used as Layouts for your Outline.
    • Last Edit: 3 years 7 months ago by DanG.
    • The following users have thanked you: Norm256

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

    Re: Adding Modules in Gantry 5

    Posted 3 years 6 months ago
    • In post Ambrosia Gantry 5 templates creating and adding modules to a menu page is no different than the method used in Gantry 4. These templates have the Outlines (templates) pre-filled with module position's which is identical to a Gantry 4 layout.

      Starting with Callisto and up to Ambrosia we had placed Gantry 5 Particles directly in the layout and this meant more often than not a reliance on multiple Outlines (templates).

      So lets compare module creation between Gantry 4 and Gantry 5 and see how easy this is.

      #1: Gantry 4 and Gantry 5:
      1. create an Article for your planned menu page
      2. create a menu item using your Article

      #2: Gantry 4:
      1. in your Joomla Module Manager screen create three modules - RokAjaxSearch, Custom HTML and a RokSprocket List
      2. assign each, respectively, to module position's showcase-a showcase-b showcase-c
      3. assign all the modules to your menu page
      4. clear all caches

      DONE!

      As I mentioned in Callisto to Ambrosia we have to create our own module position's in the layout as they weren't pre-filled in the RocketLauncher installation.
      So go to your Outlines Layout Manager:
      This image is hidden for guests.
      Please log in or register to see it.


      Now we need to Drag & Drop three module position Particles into our Showcase Section:
      This image is hidden for guests.
      Please log in or register to see it.


      Click the "COG" icon to edit the Particle
      This image is hidden for guests.
      Please log in or register to see it.
      and give it a name and in the KEY (module position) field enter the name of the module position you'll be using. In our case that would be showcase-a, showcase-b and showcase-c.

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



      #3: Gantry 5:
      1. in your Joomla Module Manager screen create three modules - RokAjaxSearch, Custom HTML and a Gantry 5 Particle
      2. assign each, respectively, to module position's showcase-a showcase-b showcase-c
      3. assign all the modules to your menu page
      4. clear all caches
      This image is hidden for guests.
      Please log in or register to see it.


      DONE!
    • Last Edit: 3 years 6 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3225
    • Custom work done

    Re: 6-AMP Series - ImageGrid Particle (Xenon) Two variations

    Posted 3 years 6 months ago
    • This particle will produce a RokBox'd modal window of the large version of the thumbnail when clicked.

      For Variation-1 we will change that behaviour so that clicking the thumb will take you to a URL with the target destination in the same window or a new one.

      The second Variation will open a RokBox of a link on the current page (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.

      Variation 1 & Variation 2 - the YAML file
      You need to have [JOOMLA-ROOT]/templates/rt_templateName/custom/particles and [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/xenon setup.
      This image is hidden for guests.
      Please log in or register to see it.


      From your [JOOMLA-ROOT]\templates\rt_templateName\particles copy imagegrid.yaml and imagegrid.html.twig to your newly created [JOOMLA-ROOT]/templates/rt_templateName/custom/particles folder.
      Then from [JOOMLA-ROOT]\templates\rt_templateName\scss\xenon copy _imagegrid.scss to your newly created [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/xenon folder.

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

      Find this code block:
            fields:
              .title:
                type: input.text
                label: Title
                skip: true
              .image:
                type: input.imagepicker
                label: Promo Image
                description: Select desired promo image.
              .caption:
                type: input.text
                label: Caption
                description: Customize the image caption.
                placeholder: Enter caption

      and we'll be adding:
              .link:
                type: input.text
                label: Link
              .target:
                type: select.select
                label: Target
                description: Target browser window when item is clicked.
                placeholder: 'Select...'
                default: _blank
                options:
                    _parent: Self
                    _blank: New Window

      so that your new code block looks like this:
            fields:
              .title:
                type: input.text
                label: Title
                skip: true
              .image:
                type: input.imagepicker
                label: Promo Image
                description: Select desired promo image.
              .link:
                type: input.text
                label: Link
              .target:
                type: select.select
                label: Target
                description: Target browser window when item is clicked.
                placeholder: 'Select...'
                default: _blank
                options:
                    _parent: Self
                    _blank: New Window
              .caption:
                type: input.text
                label: Caption
                description: Customize the image caption.
                placeholder: Enter caption
      You will now see the new options - Link and Target in the Particle item setup screen.

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


      Variation 1 - the TWIG file
      In your [JOOMLA-ROOT]/templates/rt_templateName/custom/particles folder, using a text editor like Notepad++ , open imagegrid.html.twig to edit.

      Find this code block:
      		<div class="g-imagegrid-wrapper {{ particle.cols|e }}">
      			{% for imagegriditem in particle.imagegriditems %}
      			    <div class="g-imagegrid-item">
      			        <a class="g-imagegrid-link" href="{{ url(imagegriditem.image)|e }}" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ imagegriditem.caption|raw }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>
      			    </div>	
      			{% endfor %} 
      		</div>

      and we'll be replacing:
      <a class="g-imagegrid-link" href="{{ url(imagegriditem.image)|e }}" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ imagegriditem.caption|raw }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>

      with this:
      <a class="g-imagegrid-link" target="{{ imagegriditem.target|default('_blank')|e }}" href="{{ imagegriditem.link|e }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>

      so that your new code block looks like this:
      		<div class="g-imagegrid-wrapper {{ particle.cols|e }}">
      			{% for imagegriditem in particle.imagegriditems %}
      			    <div class="g-imagegrid-item">
                    <a class="g-imagegrid-link" target="{{ imagegriditem.target|default('_blank')|e }}" href="{{ imagegriditem.link|e }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>
      			    </div>	
      			{% endfor %} 
      		</div>

      Variation 2 - the TWIG file

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

      Find this code block:
      		<div class="g-imagegrid-wrapper {{ particle.cols|e }}">
      			{% for imagegriditem in particle.imagegriditems %}
      			    <div class="g-imagegrid-item">
      			        <a class="g-imagegrid-link" href="{{ url(imagegriditem.image)|e }}" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ imagegriditem.caption|raw }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>
      			    </div>	
      			{% endfor %} 
      		</div>

      and we'll be replacing:
      <a class="g-imagegrid-link" href="{{ url(imagegriditem.image)|e }}" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ imagegriditem.caption|raw }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>

      with this:
      <a class="g-imagegrid-link" href="{{ imagegriditem.link|e }}?tmpl=component" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ imagegriditem.caption|raw }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>

      so that your new code block looks like this:
      		<div class="g-imagegrid-wrapper {{ particle.cols|e }}">
      			{% for imagegriditem in particle.imagegriditems %}
      			    <div class="g-imagegrid-item">
                    <a class="g-imagegrid-link" href="{{ imagegriditem.link|e }}?tmpl=component" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ imagegriditem.caption|raw }}"><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>
      			    </div>	
      			{% endfor %} 
      		</div>

      So if we set the contact page as our link you will see this:

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 3 years 5 months ago by DanG.
    • The following users have thanked you: Björn Hallier, Fitz

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

    Re: 7-AMP Series - Swiper Particle (Kraken)

    Posted 3 years 6 months ago
    • This little guide should help you to modify the Swiper particle to add a target destination choice field of "Self OR New Window" in the set-up window.

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


      These files originally came from [JOOMLA-ROOT]\templates\rt_kraken\...

      Upload the files to, if the folders don't exist then you will have to create them:
      swiper.html.twig->[JOOMLA-ROOT]\templates\rt_kraken\custom\particles
      swiper.yaml->[JOOMLA-ROOT]\templates\rt_kraken\custom\particles
      swiper.js->[JOOMLA-ROOT]\templates\rt_kraken\custom\js
      _swiper.scss->[JOOMLA-ROOT]\templates\rt_kraken\custom\scss\kraken

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

      Find this code block:
            fields:
              .image:
                type: input.imagepicker
                label: Image
                description: Select desired image.
              .subtitle:
                type: input.text
                label: SubTitle          
              .title:
                type: input.text
                label: Title
              .link:
                type: input.text
                label: Link
              .linktext:
                type: input.text
                label: Link Text       
              .desc:
                type: textarea.textarea
                label: Description
                description: Customize the description.
                placeholder: Enter short description

      and we'll be adding:
              .target:
                type: select.select
                label: Target
                description: Target browser window when item is clicked.
                placeholder: 'Select...'
                default: _blank
                options:
                    _parent: Self
                    _blank: New Window

      so that your new code block looks like this:
            fields:
              .image:
                type: input.imagepicker
                label: Image
                description: Select desired image.
              .subtitle:
                type: input.text
                label: SubTitle          
              .title:
                type: input.text
                label: Title
              .link:
                type: input.text
                label: Link
              .linktext:
                type: input.text
                label: Link Text       
              .target:
                type: select.select
                label: Target
                description: Target browser window when item is clicked.
                placeholder: 'Select...'
                default: _blank
                options:
                    _parent: Self
                    _blank: New Window
              .desc:
                type: textarea.textarea
                label: Description
                description: Customize the description.
                placeholder: Enter short description


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

      Find this code block:
      								{% if item.desc %}<div class="g-swiper-slide-content-desc">{{ item.desc|raw }}</div>{% endif %}		
      								{% if item.link %}<a class="g-swiper-slide-content-link button" href="{{ item.link|e }}">{{ item.linktext|raw }}</a>{% endif %}			            		
      			            	</div>			

      and we'll be replacing:
      <a class="g-swiper-slide-content-link button" href="{{ item.link|e }}">{{ item.linktext|raw }}</a>

      with this:
      <a class="g-swiper-slide-content-link button" target="{{ item.target|default('_blank')|e }}" href="{{ item.link|e }}">{{ item.linktext|raw }}</a>

      so that your new code block looks like this:
      								{% if item.desc %}<div class="g-swiper-slide-content-desc">{{ item.desc|raw }}</div>{% endif %}		
      								{% if item.link %}<a class="g-swiper-slide-content-link button" target="{{ item.target|default('_blank')|e }}" href="{{ item.link|e }}">{{ item.linktext|raw }}</a>{% endif %}                
      			            	</div>			

      You will now see the new options - Link and Target in the Particle item setup screen.

      This image is hidden for guests.
      Please log in or register to see it.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3225
    • Custom work done

    Re: Integrate Galatea's Owl Carousel particle to other Templates

    Posted 3 years 6 months ago
    • Galatea introduced the Owl Carousel particle. In this guide we'll integrate it into the Isotope template. This same process would actually be used for any Gantry 5 template.

      Extract out from the attached owlcarousel.zip the six files:
      owlcarousel.html.twig
      owlcarousel.yaml
      custom.scss
      owlcarousel.js

      These files originally came from [JOOMLA-ROOT]\templates\rt_galatea\...

      Upload the files to, if the folders don't exist then you will have to create them:
      owlcarousel.html.twig->[JOOMLA-ROOT]\templates\rt_isotope\custom\particles
      owlcarousel.yaml->[JOOMLA-ROOT]\templates\rt_isotope\custom\particles
      custom.scss->[JOOMLA-ROOT]\templates\rt_isotope\custom\scss
      owlcarousel.js->[JOOMLA-ROOT]\templates\rt_isotope\custom\js

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

      In this example I created my new owlcarousel particle in the Joomla Module Manager screen and assigned its module position to "slideshow".


      In your Module Manager screen click "Edit Particle" to setup the owlcarousel particle. The image location field I filled in with these locations:
      gantry-media://rocketlauncher/home/slideshow/owl/img-01.jpg
      gantry-media://rocketlauncher/home/slideshow/owl/img-02.jpg
      gantry-media://rocketlauncher/home/slideshow/owl/img-03.jpg

      Save the layout and then go to the BASE OUTLINE -> Styles -> click RECOMPILE CSS.

      In Template Manager for the Outline -> Layout Manager you're using you'll see in the LH column a new particle -> owlcarousel. Drag & Drop this to the location to be used, in this example I used "slideshow".

      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: 3 years 6 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3225
    • Custom work done

    Re: Integrate Galatea's Mosaic Grid particle to other Templates

    Posted 3 years 6 months ago
    • Galatea introduced the Owl Carousel particle. This is a complex particle as it needs CSS and JS support files to function. This makes it a prime example to show how to integrate particles from one Gantry 5 template to another.
      In this guide we'll integrate the Owl Carousel particle into the Isotope template. This same process would actually be used for any Gantry 5 template.

      Work-Flow for Particle migration:
      • You need a copy of the template than contains the CoolNew particle.
      • Copy the particles CoolNew.html.twig and CoolNew.yaml files to your TEMPLATE_DIR/custom/particles in your current template.
      • Copy any JS files with the file name CoolNew to the TEMPLATE_DIR/custom/js in your current template.
      • Copy any SCSS files with the file name CoolNew to the TEMPLATE_DIR/custom/scss in your current template.
      • Copy any CSS support files using their Folder/File name structure to the appropriately created override folder in your current template. In this case we're simply using the folder TEMPLATE_DIR/custom/css
      • Setup the CSS support files in your Outlines Global Page Settings screen. This is done in the Atoms section using the Custom CSS/JS atom.
      • Setup the current templates Javascript Framework (if needed) to match the setup in the template from where your migrating the CoolNew particle.

      Required files for migration from Galatea to Isotope.
      • PARTICLE files: owlcarousel.html.twig and owlcarousel.yaml.
      • PARTICLE Javascript file: owlcarousel.js.
      • PARTICLE SCSS file: _owlcarousel.scss *
      • Isotopes _typography.scss file
      • A custom.scss file that we need to create three @import statements.
      • Galatea SUPPORT files: animate.css and demo.css **

      Notes:
      * The _owlcarousel.scss file contains a call to a MIXIN that the Isotope template doesn't have. What I've done is to create a custom override for Isotopes _typography.scss file and add in the required line.
      ** I've renamed the demo.css file to demogalatea.css so as not to confuse it with Isotope's demo.css file
      These files originally came from [JOOMLA-ROOT]\templates\rt_galatea\... except for Isotopes _typography.scss file

      Custom folder locations for migrated Particle

      Upload the files to these folders and if the folders don't exist then you will have to create them:
      owlcarousel.html.twigcopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\particles
      owlcarousel.yamlcopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\particles
      owlcarousel.jscopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\js
      demo.csscopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\css\demogalatea.css
      animate.csscopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\css
      custom.scsscopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\scss
      _owlcarousel.scsscopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\scss
      \templates\rt_isotope\scss\configuration\_typography.scsscopy to<JOOMLA-ROOT>\templates\rt_isotope\custom\scss\configuration
      Once you've copied /templates/rt_isotope/scss/configuration/_typography.scss to the above custom location edit the file and add this:
      // Font Weight from Galatea    
      $font-weight-thin: 100;

      In your [JOOMLA-ROOT]/templates/isotope/custom/scss/custom.scss file
      Please see Adding a Custom Style Sheet
      @import dependencies;  
      //   Owl Carousel   
      @import owlcarousel;    

      SCSS is nice in that when using the @import command you don't need the preceding underscore and the file extension type. Our custom.scss will now call the appropriate SCSS file that the Owl Carousel requires.

      Owl Carousel Particle setup
      In this example I created my new owlcarousel particle in the Joomla Module Manager screen and assigned its module position to slideshow.
      This image is hidden for guests.
      Please log in or register to see it.


      In your Module Manager screen click Edit Particle to setup the owlcarousel particle.
      This image is hidden for guests.
      Please log in or register to see it.


      For the Owl Carousel Items collection image location field I used these locations:

      gantry-media://rocketlauncher/home/slideshow/owl/img-01.jpg
      gantry-media://rocketlauncher/home/slideshow/owl/img-02.jpg
      gantry-media://rocketlauncher/home/slideshow/owl/img-03.jpg


      I created the owl folder so as not to interfere with Isotopes image files.
      Save the layout and then go to the BASE OUTLINE Styles click RECOMPILE CSS.

      Layout Manager setup for the migrated particle
      In Template Manager for the Outline you're using go to the Layout Manager and you'll see in the LeftHand column a new particle owlcarousel. Drag & Drop this to the Section | Grid | Block location to be used, in this example I used the slideshow Section.
      This image is hidden for guests.
      Please log in or register to see it.


      Last we have to setup the support files in the Outlines Global Page Settings screen.
      This image is hidden for guests.
      Please log in or register to see it.


      Also required is to setup the Javascript Framework in our current template.
      This image is hidden for guests.
      Please log in or register to see it.


      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: 3 years 6 months ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3225
    • Custom work done

    Re: 8-AMP Series - Image Grid-7_column

    Posted 3 years 5 months ago
    • In this guide we will modify the Image Grid particle to be able to display SEVEN columns of content.

      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.

      the YAML file and SCSS
      You need to have [JOOMLA-ROOT]/templates/rt_templateName/custom/particles and [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/templateName/particles setup.

      From your [JOOMLA-ROOT]/templates/rt_templateName/particles copy imagegrid.yaml to your newly created [JOOMLA-ROOT]/templates/rt_templateName/custom/particles folder.

      Then from [JOOMLA-ROOT]/templates/rt_templateName/scss/templateName copy _imagegrid.scss to your newly created [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/templateName/particles folder.

      In your [JOOMLA-ROOT]/templates/rt_templateName/custom/particles folder, using a text editor like Notepad++ , open imagegrid.yaml to edit. Change the code block to look like this:
          cols:
            type: select.select
            label: Grid Column
            description: Select the grid column amount
            placeholder: 'Select...'
            default: g-imagegrid-2cols
            options:
              g-imagegrid-2cols: 2 Columns
              g-imagegrid-3cols: 3 Columns
              g-imagegrid-4cols: 4 Columns
              g-imagegrid-5cols: 5 Columns
              g-imagegrid-6cols: 6 Columns
              g-imagegrid-7cols: 7 Columns
      
          album:
            type: input.text
            label: Album Name
            description: Customize the album name.
            placeholder: Enter album name
      

      Next is the SCSS file so change your code block to look EXACTLY like this:
          .g-imagegrid-5cols {
              .g-imagegrid-item {
                  width: 20%;
                  @include breakpoint(tablet-range) {
                      width: 33.33333%;
                  }
                  @include breakpoint(mobile-only) {
                      width: 50%;
                  }
              }
          }
          .g-imagegrid-6cols {
              .g-imagegrid-item {
                  width: 16.66667%;
                  @include breakpoint(tablet-range) {
                      width: 33.33333%;
                  }
                  @include breakpoint(mobile-only) {
                      width: 50%;
                  }
              }
          }
          .g-imagegrid-7cols {
              .g-imagegrid-item {
                  width: 14.28571%;
                  @include breakpoint(tablet-range) {
                      width: 33.33333%;
                  }
                  @include breakpoint(mobile-only) {
                      width: 50%;
                  }
              }
          }
      }

      Last, in your [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/custom.scss (<--CLICK this is link) file add this:
      @import "dependencies";
      @import "/templateName/particles/imagegrid"

      Now you can setup your Image Grid particle:
      This image is hidden for guests.
      Please log in or register to see it.


      With that completed you will see your new columns on the FrontEnd:
      This image is hidden for guests.
      Please log in or register to see it.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3225
    • Custom work done

    Re: Popup Module opens from a Menu Item

    Posted 3 years 5 months ago
    • This will create a menu item link that when clicked will open a Popup Module of you choosing.
      The basic steps are:
      1. Create a Joomla Login form module
      2. Create a Joomla Gantry 5 particle Popup Module
      3. Create a Joomla Custom HTML module
      4. Create a Particle in your Menu Item

      STEP #1:
      For this example I've used a Joomla Login module.

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


      1) Give the module a name, e.g. "POPUP - Joomla Login Module".
      2) make sure it is NOT assigned to a module position.
      3) assign it to ALL menu pages.


      STEP #2:

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


      1) In your Joomla Module Manager screen create a NEW Joomla module -> TYPE -> Gantry 5 Particle.
      2) Give the particle a name, for instance "POPUP - Gantry 5 PopupModule Login"
      3) Click [Pick a Particle] and from the Selection window choose "Popup Module".
      4) use the ModuleID from your Login Module above.
      5) assign it to ALL menu pages.
      6) assign it to the "utility-a" module position.
      MODULEModule PositionMenu Assignment
      utility-aALL pages
      PARTICLEGuest Button IconGuest TextGuest Button IconUser TextButton Classes
      fa fa-unlock fa-fwLoginfa fa-lock fa-fwLogoutbutton-2


      In your Admin -> Outline -> Layout Manager -> Section "xxxxx" -> Grid (row#)-> Block (where a particle sits) -> drag in a Module Position Particle and in the "Particle" TAB assign it the "utility-a" module position.
      In the "Block" TAB -> "CSS Classes" -> type in the class name "hidden".
      This will prevent your Popup module from displaying on your page.


      STEP #3:
      This image is hidden for guests.
      Please log in or register to see it.


      1) In your Joomla Module Manager screen create a Custom HTML module "POPUP - Login Custom HTML". Assign it to the "popuplogin" module position. Then for the HTML code use this:
      <a class="popuplogin" data-rokbox href="#" data-rokbox-element="#login-form">
          <i class="fa fa-sign-in fa-lg"></i>
          Login
      </a>
      This image is hidden for guests.
      Please log in or register to see it.


      For the "data-rokbox-element" you would use a "body form#some-form" or "div.some-class-name" or "div#some-element-id".
      Joomla sets the ID for its Login Form as "login-form" so this is where it was obtained for the RokBox snippet above.
      For more information on this see " data-rokbox-element "


      STEP #4:
      Now we will place the module in our Joomla menu. Go to your Outline -> Menu tab(Editor) and if your using a dropdown sub-menu then you will see a vertical representation of your Main Menu. Drag a Module particle down and place it in the menu list. If your using a Parent root item then Drag a Module particle to the horizontal list.
      This image is hidden for guests.
      Please log in or register to see it.


      Click the
      This image is hidden for guests.
      Please log in or register to see it.
      icon and edit the Menu display name. Then click the "Pick a Module" and from the modal list select the Custom HTML module you've created. Since we've prefixed all our modules names with "POPUP" then just type that into the Search field and then select "POPUP - Login Custom HTML".
      Click "Apply" and then "Save Menu".

      This is the front end appearance:
      This image is hidden for guests.
      Please log in or register to see it.



      With the Popup open:
      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 3 years 3 months ago by DanG.

Time to create page: 0.342 seconds