RocketTheme - TOPIC: Particle YAML field types : choose a Joomla article

Welcome Guest! Login

0 items Join Now

- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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.
#1224077
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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.
#1224220

Laurent BRIERE
Rocketeer
Posts: 76
Thanks: 3

Re: Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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: 9 years 8 months ago by Laurent BRIERE.

#1224230

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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&view=article&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: 9 years 8 months 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.
#1224234

Laurent BRIERE
Rocketeer
Posts: 76
Thanks: 3

Re: Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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: 9 years 8 months ago by Laurent BRIERE.

#1224235

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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: 9 years 8 months 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.
#1224236
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
Re: Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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
#1224249
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: Particle YAML field types : choose a Joomla article

Posted 9 years 8 months 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.
#1224263

Time to create page: 0.085 seconds