SOLVED Help with linking to external URL from imagegrid particle
-
-
- Nicola Fleming
- Hero Rocketeer
- Posts: 395
- Thanks: 9
-
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: 9 years 4 months ago by Nicola Fleming.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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.
-
-
-
- Nicola Fleming
- Hero Rocketeer
- Posts: 395
- Thanks: 9
-
This message contains only secure information that is visible to MrT, moderators and administrators
- Last Edit: 9 years 4 months ago by Nicola Fleming.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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.
-
-
-
- Nicola Fleming
- Hero Rocketeer
- Posts: 395
- Thanks: 9
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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.
-
-
-
- Nicola Fleming
- Hero Rocketeer
- Posts: 395
- Thanks: 9
- Thank you.
-
Time to create page: 0.067 seconds