[Resolved] Image taxonomy and video/images gallery thumbnails

[Author]

Posts

[Rodrigo Lopes]

Hi.
I have started to work with Toolset and I'm still learning how to use it. So far, I have a few things I would love to ask for your help with. I created a page with Elementor (hidden link) that I'm trying to recreate with Toolset (hidden link).

1. For some taxonomies, I want to display a specific icon AND the respective term name (flags icon and nation name, for example). I followed two articles suggested by your support (https://toolset.com/documentation/user-guides/views/term-fields/ and https://toolset.com/documentation/user-guides/views/displaying-wordpress-term-fields/), created an image field for those taxonomies and had success displaying them on the back-end. However, when I try to display it on the front-end, that field doesn't exist under 'Fields and Views'. I also tested something like [types termmeta="icon"][/types] but with no success. What am I missing here? (Images 1 & 2)

2. I want to insert a few videos but, in order to reduce the page's size, I created a class with the following custom code added to the WP theme, that replaces the video by its thumbnail image.
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}

.youtube-player iframe {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
display: block;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}

When I add something like
<div class='youtube-player' data-id='X21fd92acrg' alt="Anfield" title="Anfield"></div>
it works fine, except in Toolset. I'm using a WYSIWYG field because the class='columnwidth' doesn't work on a single line field (see 'video not available' image, please). As you can see in 'real videos', both image and video don't load. Is there anything I can do to fix it? (images 3 & 4)

3. I want to display a gallery similar to the one on 'in-game images' but that also accepts videos. So far I hadn't success because, as previously explained, videos don't load and also I don't know how to mix videos and images in a 2 columns gallery. Do you have any suggestions? (images 5 & 6)

4. I'm using this HTML to create the gallery for 'In-Game Images'.
<center>[wpv-for-each field="wpcf-ig-images"]
[types field='ig-images' size='full' class='columnwidth' alt="FIFA Stadiums - [wpv-post-title]" title="FIFA Stadiums - [wpv-post-title]"][/types]
[/wpv-for-each]</center>

Since I want to reduce the page's size, I created two fields: one with the thumbnail size and other with full-size. I also called the lightbox feature, used by my WP theme, and added a class to resize the images in two columns.
Unfortunately, when I click in an image, it doesn't show up the lightbox controls (zoom, share, etc) and images don't maximize when I rotate the mobile device, as it happens in my elementor page. Is there an easy way to achieve that?

Thank you very much!

[Minesh]

Hello. Thank you for contacting the Toolset support.

As per our support policy - we entertain only one question per ticket. This help other users searching on the forum as well as help us to write correct problem resolution summery for the original issue reported.

Let's resolve the issue one by one.

Regarding the taxonomy field - As shared with the following Doc:
=> https://toolset.com/documentation/user-guides/views/displaying-wordpress-term-fields/

At the moment, you can display term fields on a View listing terms and on a term archive page.

That means, you will have to create a taxonomy view in order to access the taxonomy custom term fields within the taxonomy view's loop editor section.

Do you see the term fields available with the taxonomy view?

[Rodrigo Lopes]

Hi. Thank you for your reply.

It was very helpful because I thought there was an easier way to do it and was avoiding creating a taxonomy view.
I reached what I wanted but I still have 2 quick questions about this.

1) Creating a view for this end will not affect the page speed/resources?
2) I want to style the custom term field image I inserted in the loop. I added something like img { width: 14px; } in the CSS editor box but this affects all images on the page. How can I identify and style only that image?

Thank you!

[Minesh]

1) Creating a view for this end will not affect the page speed/resources?
==>
Not much as the only way to access the term field inside post view is using the taxonomy view.

2) I want to style the custom term field image I inserted in the loop. I added something like img { width: 14px; } in the CSS editor box but this affects all images on the page. How can I identify and style only that image?
==>
Well, you should try to add image within div and assign specific class to that div and then target the only image elements within that div - I hope that makes sense.

[Rodrigo Lopes]

My issue is resolved now. Thank you very much!