Skip Navigation

[Resolved] Creating link to existing additional assets (images)

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to have images open in a lightbox when clicked?

Solution:
Toolset doesn't include a lightbox itself, but it should be possible to make it work with the lightbox library of your choice.

Normally it is just a question of ensuring the markup for the image matches the requirements of the lightbox library.

It will normally need the image tag to be wrapped in a link where the href is the image URL, something like

<a href="[types field='asset' output='raw'][/types]">[types field='asset' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional'][/types]</a>

You will probably need to add some custom classes to trigger the lightbox functionality.

This support ticket is created 5 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 4 replies, has 2 voices.

Last updated by louE 5 years, 6 months ago.

Assisted by: Nigel.

Author
Posts
#1313969
Screen Shot 2019-08-11 at 3.01.01 PM.png
Screen Shot 2019-08-11 at 3.07.12 PM.png

Hello,

I have a post type that has additional assets fields (they are images).
I have created a view: Research, Additional assets ordered by post date, descending
And I have created a content template that includes [wpv-view name="additional-research-assets"]

It is showing the images on the related posts as expected.

My question is: how do I create a link to each asset (image) that opens up in a lightbox or something similar?

Some history: this is a migration and thousands of these images are already set up this way. You can see in the screenshots that the images are showing up correctly. I just need a link wrapped around each one that pops the original image up in a lightbox.

#1314183

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Lou

WordPress doesn't have built-in lightbox functionality, you need to add it by integrating a lightbox JavaScript library, or by using a plugin to do the same. Then it is simply a question of outputting your image fields in the required format, which varies according to your chosen lightbox solution.

Your theme may already include such a library, for example.

The basic principle will be to manually construct links to your images where the link content (what is initially shown) is a smaller size (e.g. thumbnail) of the actual img tag, and the href is the URL of the full-sized image.

Something like

<a href="[types field='asset' output='raw'][/types]">[types field='asset' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional'][/types]</a>

You may need additional classes or attributes depending on which solution you are using.

If you need further help, let me know which lightbox solution you are using.

If you don't have one, you could use this library, for example: hidden link

#1314521

That code:


Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Great, that means we can close here?

#1314577

My issue is resolved now. Thank you!