0
Welcome Guest! Login
0 items Join Now

10-AMP Series - ToTop particle

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

    Re: 10-AMP Series - ToTop particle

    Posted 4 years 1 month ago
    • 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: 4 years 1 month ago by DanG.
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

    Re: 11-AMP Series - MosaicGrid particle

    Posted 4 years 1 week ago
    • 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's Avatar
    • studio673
    • Sr. Rocketeer
    • Posts: 159
    • Thanks: 0

    Re: 3-AMP Series - Content List particle

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

    Re: 3-AMP Series - Content List particle

    Posted 3 years 11 months ago
    • 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.
    • studio673's Avatar
    • studio673
    • Sr. Rocketeer
    • Posts: 159
    • Thanks: 0

    Re: 3-AMP Series - Content List particle

    Posted 3 years 11 months ago
    • Thanks.
  • Re: 2-AMP Series - Info List particle

    Posted 3 years 9 months ago
    • 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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3227
    • Custom work done

    Re: Integrate Versla's Owl Carousel SHOWCASE particle to other Templates

    Posted 3 years 8 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.twigcopy to<JOOMLA-ROOT>\templates\rt_citadel\custom\particles
      owlshowcase.yamlcopy to<JOOMLA-ROOT>\templates\rt_citadel\custom\particles
      owlcarousel.jscopy to<JOOMLA-ROOT>\templates\rt_citadel\custom\js
      custom.scsscreate in<JOOMLA-ROOT>\templates\rt_citadel\custom\scss
      _owlcarousel.scsscopy to<JOOMLA-ROOT>\templates\rt_citadel\custom\scss
      _utilities.scsscopy 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: 3 years 8 months ago by DanG.
    • The following users have thanked you: Hartmut Schwab

  • Re: 3-AMP Series - Content List particle

    Posted 2 years 2 months ago
    • 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.121 seconds