0
Welcome Guest! Login
0 items Join Now

SOLVED Some help with a new particle? 3 logos in a row

Last Post
Search Topic

  • SOLVED Some help with a new particle? 3 logos in a row

    Posted 8 years 2 months ago
    • Hello,

      I'm a newbie to particles but I'm trying to get a particle that puts a 3 logos in a row without success.
      for this I've checked the imagegrid particle for trying to get the 3 images in a row first.

      My twig:

      {% extends '@nucleus/partials/particle.html.twig' %}

{% block particle %}

  {% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %}

  <div class="g-logogrid {{ particle.class|e }}">
    
    {% if particle.desc %}<div class="g-logogrid-desc">{{ particle.desc|raw }}</div>{% endif %}

    <div class="g-imagegrid-wrapper {{ particle.cols|e }}">
      {% for logogriditem in particle.logogridsitems %}
       <div class="g-logogrid-item">
              <a class="g-logogrid-link" href="{{ url(logogriditem.image)|e }}" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ logogriditem.caption|raw }}"><img src="{{ url(logogriditem.image)|e }}" alt="{{ logogriditem.caption|e }}"></a>
          </div>  
        </div>
      {% endfor %}

    </div>

  </div>  

{% endblock %}

      With this code I only have one item, not all 3 item that I've setup in the particle form. My yaml:


      form:
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable logo particles.
      default: true

    class:
      type: input.selectize
      label: CSS Classes
      description: Set a specific CSS class for custom styling.
   
    title:
      type: input.text
      label: Title
      description: Customize the title text.
      placeholder: Enter title
      
    album:
      type: input.text
      label: Album Name
      description: Customize the album name.
      placeholder: Enter album name

    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

    logogriditems:
        type: collection.list
        array: true
        label: Images
        description: Create each item to appear in the content row.
        value: title
        ajax: true

        fields:
          .title:
            type: input.text
            label: Title
            skip: true
          .image:
            type: input.imagepicker
            label: Image
            description: Select desired logo image.
          .caption:
            type: input.text
            label: Caption
            description: Customize the image caption.
            placeholder: Enter caption
          .url:
            type: input.text
            label: Url
            description: Url for the image. Leave empty to go to home page.
          .text:
            type: input.text
            label: Text
            description: Input logo description text.
          .tagline:
            type: input.text
            label: Tagline
            description: Input logo tagline text.


      Any hints why don't show all 3 items?

      Thanks in advance.
    #1340401
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Some help with a new particle? 3 logos in a row

    Posted 8 years 2 months ago
    • You would need a FOR loop to iterate through you collection list - look at other particles that already do this for examples. But, I'm not sure why you need to create a new particle for this... why not just put three logo/image particles on the layout - or just use a customhtml module and create a responsive grid of your own to show your images http://docs.gantry.org/gantry5/advanced/responsive-content .

      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.
    #1340442

  • Re: SOLVED Some help with a new particle? 3 logos in a row

    Posted 8 years 2 months ago
    • Hi Mark,

      Indeed I have a for loop in the twig,this one:
       {% for logogriditem in particle.logogridsitems %}
       <div class="g-logogrid-item">
              <a class="g-logogrid-link" href="{{ url(logogriditem.image)|e }}" data-rokbox data-rokbox-album="{{ particle.album|e }}" data-rokbox-caption="{{ logogriditem.caption|raw }}"><img src="{{ url(logogriditem.image)|e }}" alt="{{ logogriditem.caption|e }}"></a>
          </div>  
        </div>
      {% endfor %}

      but for some reason, is not working.

      I've tried the solution of setting three logo particles in one row in the layout, but I need to mess up with the css for putting all the 3 logos toghether as a grid image. Perhaps is the easiest solution..If I can't play with the twig i'll use this.

      The other solution using the custom modules is always the failsafe solution, indeed. But In the end I was trying to use the custom particle one because seems more elegant.

      Regards,
    #1340447
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Some help with a new particle? 3 logos in a row

    Posted 8 years 2 months ago
    • Please post your FTP logon, password and FTP URL in the secure area of your post.

      Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.

      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.
    #1340453

  • Re: SOLVED Some help with a new particle? 3 logos in a row

    Posted 8 years 2 months ago
    • Thanks Mark, but I'm working locally in a vagrant box.
      In fact I was revising your suggestions and the 3 logo particles is the easiest method using spacers for better positioning that makes the new particle only a divertimento.

      For now I'll use this solution, but I'll revise the code with other examples in another moment and If I find the problem in my new particle I'll post it here.

      Thanks for the support anyway :)
    #1340460

Time to create page: 0.055 seconds