0
Welcome Guest! Login
0 items Join Now

SOLVED Help with linking to external URL from imagegrid particle

  • SOLVED Help with linking to external URL from imagegrid particle

    Posted 6 years 8 months ago
    • Hi, I have followed the principles of the other article on AMP editng, but I am still having trouble.

      I want the image grid to link to an external URL instead of a popup rokbox. However, I must have done something wrong because no matter what I try the link will not work. It either goes back to the home page /~rugbyunion/ or it opens a blank page, depending on what I try in the twig file.

      Can anyone see where I have gone wrong??

      I have edited the following files in my custom directory:

      This results in linkage to homepage
      imagegrid.html.twig
      {% extends '@nucleus/partials/particle.html.twig' %}

      {% block particle %}

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

      <div class="g-imagegrid {{ particle.class|e }}">

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

      <div class="g-imagegrid-wrapper {{ particle.cols|e }}">
      {% for imagegriditem in particle.imagegriditems %}
      <div class="g-imagegrid-item">
      <a class="g-imagegrid-link" href="{{ particle.link|e }}" target="_blank" ><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>
      </div>
      {% endfor %}
      </div>

      </div>

      {% endblock %}

      The resulting code is:

      <div class="g-imagegrid-item">
      <a class="g-imagegrid-link" target="_blank" href="/~rugbyunion/">
      <img alt="Ferguson Canon Lawyers" src="/~rugbyunion/images/sponsors-logos/ferguson-cannon-resized.jpg?5667f13c">
      </a>
      </div>

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

      {% block particle %}

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

      <div class="g-imagegrid {{ particle.class|e }}">

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

      <div class="g-imagegrid-wrapper {{ particle.cols|e }}">
      {% for imagegriditem in particle.imagegriditems %}
      <div class="g-imagegrid-item">
      <a class="g-imagegrid-link" href="http://{{ particle.link|e }}" target="_blank" ><img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}"></a>
      </div>
      {% endfor %}
      </div>

      </div>

      {% endblock %}

      The resulting code is:

      <div class="g-imagegrid-item">
      <a class="g-imagegrid-link" target="_blank" href="http://">
      <img alt="Ferguson Canon Lawyers" src="/~rugbyunion/images/sponsors-logos/ferguson-cannon-resized.jpg?5667f13c">
      </a>
      </div>

      imagegrid.yaml

      name: Image Grid
      description: Display image grid.
      type: particle
      icon: fa-picture-o

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

      class:
      type: input.selectize
      label: CSS Classes
      description: CSS class name for the particle.

      title:
      type: input.text
      label: Title
      description: Customize the title text.
      placeholder: Enter title

      desc:
      type: textarea.textarea
      label: Description
      description: Customize the description.
      placeholder: Enter short description

      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

      album:
      type: input.text
      label: Album Name
      description: Customize the album name.
      placeholder: Enter album name

      imagegriditems:
      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: Promo Image
      description: Select desired promo image.
      .caption:
      type: input.text
      label: Caption
      description: Customize the image caption.
      placeholder: Enter caption
      .link:
      type: input.text
      label: Link
    • Last Edit: 6 years 7 months ago by Nicola Fleming.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98528
    • Thanks: 13099
    • Web Designer/Developer

    Re: SOLVED Help with linking to external URL from imagegrid particle

    Posted 6 years 8 months ago
    • 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.

      Please post your FTP logon, password and FTP URL in the secure area of your post.


      What did you actually put for the link in the particle?
      Which module/particle are you referring to ID? and on which page (url) does it appears?

      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: SOLVED Help with linking to external URL from imagegrid particle

    Posted 6 years 8 months ago
    • This message contains only secure information that is visible to MrT, moderators and administrators
    • Last Edit: 6 years 8 months ago by Nicola Fleming.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98528
    • Thanks: 13099
    • Web Designer/Developer

    Re: SOLVED Help with linking to external URL from imagegrid particle

    Posted 6 years 7 months ago
    • MrT wrote:
      ...
      Please post your FTP logon, password and FTP URL in the secure area of your post.

      No FTP details provided as requested?

      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: SOLVED Help with linking to external URL from imagegrid particle

    Posted 6 years 7 months ago
    • This message contains only secure information that is visible to MrT, moderators and administrators
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98528
    • Thanks: 13099
    • Web Designer/Developer

    Re: SOLVED Help with linking to external URL from imagegrid particle

    Posted 6 years 7 months ago
    • See my screenshot that explains what you did wrong. I have now corrected it and it works now.

      Regards, Mark.
    • The following users have thanked you: Nicola Fleming

    • 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: SOLVED Help with linking to external URL from imagegrid particle

    Posted 6 years 7 months ago
    • Thank you.

Time to create page: 0.099 seconds