[Gelöst] Taxonomie – Checkboxes – Layout / Picture show as lightbox

[Author]

Artikel

[reimundH]

Dear Lady or Sir,

I´ve created a custom search with checkboxes. The checkboxes are connected with taxonomies. Please check the attached screenshot.
How I can show the checkboxes as columns. I this case I´d like to show 4 columns (5 CB / 5 CB / 5 CB / 5 CB)

Another question:
The search results are shown a picture per result. I´d like to have the following function. If click on the picture, it will open the picture in a bigger size as lightbox.

Thank you in advance.

Best regards
Reimund

[Christian Cox]

How I can show the checkboxes as columns. I this case I´d like to show 4 columns (5 CB / 5 CB / 5 CB / 5 CB)
You can wrap the checkboxes filter shortcode in a div, then apply custom CSS to display content in multiple columns. More information about CSS column-count: https://www.w3schools.com/cssref/css3_pr_column-count.asp

The search results are shown a picture per result. I´d like to have the following function. If click on the picture, it will open the picture in a bigger size as lightbox.
There's nothing built-in to Toolset that will open an image in a lightbox. This requires custom code using JavaScript and CSS, or another 3rd-party Lightbox plugin. There are several other tickets here in the forum where other users have shared their solutions for lightbox displays. Here's one where Beda offers some code samples: https://toolset.com/forums/topic/using-a-lightbox-in-my-view-to-display-view-content-template/

If you need more specific information, feel free to create a separate ticket. Our support policy is one topic per ticket, so we can keep the forums organized. Thanks!

[reimundH]

Hello Christian Cox,

thank you for your very fast reply.
Is it possible that you show me a example based on my code. Because I not a programmer and I am not sure what I have to do.

<div class="form-group">
<label>[wpml-string context="wpv-views"]Nationality[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="nationality" type="checkboxes" format="%%NAME%%" orderby="none" url_param="wpv-nationality"]
</div>

Many thanks.

Best regards
Reimund

[Christian Cox]

Here's an example of adding a CSS class to a div wrapping the taxonomy shortcode:

<div class="form-group">
<label>[wpml-string context="wpv-views"]Nationality[/wpml-string]</label>
<div class="four-columns">
  [wpv-control-post-taxonomy taxonomy="nationality" type="checkboxes" format="%%NAME%%" orderby="none" url_param="wpv-nationality"]
</div>
</div>

Then you would add this code to the CSS panel below your View's Search and Pagination editor:

.four-columns {
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
}

[reimundH]

My issue is resolved now. Thank you Christian!