10-AMP Series - ToTop particle
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
In this guide we will change the ToTop particle from using an icon to an actual image as the graphic.
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.
From your same [JOOMLA-ROOT]\templates\rt_templateName\particles copy totop.yaml and totop.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 totop.yaml to edit.
The "totop.yaml" file:
name: To Top description: Scroll back to top. type: particle icon: fa-chevron-up form: fields: enabled: type: checkbox label: Enabled description: Globally enable to top particles. default: true css.class: type: input.selectize label: CSS Classes description: CSS class name for the particle. default: totop image: type: input.imagepicker label: ToTop Image description: Select desired ToTop image. content: type: input.text label: Text description: The text to be displayed for the link. HTML is allowed. placeholder: To Top
and the "totop.html.twig" file:
{% extends '@nucleus/partials/particle.html.twig' %} {% block particle %} <div class="{{ particle.css.class|e }} g-particle"> <div class="g-totop"> <a href="#" id="g-totop" rel="nofollow"> {% if particle.image %}<img src="{{ url(particle.image)|e }}" >{% endif %} {% if particle.content %}{{particle.content|raw}}{% endif %} {% if not particle.image and not particle.content %}To Top{% endif %} </a> </div> </div> {% endblock %}
In my example I created a [JOOMLA-ROOT]\templates\rt_callisto\images\demo\totop folder but you can place it anywhere. I created my "totop.png" and used the Particles Image Picker to select it.
This is what my Callisto ToTop element looks like:
This image is hidden for guests.
Please log in or register to see it. - Last Edit: 7 years 9 months ago by DanG.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
This guide will help you to modify the MosaicGrid particle to add a Link URL and Target destination choice field of "Self OR New Window" in the "Content Items" setup window. It might be more apparent to your users that there is a link associated to your item when the entire image is a linkable element than only the text 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 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 mosaicgrid.yaml and mosaicgrid.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 mosaicgrid.yaml to edit.
Looking at the code of the original mosaicgrid.yaml file we're interested in this section:
items: type: collection.list array: true label: Items description: Create each item to appear in the content row. value: title ajax: true fields: .style: type: select.selectize label: Style description: Select the style for the Mosaic Grid item. default: g-mosaicgrid-style1 options: g-mosaicgrid-style1: Style 1 g-mosaicgrid-style2: Style 2 .img: type: input.imagepicker label: Image description: Select desired image. .titleText: type: input.text label: Title Label description: Specify the title label.
We'll be adding code to create two NEW field links, "imgLink" and "imgTarget".
So our new code block will look like this:
fields: .style: type: select.selectize label: Style description: Select the style for the Mosaic Grid item. default: g-mosaicgrid-style1 options: g-mosaicgrid-style1: Style 1 g-mosaicgrid-style2: Style 2 .img: type: input.imagepicker label: Image description: Select desired image. .imgLink: type: input.text label: Image Link description: Specify the Images link URL address. .imgTarget: type: select.selectize label: Image Target description: Target browser window when item-image is clicked. placeholder: 'Select...' default: _blank options: _parent: Self _blank: New Window .titleText: type: input.text label: Title Label description: Specify the title label.
The next file is mosaicgrid.html.twig where you look for:
<div class="g-mosaicgrid-item"> <div class="g-mosaicgrid-image"> <img src="{{ url(item.img)}}" {{ item.img|imagesize|raw }} alt="{{ item.title|e }}"> </div> <div class="g-mosaicgrid-content">
The modification here is to wrap this code ' <img src="{{ url(item.img)}}" ' in <a> tags.
So our new code block will look like this:
<div class="g-mosaicgrid-item"> <div class="g-mosaicgrid-image"> {% if item.imgLink %}<a target="{{ item.imgTarget|default('_self')|e }}" href="{{ item.imgLink|e }}">{% endif %}<img src="{{ url(item.img)}}" {{ item.img|imagesize|raw }} alt="{{ item.title|e }}">{% if item.imgLink %}</a>{% endif %} </div> <div class="g-mosaicgrid-content">
To have the MosaicGrid particle item Image hyperlinked you have to enter ANY valid URL into the Image-Link field. Then select "Self OR New Window" to define the target destination of your link.
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- studio673
- Sr. Rocketeer
- Posts: 160
- Thanks: 0
-
Will there be a default setting in updated Yaml's and Twigs to include targeted links?
NB: Also, just a quick one. In your images for the ContentList particle you have code to add and then the images as it should be.
I'm just a little concerned one has type: select.selectize and the images show type: select.select. I have chosen to use the latter but am concerned that this may break at some stage dowm the track. I had some issues following the instructions and it did break my loachost site. Which is correct and why is there that anomoly?
thanks in advance - Last Edit: 7 years 8 months ago by studio673.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
studio673 wrote:
Will there be a default setting in updated Yaml's and Twigs to include targeted links?
NB: Also, just a quick one. In your images for the ContentList particle you have code to add and then the images as it should be.
I'm just a little concerned one has type: select.selectize and the images show type: select.select. I have chosen to use the latter but am concerned that this may break at some stage dowm the track. I had some issues following the instructions and it did break my loachost site. Which is correct and why is there that anomoly?
thanks in advance
Please see " Selectize Fields ". The distinction between the two is very small.
-
-
-
- Tom Ravelingien
- Newbie
- Posts: 1
- Thanks: 0
-
Hi Dan, I followed the steps and got the extra menu with Self and New window, but I keep getting the links into the same window although I have chosen New Window. Also the manual says _blank is default, but it's popping up in the same window even from before I did the adjustments.
Info List at the bottom of electrotechnics.com.au -> I would like to open the NSW WorkCover and Synology link opened in a new window.
Thank you for your advise!
Kind regards,
Tom
PS. Thank you for the clear manual, it's easy to follow.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: Integrate Versla's Owl Carousel SHOWCASE particle to other Templates
Posted 7 years 4 months ago-
How to Integrate Versla's Owl Carousel SHOWCASE particle to other Templates
Versla introduced the Owl Carousel Showcase particle. This is a complex particle as it needs CSS and JS support files to function. This makes it another prime example to show how to integrate particles from one Gantry 5 template to another.
In this guide we'll integrate the Owl Carousel Showcase particle into the Citadel 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 that contains the `Owl Carousel Showcase` particle.
> - Copy the particles `owlshowcase.html.twig` and `owlshowcase.yaml` files to your `TEMPLATE_DIR/custom/particles` in your current template. If you don't have one then create a `TEMPLATE_DIR/custom/` folder.
This image is hidden for guests.
Please log in or register to see it.
> - Copy any JS files with the file name `owlshowcase` to the `TEMPLATE_DIR/custom/js` in your current template. In the case of Versla it's actually called [JOOMLA-ROOT]\templates\rt_versla\js\owlcarousel.js.
> - Copy any SCSS files with the file name `owlshowcase` to the `TEMPLATE_DIR/custom/scss` in your current template. In the case of Versla it's actually called [JOOMLA-ROOT]\templates\rt_versla\scss\versla\particles\_owlcarousel.scss.
> - Copy any SCSS support files to the `TEMPLATE_DIR/custom/scss` in your current template. In this case we're simply using the folder `TEMPLATE_DIR/custom/css`. It's here we need to copy the Versla file:
[JOOMLA-ROOT]\templates\rt_versla\scss\versla\styles\_utilities.scss.
> - At this point, for this guide, your `TEMPLATE_DIR/custom/scss` folder should contain three files:
custom.scss
_owlcarousel.scss
_utilities.scss
## Required files for migration from Versla to Citadel
>
> 1. PARTICLE files: owlshowcase.html.twig and owlshowcase.yaml from folder Versla "..\templates\rt_versla\particles"
> 2. PARTICLE Javascript file: owlcarousel.js from folder Versla "..\templates\rt_versla\js"
> 3. PARTICLE SCSS file: _owlcarousel.scss from folder Versla "..\templates\rt_versla\scss\versla\particles"
> 4. PARTICLE SCSS file: _utilities.scss from folder Versla "..\templates\rt_versla\scss\versla\styles"
> 5. A custom.scss file that we need to create three "@import" statements.
> 6. Citadel SUPPORT files: animate.css and demo.css. These are in the Citadel-Home -> Page-Settings ->ATOMS -> Custom CSS / JS of a RocketLauncher Citadel template.
## 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:
owlshowcase.html.twig copy to <JOOMLA-ROOT>\templates\rt_citadel\custom\particles owlshowcase.yaml copy to <JOOMLA-ROOT>\templates\rt_citadel\custom\particles owlcarousel.js copy to <JOOMLA-ROOT>\templates\rt_citadel\custom\js custom.scss create in <JOOMLA-ROOT>\templates\rt_citadel\custom\scss _owlcarousel.scss copy to <JOOMLA-ROOT>\templates\rt_citadel\custom\scss _utilities.scss copy to <JOOMLA-ROOT>\templates\rt_citadel\custom\scss
In your [JOOMLA-ROOT]/templates/citadel/custom/scss/custom.scss file Please see " Adding a Custom Style Sheet " add the code I used for the custom.scss file::
/* GANTRY5 DEVELOPMENT MODE ENABLED. WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost! For more information on modifying CSS, please read: http://docs.gantry.org/gantry5/configure/styles http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet Mods by DanG for this Citadel template */ @import "dependencies"; // Owl Carousel Showcase SCSS files @import "owlcarousel"; @import "utilities"; .g-default-navigation { margin-top: 0; padding: 0rem 17%; } section#g-container-slideshow { margin-top: 5rem; }
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 showcase` particle in the Layout Manager and assigned its particle position to "slideshow". I disabled the current Video Slideshow that comes with Citadel.
In your Module Manager screen click "Edit Particle" to setup the `Owlcarousel Showcase` particle.
For the "Owl Carousel Showcase Items" collection image location field I used these locations:
gantry-media://rocketlauncher/home/slideshow/img-01.jpg
gantry-media://rocketlauncher/home/slideshow/img-02.jpg
gantry-media://rocketlauncher/home/slideshow/img-03.jpg
and so on...
You can create a new "owl" folder and put the files there so as not to interfere with the Citadel 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.
The reason we had to import the _utilities.scss file is that Versla uses a "no-section-paddings" class for the Slideshow module position. With the file imported and defined in your custom.scss we have to apply it to the Layout Manager -> SlideShow Section container by clicking on the Section container cog icon:
This image is hidden for guests.
Please log in or register to see it.
## Completed Integration
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 4 months ago by DanG.
-
The following users have thanked you: Hartmut Schwab
-
-
-
- Oriana Miranda
- Newbie
- Posts: 3
- Thanks: 0
- Hi! I was doing this and it works fine until I try the target link... it doesn't really opens in a new window (it opens on the same tab), althought the option does appear and it it the one selected... What should I do? Thanks in advanced!!
-
Time to create page: 0.084 seconds