RocketTheme - TOPIC: dang!!...where was that guide now?? (10/12)

Welcome Guest! Login

0 items Join Now

- anitaweb
- Newbie
- Posts: 10
- Thanks: 0
Re: Custom Responsive Grids for Gantry 5

Posted 8 years 3 months ago
- Thank you! I try now. You solve a big problem to me, thanks a lot
#1263687

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

Re: Integrate Requiem's GridStatistic particle to other Templates

Posted 8 years 3 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.

#1265720

- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: G5 - Block Variations versus G4 Module Variations

Posted 8 years 3 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: 8 years 3 months ago by DanG.
- The following users have thanked you: Norm256
#1265780
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Adding Modules in Gantry 5

Posted 8 years 3 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:
  
  create an Article for your planned menu page
  
  create a menu item using your Article
  
  #2: Gantry 4:
  
  in your Joomla Module Manager screen create three modules - RokAjaxSearch, Custom HTML and a RokSprocket List
  
  assign each, respectively, to module position's showcase-a showcase-b showcase-c
  
  assign all the modules to your menu page
  
  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:
  
  in your Joomla Module Manager screen create three modules - RokAjaxSearch, Custom HTML and a Gantry 5 Particle
  
  assign each, respectively, to module position's showcase-a showcase-b showcase-c
  
  assign all the modules to your menu page
  
  clear all caches
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  DONE!
- Last Edit: 8 years 3 months ago by DanG.
#1267100

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

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

Posted 8 years 2 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: 8 years 1 month ago by DanG.
The following users have thanked you: Björn Hallier, Fitz

#1269325

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

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

Posted 8 years 2 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.

#1270486

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

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

Posted 8 years 2 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: 8 years 2 months ago by DanG.

#1272567

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

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

Posted 8 years 2 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.twig	copy to	<JOOMLA-ROOT>\templates\rt_isotope\custom\particles
owlcarousel.yaml	copy to	<JOOMLA-ROOT>\templates\rt_isotope\custom\particles
owlcarousel.js	copy to	<JOOMLA-ROOT>\templates\rt_isotope\custom\js
demo.css	copy to	<JOOMLA-ROOT>\templates\rt_isotope\custom\css\demogalatea.css
animate.css	copy to	<JOOMLA-ROOT>\templates\rt_isotope\custom\css
custom.scss	copy to	<JOOMLA-ROOT>\templates\rt_isotope\custom\scss
_owlcarousel.scss	copy to	<JOOMLA-ROOT>\templates\rt_isotope\custom\scss
\templates\rt_isotope\scss\configuration\_typography.scss	copy 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: 8 years 2 months ago by DanG.

#1272576

- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: 8-AMP Series - Image Grid-7_column

Posted 8 years 1 month 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.
#1277357
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Popup Module opens from a Menu Item

Posted 8 years 1 month ago
- This will create a menu item link that when clicked will open a Popup Module of you choosing.
  The basic steps are:
  
  Create a Joomla Login form module
  
  Create a Joomla Gantry 5 particle Popup Module
  
  Create a Joomla Custom HTML module
  
  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.
  
  MODULE Module Position Menu Assignment
  
  utility-a ALL pages
  
  PARTICLE Guest Button Icon Guest Text Guest Button Icon User Text Button Classes
  
  fa fa-unlock fa-fw Login fa fa-lock fa-fw Logout button-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: 8 years 1 day ago by DanG.
#1277619

Time to create page: 0.090 seconds

MODULE	Module Position	Menu Assignment
	utility-a	ALL pages

PARTICLE	Guest Button Icon	Guest Text	Guest Button Icon	User Text	Button Classes
	fa fa-unlock fa-fw	Login	fa fa-lock fa-fw	Logout	button-2

Custom Responsive Grids for Gantry 5

Re: Custom Responsive Grids for Gantry 5

Re: Integrate Requiem's GridStatistic particle to other Templates

Re: G5 - Block Variations versus G4 Module Variations

Re: Adding Modules in Gantry 5

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

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

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

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

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

Re: Popup Module opens from a Menu Item