[Resolved] Creating gallery with Lightbox in new Views beta editor using RFG

[Author]

Posts

[martinE-4]

Tell us what you are trying to do?
I created a view using the new blocks editor in a content template, using a custom image, caption and rating in a RFG (repeatable fields group). It worked great to create a bootstrap 4 grid using the card css. However, I had difficulty with adding the lightbox effect. I understand that the Toolbox built-in lightbox works with repeating image fields but that is not my case with the RFG. Although the image block for my custom image field (in the RFG) showed a link option with lightbox as a choice, that did not work (I was surprised to see the option actually since I assumed that the built-in Toolbox lightbox was for repeating image fields only).

So I re-created my view in the classic view editor and successfully enqueued baguette.js and created a lovely lightbox for the image. But, I want to use the new Star Rating block only available in the blocks editor, and wonder if this will be possible?

Perhaps you could assist me in putting my lightbox html into the block editor? When I tried to edit the Image block in the block editor with Html, it became quite messy and eventually I broke the view...

Is there any documentation that you are following?
Yes I followed a few items:
https://toolset.com/2019/07/using-bootstrap-4-components-with-toolset/
https://toolset.com/forums/topic/trying-to-add-a-lightbox-effect-to-a-rfg-view/

What is the link to your site?
local at present

Here is my classic code at this point:
view (nothing special here, just the wrapping <section> which I thought was necessary for the baguette.js)

[wpv-layout-start]
	[wpv-items-found]
<section class="gallery-block cards-gallery">
	<!-- wpv-loop-start -->
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-portfolio-bootstrap-cards-no-blocks"]</div>
		[wpv-item index=other]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-portfolio-bootstrap-cards-no-blocks"]</div>
		[wpv-item index=3]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-portfolio-bootstrap-cards-no-blocks"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-md-4"></div>
		[wpv-item index=pad-last]
			<div class="col-md-4"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
</section>
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

loop item:

<div class="card border-0 transform-on-hover">
  <a class="lightbox" href="[types field="portfolio-image" output="raw"][/types]"><img src="[types field="portfolio-image" output="raw"][/types]" class="card-img-top"></a>
<div class="card-body">
[types field="portfolio-item-rating"][/types]
[types field="portfolio-image-caption"][/types]
[types field="portfolio-item-date"][/types]
  
<!-- end bootstrap card-body div -->    
  </div> 
<!-- end bootstrap card div -->  
</div>

JS editor:
baguetteBox.run('.cards-gallery', {animation: 'slideIn'});

Many thanks!

[Minesh]

Hello. Thank you for contacting the Toolset support.

I need to check on your install what's going wrong there. Can you please share the problem URL where you added the view 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 have set the next reply to private which means only you and I have access to it.

[martinE-4]

Thanks Minesh, This is .local so I will look at duplicating it or perhaps sending a module? I have a successful view using baguettebox and bootstrap 4 card css, I would just like to do it with the new blocks editor using the star rating block which is great.

Would my view created in the classic editor module with my custom post with the repeatable field group be useful then?

[Minesh]

This is .local so I will look at duplicating it or perhaps sending a module?
=> I need duplicator as if you send me a module I need to set up content first and that will take lots of time. But

I have a successful view using baguettebox and bootstrap 4 card css, I would just like to do it with the new blocks editor using the star rating block which is great.
=> With blocks, each block is separate like star rating block and all other available. There is no customizations available but once I will review the view you made with classic editor I will check and see if anything can be done.

Would my view created in the classic editor module with my custom post with the repeatable field group be useful then?
=> Yes, that is why we have two way to use the view. One is classic way and one is using Toolset blocks. If you need such customizations where you need to add your custom things at that time you should go with classic view.

Please share URL where you added the view that is built using classic editor and URL where you added the view build with blocks and what you want to add to view this view that is build using blocks.

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

[Minesh]

Thanks martin for all the required information. I've downloaded the duplicator you shared and setting it up on my local server. I will get in touch with you once I review the things.

[Minesh]

Updated.

[martinE-4]

Sorry Minesh, it's all in English at my end. I think you are mixing up the site with some other ticket. I don't recognize anything that you sent me. Take another look at the info I sent and get back to me again. Many thanks.

[Minesh]

You are right, indeed. Somehow by mistake, I managed to add another ticket reply here.

I can see everything now. I see how you configured two views. There is no way to customize the block view in such a way. That is why we keep offering the classic way to build the views, so in any case, if you need such customizations you can make it easier. In such case if you want to customize as you done you should simply convert the block to HTML and edit your HTML as required and add the shortcodes etc..etc... Because when you add any block, it will automatically generate the required HTML and we should not modify it and if we want, as you already done with your image block, it needs to be converted to HTML and you can modify the HTML as required.

In such customization cases, I would recommend you to use the classic way to build your view where you will have more flexibility and control over the output.

However, With Toolset blocks, when you add the image block it will allow you to display the image with a lightbox. Please check the following image: hidden link , but again the custom script you are using needs anchor tag and within the anchor tag you need to put the image.

baguetteBox.run('.cards-gallery', {animation: 'slideIn'});

With image block there is no such way to integrate such script, so I recommend to use the classic view mode in such cases or convert the block to HTML when required and adjust the HTML as you already did.

[martinE-4]

I have already tried adding an image block and linking it with lightbox and putting a class name in such as lightbox. In the case of RFG images that only displays the first image of the sequence of RFG's for the post. Not sure if that is a 'bug' or if indeed that feature is only meant for an actual post image or possibly a repeating image field. Perhaps the block should indicate that in its help text? Let me know what you think.

I'm surprised that the new views/blocks method cannot handle lightbox for RFG more easily. Amir suggested that I open a ticket here to get that cleared up. But maybe you are right, the old classic system must be used. However, I was under the impression that the old classic views would not receive new features or updates.

I really appreciate your assistance. I'm a real fan of Toolset and appreciate the new direction of development the new views/block editor is taking.

[Minesh]

When you try to display the image block as a lightbox, there is a known bug and already reported in front of our Devs. Actually, the bug is also fixed but undergoing QA. You can expect the fix soon, so you can display the RFG image field using the image block with a lightbox.

I will update you here as soon as I get any updates.

[martinE-4]

Thanks Minesh, sounds good. Nice to know we can do in the new view blocks editor what we could do in the old classic views editor! 🙂

[Minesh]

I got the news that you can expect the release early next week - I will keep you posted.

[Minesh]

I would like to inform you that we publish the Toolset view version 3.0 that is having the fix for the RFG image field using the image block with a lightbox. Can you please update the Toolset view plugin to version 3.0 and try to resolve your issue.

You can download the latest Toolset plugins from your accounts page:
=> https://toolset.com/account/downloads/