0
Welcome Guest! Login
0 items Join Now

Particle YAML field types : choose a Joomla article

  • Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • Thanks for this documentation : Particle YAML field types
      But what kind of field, if possible, do I have to use if I want then to select a Joomla Article in a list, instead of creating 2 fields one for the URL and the other for the text of link ?

      Thanks a lot.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98615
    • Thanks: 13111
    • Web Designer/Developer

    Re: Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • The field types in the yaml are just ways of keying in data into the particles settings. What you do with those field contents is down to the code that you write in the twig file. So, there's nothing stopping you having a field called (say) "article ID" when you key in an article Id number. Then you could write some code to extract the url, description or anything else from the article Id specified.

      This is really development work, so you may find it useful to discuss this with like-minded developers in github chat too https://gitter.im/gantry/gantry5

      You will also find this documentation useful too:

      http://docs.gantry.org/gantry5/advanced/creating-a-new-particle

      http://docs.gantry.org/gantry5/advanced/php-functions

      I hope that helps.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • I did it like that :

      example_particle.html.twig download the files (/Templat_DIR/custom/particles)

      ... See an example ("(Particle)Fete de la musique 2015 à Saint-Mandé"
      First part : Image + Title + Description + Readmore
      2nd part : 3 images (Last one hidden on phone)


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

      {% extends '@nucleus/partials/particle.html.twig' %}
      
      {% block particle %}
      <div class="{{ particle.css.class }}">
                  
                  <div class="g-grid">
                              <div class="g-content">
                                          <div class="g-grid">
                                                      {% if particle.image %}
                                                      <div class="g-block size-{{particle.col1}}"><img src="{{ particle.image }}" alt="image"></div>
                                                      <div class="g-block size-{{particle.spacer}}"></div>
                                                      <div class="g-block size-{{particle.col2}}">
                                                                  <h3 class="titreh3-chapitre">{{ particle.title }}</h3>
                                                                  <p>{{ particle.description }}</p>
                                                                  <p><a class="readon" href=index.php?option=com_content&view=article&id={{particle.articleid}} target="_blank"><span>Lire la suite</span></a></p>
                                                      </div>
                                          </div>
                              </div>
                  </div>
                                                      
                                          
                                          <!--<div class="g-content">-->
                  <div class="g-grid">
                              <div class="g-content">
                                                      <div class="g-grid">
                                                      <div class="g-block size-32"><img src="{{ particle.image1 }}" alt="image"></div>
                                                      <div class="g-block size-2"></div>
                                                      <div class="g-block size-32"><img src="{{ particle.image2 }}" alt="image"></div>
                                                      <div class="g-block size-2"></div>
                                                      <div class="g-block size-32 hidden-phone"><img src="{{ particle.image3 }}" alt="image"></div>
                                                      </div>
                              </div>
                  </div>
                                          <!--</div>-->
                                                      {% else %}
                  
                  <div class="g-grid">
                              <div class="g-content">
                                          <div class="g-grid">
                                                      <div class="g-block size-100">
                                                                  <h3 class="titreh3-chapitre">{{ particle.title }}</h3>
                                                                  <p>{{ particle.description }}</p>
                                                                  <p><a class="readon" href=index.php?option=com_content&view=article&id={{particle.articleid}} target="_blank">Lire la suite</a></p>
                                                      </div>
                                          </div>
                              </div>
                  </div>
                  <div class="g-grid">
                              <div class="g-content">
                                                      <div class="g-grid">
                                                      <div class="g-block size-32"><img src="{{ particle.image1 }}" alt="image"></div>
                                                      <div class="g-block size-2"></div>
                                                      <div class="g-block size-32"><img src="{{ particle.image2 }}" alt="image"></div>
                                                      <div class="g-block size-2"></div>
                                                      <div class="g-block size-32 hidden-phone"><img src="{{ particle.image3 }}" alt="image"></div>
                                                      </div>
                              </div>
                  </div>
                                          </div>
                                                      {% endif %}
                    
                  
                  
      </div>
      {% endblock %}

      example_particle.yaml
      name: Example
      description: Displays a Title, Image, and Text on the front end.
      type: particle
      
      form:
        fields:
          enabled:
            type: input.checkbox
            label: Enabled
            description: Globally enable to the particles.
            default: true
      
          title:
            type: input.text
            label: Title
            description: Customize the section title text.
          
          icon:
                type: input.icon
                label: Icon
          
          articleid:
                type: input.text
                label: ID de l'article
      
          image:
            type: input.imagepicker
            label: Image
            description: Select the main image.
            
          col1:
            type: input.text
            label: Taille de la col1
            description: Customize the section title text.
          
          col2:
            type: input.text
            label: Taille de la col2
            description: Customize the section title text.
          
          spacer:
            type: input.text
            label: Taille de l'espace
            description: Customize the section title text.
          
          description:
            type: textarea.textarea
            label: Text / HTML
            description: Create or modify your description.
      
          css.class:
            type: input.text
            label: Class
            description: CSS class name for the particle.
            
          
          image1:
            type: input.imagepicker
            label: Image 1
            description: Select the main image.
            
          image2:
            type: input.imagepicker
            label: Image 2
            description: Select the main image.
          
          image3:
            type: input.imagepicker
            label: Image 3
            description: Select the main image.

      PROBLEM :
      - When I click on the link it appears like that " labo-betrained.fr/saintmande/index.php?o...nt&view=article&id=8 " without explicit url
      - When I choose the image the URL begins like that : "gantry-media://..." that I have to change manually with "images/..." - A solution ?
    • Last Edit: 7 years 1 week ago by Laurent BRIERE.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98615
    • Thanks: 13111
    • Web Designer/Developer

    Re: Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • This line in your TWIG is wrong...
      <p><a class="readon" href=index.php?option=com_content&view=article&id={{particle.articleid}} target="_blank">Lire la suite</a></p>

      Should be:
      <p><a class="readon" href="/index.php?option=com_content&amp;view=article&amp;id={{particle.articleid}}" target="_blank">Lire la suite</a></p>


      Also your img src is input wrong, example:
      <div class="g-block size-32"><img src="{{ particle.image1 }}" alt="image"></div>

      should be:
      <div class="g-block size-32"><img src="{{ url(particle.image1)|e }}" alt="image"></div>
      Regards, Mark.
    • Last Edit: 7 years 1 week ago by MrT.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • MrT wrote:
      This line in your TWIG is wrong...
      <p><a class="readon" href=index.php?option=com_content&view=article&id={{particle.articleid}} target="_blank">Lire la suite</a></p>

      Should be:
      <p><a class="readon" href="/index.php?option=com_content&amp;view=article&amp;id={{particle.articleid}}" target="_blank">Lire la suite</a></p>


      Also your img src is input wrong, example:
      <div class="g-block size-32"><img src="{{ particle.image1 }}" alt="image"></div>

      should be:
      <div class="g-block size-32"><img src="{{ url(particle.image1)|e }}" alt="image"></div>
      Regards, Mark.

      Hey Good job (y) Thanks! And what about the URL ? ("...index.php?option=com_content&view=article&id=8") instead of "sports-culture-loisirs" ?
    • Last Edit: 7 years 1 week ago by Laurent BRIERE.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98615
    • Thanks: 13111
    • Web Designer/Developer

    Re: Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • You would need to also specify itemid=xx (the menu item in which the page should be rendered) in the urls and then they would be rendered as sef urls.

      Regards, Mark.
    • Last Edit: 7 years 1 week ago by MrT.
    • The following users have thanked you: Laurent BRIERE

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • MrT wrote:
      You would need to also specify itemid=xx (the menu item in which the page should be rendered) in the urls and then they would be rendered as sef urls.

      Regards, Mark.
      :( sorry It does not work
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98615
    • Thanks: 13111
    • Web Designer/Developer

    Re: Particle YAML field types : choose a Joomla article

    Posted 7 years 1 week ago
    • Turn off sef and then look at that menu item link in you browser - that is what it will have to match exactly for the sef url to be used instead. So for a sef url to work the menu item must open EXACTLY the same article - your's does not appear to do that - that menu item seems to be opening a different article?

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.119 seconds