[Resolved] Create a custom search for a legacy view on media gallery

[Author]

Posts

[mauroM-3]

Hello.
In my web site I uploaded some media with a custom taxonomy (three dimensions: people, moments and places).
I'd like to create a searchable gallery on the front-end. You should be able to filter the gallery based on these three taxonomies.
My understanding is that I need to use the legacy views in order to feed a gallery block with the results of the search. But I am quite clueless in order to start with my plan.
I could build a list of images with the new toolset blocks and paginate them as well.. but it is not a gallery (e.g. it will not open up the image with the possibility to pass to the next image).
Any clues?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - you can display either post featured image or custom image field using Toolset.

To display the media gallery image, you will have to use the custom shortcode.

Here is a sandbox site and you can auto-login to it using the following link:
- hidden link

Please check the following test page:
- hidden link

To display those images as gallery with popup, I've created the following view:
- hidden link

Where I've added the following code to "Loop Editor" section:

[wpv-layout-start]
	[wpv-items-found]

<div class="tb-repeating-field tb-repeating-field--crop">
<div class="tb-repeating-field--grid">
         
	<!-- wpv-loop-start -->
		<wpv-loop>
<div>
  <a href='[attach-url type="url" id="[wpv-post-id]"]' rel="gallery-1" class="thickbox"> [attach-url id="[wpv-post-id]"] </a>
</div>

</wpv-loop>
         </div>
</div>

	<!-- wpv-loop-end -->
	[/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]

I've created the following custom shortcode and added it to "Custom Code" section offered by Toolset:
=> hidden link

//// adding thickbox 
add_action('wp_enqueue_scripts', 'add_thickbox');

//// getting attachment url or attachment image
add_shortcode('attach-url', function($atts, $content){
  $custom = [ 'class' => 'image', 'alt' => 'alt text', 'title' => 'my title' ];
  
  if(isset($atts['type']) and $atts['type']=='url'){
    	return wp_get_attachment_url($atts['id'],'medium');
  }else{
    return wp_get_attachment_image($atts['id'], 'medium', false, $custom );

  }
  
   // return wp_get_attachment_url($atts['id']);
});

And added the following CSS code to CSS editor of the view:

.tb-repeating-field--grid {
grid-template-columns: 1fr 1fr 1fr ;
grid-column-gap: 2px;
grid-row-gap: 2px;
display: grid;
justify-items: center; }
.tb-repeating-field--grid img,
.tb-repeating-field--grid video {
max-width: 100%;
display: block;
box-shadow: none !important; }

.tb-repeating-field:not(.tb-repeating-field--crop) .tb-repeating-field--grid {
align-items: center; }

.tb-repeating-field--crop .tb-repeating-field--grid div,
.tb-repeating-field--crop .tb-repeating-field--flexbox div {
width: 100%; }
.tb-repeating-field--crop .tb-repeating-field--grid div img,
.tb-repeating-field--crop .tb-repeating-field--flexbox div img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%; }

.tb-repeating-field--flexbox {
display: flex; }
.tb-repeating-field--flexbox img {
display: block;
box-shadow: none !important; }

.tb-repeating-field--masonry {
display: flex;
flex-flow: row wrap;
margin-left: -8px;
/* Adjustment for the gutter */
width: 100%; }
.tb-repeating-field--masonry-brick {
flex: auto;
height: 250px;
min-width: 150px;
margin: 0 8px 8px 0;
/* Some gutter */ }
@media only screen and (min-width: 1024px) {
.tb-repeating-field--masonry-brick:nth-child(4n+1) {
width: 250px; }
.tb-repeating-field--masonry-brick:nth-child(4n+2) {
width: 325px; }
.tb-repeating-field--masonry-brick:nth-child(4n+3) {
width: 180px; }
.tb-repeating-field--masonry-brick:nth-child(4n+4) {
width: 380px; } }
@media only screen and (max-width: 1023px) and (min-width: 768px) {
.tb-repeating-field--masonry-brick:nth-child(4n+1) {
width: 200px; }
.tb-repeating-field--masonry-brick:nth-child(4n+2) {
width: 250px; }
.tb-repeating-field--masonry-brick:nth-child(4n+3) {
width: 120px; }
.tb-repeating-field--masonry-brick:nth-child(4n+4) {
width: 280px; } }
.tb-repeating-field--masonry-brick img,
.tb-repeating-field--masonry-brick iframe,
.tb-repeating-field--masonry-brick video {
-o-object-fit: cover;
object-fit: cover;
width: 100% !important;
height: 100% !important;
display: block; }
.editor-block-list__block-edit .tb-repeating-field--masonry-brick {
height: 130px; }
.editor-block-list__block-edit .tb-repeating-field--masonry-brick:nth-child(4n+1) {
width: 150px; }
.editor-block-list__block-edit .tb-repeating-field--masonry-brick:nth-child(4n+2) {
width: 180px; }
.editor-block-list__block-edit .tb-repeating-field--masonry-brick:nth-child(4n+3) {
width: 90px; }
.editor-block-list__block-edit .tb-repeating-field--masonry-brick:nth-child(4n+4) {
width: 210px; }

More info:
- https://toolset.com/documentation/legacy-features/views-plugin/create-image-galleries-using-repeating-custom-fields/
- https://toolset.com/documentation/programmer-reference/adding-custom-code/using-toolset-to-add-custom-code/

I hope this is enough information to drive you and display the media images as gallery.

[mauroM-3]

Perhaps I better explain more clearly what I am trying to do.
Ideally the page I am designing has two parts. The first one has three search fields that should filter content out of media based on a custom taxonomy. The result of this search is a list of images.
I'd like to feed this list to a gallery.
The first question is: Is this something I can achieve using toolset blocks or do I need to use the legacy views?

[mauroM-3]

What's more... I am trying to experiment a bit. I created a custom search with three fields. The terms are not showing...

hidden link

What am I doing wrong?

[mauroM-3]

BTW on the backend I see the proper lists...

[Minesh]

I'm not sure why its not working at your end. I need to check your view settings.

Can you please send me admin access details and problem URL where you added the view with filters.

*** 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.

[Minesh]

I've disable the view Custom Search option "Show only filter options that would produce results" and I can see the filter with options.
- hidden link

Please check the following screenshot:
- hidden link