[Resolved] Hyperlinking repeatable fields in a carousel

[Author]

Posts

[PiotrO586]

Hi,

I set up a carousel from images included in a repeatable field:

	<div class="carousel-inner">
		<div class="item active">
			[types field="images" size="thumbnail" align="none" separator="</div><div class='item'>"][/types]
		</div>
	</div>

I was wondering how could I link each image to show it in a lightbox?

I use the following code for linking individual images:

<a href="[types field='images' size='full' url='true'][/types]" data-featherlight>[types field="images" size="thumbnail" align="none" separator=", "][/types]</a>

but I am not sure if and how can I use it with above carousel?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - as I understand your image field is multiple instance (repeating) field - correct? If yes:
=> Have you checked view's shortcode [wpv-for-each]

For example:

<div class="carousel-inner">
[wpv-for-each field="wpcf-images"]
<div class="item">
        <a href="[types field='images' size='full' url='true'][/types]" data-featherlight>[types field="images" size="thumbnail" align="none"][/types]</a>
  </div>

[/wpv-for-each]
</div>

More info:
=> https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

Additionally, following article may help you:
https://toolset.com/2017/10/adding-a-gallery-of-images-for-custom-posts/

[PiotrO586]

Hi Minesh,

yes, I know this approach. But as my example shows, I need to distinguish between first item, and the rest of them. The first item has classes "item" and "active", while subsequent have only "item".

Your suggestion doesn't allow to check whether the item is first in a loop.

I was trying to use shortcode to generate index (like here: https://toolset.com/forums/topic/incremental-row-numbers-in-views/#post-31061), but it doesn't work either.

[Minesh]

Well - if you only have issue to add an active class name to first item - we can manage it by adding little custom jQuery code:

For exaple:

jQuery(document).ready(function($){
$('.carousel-inner div.item:first').addClass('active');
});

If above solution does not work - then I need to check on your install why the solution that you shared to increment the index is not working. For that I need problem URL and access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[PiotrO586]

Thanks Minesh,

it worked.