[Resolved] Repeating fields can't be shown and some block layout issues

[Author]

Posts

[yang-anL]

I am trying to:
1. Insert repeating fields in a template via view.
2. Using toolset image slider to show photos.
3. Using toolset youtube block in an article or template.
4. The map doen't show all custom field address.

Link to a page where the issue can be seen:
1. hidden link ( in the "精選連結" )
2. hidden link ( At the top)
3. hidden link (Near the end of the post)
4. hidden link (Near the end of the post)

I expected to see:
1. I want to choose my custom repeating field (external link name and external link URL) via view
2. Correct layout ( No strange black dot on the corner, and I need a gap between big image and those smaller images)
3. Correct layout. (No big gap on the top) ## I don't add any padding or margin. ##
4. all custom field address showed on the map (the view block seems wrong)

Instead, I got:
1. There is nothing to be shown.
2. Strange corner black dots and image sticking together.
3. Big gap on the top.
4. Just one address.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

1. In the content template named "Template for 景點", I've added a "Fields and Text" block in the loop of the view "external link list" and in it added these shortcodes for two fields in the repeatable field group:
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/ )

<a href="[types field='external-link-url' output='raw'][/types]">[types field='external-link-name'][/types]</a>

You'll see the related repeatable field external links are showing now.

2. To remove the list style square dots coming from the theme's styles and to add some space between the large image and the image thumbnails, you can include the following CSS code in the CSS editor of the same content template "Template for 景點":
( screenshot: hidden link )

.tb-image-slider ul.glide__slides li.glide__slide {list-style-type: none !important;}

.tb-image-slider .glide__view {margin-bottom: 1%;}

3. I couldn't find the extra gap showing on the top. Can you please share a screenshot, so that it is clearer?

4. In the content template named "Template for 遊記", the view "attraction list" is set to show 1 result at a time.

I've included a map marker shortcode in a "Fields and Text" block and the relevant location's marker is showing on the map now, and it changes with each slide too:
( ref: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-marker )

[wpv-map-marker map_id='map-7' marker_id='marker-[wpv-post-id]' marker_field='wpcf-attraction-address'][/wpv-map-marker]

regards,
Waqar

[yang-anL]

Thanks for solving my problems so fast.

About 1: It shows the contents now. But I am curious that why I follow the tutorials, but I can't select the repeating field in my view ..... Another question is , can field and text block customize styles ? i.e. color or size, I change the sidebar typography but nothing change ?

About 2: It is totally resloved, thanks a lot!!

About 3: Sorry, I didnt say clearly. The gap shows in the front-end, but i looks normal in the back-end. I have uploaded screenshots.

About 4:

My original thought is to show all attractions on the map. At first I succeded by using view connecting to custom field of "attraction address", which belongs to post type "景點 (attraction) " I have relationships between 遊記 (itinerary) and 景點 ( attraction) . Eveything is right. But suddenly the map seems to connect to a view block (attraction list) in the template. And no more options to choose....

However, the job you done for me is amazing. Map location will change with the attraction above together!! Maybe I will use this block. But can I make a map with whole attraction related to this itinerary?

Thanks again!

[yang-anL]

Sorry for something more about 4:
I forgot to add dynamic link to the imagebox (v2). But after adding link URL, some items will disappear when viewing. Can you fix this bug together? It seems imagebox (v2) are not so compatible with view? Or something goes wrong.... Please.

[yang-anL]

Pardon me for updating.... about the above reply #2406931 , it suddenly apeears and become normal.
however I found a tilte bug shown in the image. I don't know what's going on.

And when editing template of attraction (景點) ， one more layout problem occurs. As showed in the images uploaded, contents should be in a gray container, but now it's gone....

Sorry for these updating bugs. Please help, thanks a lot !

New threads created by Waqar and linked to this one are listed below:

https://toolset.com/forums/topic/split-content-template-layout-changed/

[Waqar]

Thanks for the update and glad that my message helped.

> About 1: It shows the contents now. But I am curious that why I follow the tutorials, but I can't select the repeating field in my view

- When you'll insert a block in the loop of the view "external link list", for example, a single field block, you'll see the option to choose the current external link (which is the repeating field group post that the view is set to show), as a source.
( screenshot: hidden link )

With that option selected, you can show any standard fields, custom fields, or taxonomies from the current post in the view's loop.

In this particular case, I had to go with the "Fields and Text" block because you needed a link that used the name from one custom field and the actual URL from another.

> Another question is , can field and text block customize styles ?
> i.e. color or size, I change the sidebar typography but nothing change ?

- Yes, the styles that you'll add to the "Fields and Text" block's settings should apply to the enclosed content. Unless your theme's styles don't include more precise styles that can override it. You can try changing that block's "Typography" settings and let me know if that doesn't work.

> About 3: The gap shows in the front-end, but i looks normal in the back-end. I have uploaded screenshots.

- Thank you for the screenshot. The Toolset's YouTube block takes care of the responsiveness of the video, but, it seems that your active theme also applies some styles for the same.

To overcome this duplication of styles, you can include the following CSS code in the "Template for 遊記" template's CSS editor:

.tb-youtube > div {
    padding-top: 0px !important;
}

> However, the job you done for me is amazing. Map location will change with the attraction above together!! Maybe I will use this block. But can I make a map with whole attraction related to this itinerary?

- Because the source of markers for the map is set to a specific view block (i.e. 'attraction list'), the number of map markers would also depend on the number of results coming from that view.

If you'd like to show all the attractions on the map at once, you'll create a new view and set it to show all the related attraction results, without limit or pagination. Then when you'll choose this new view as the source of map markers in the map block, map markers for all the related attractions will show.

Because this thread has become too long and we recommend limiting each ticket to a single question or issue, I'm going to create a new ticket for the layout issue in your last reply and will follow up on it shortly.

[yang-anL]

Hi there,

(1)
I found if I add the CSS code to the "Template for 遊記", the whole video block disappeared. My video block is not buided in the template but the post itseft. does it make code fail?

(I have tried to build video block to template , but I don't know how to use conditional block to hide the whole video block if there is no related video post to itinerary.)

(2)
About the style of field and text, I uploaded an image. I know the theme seems to give link a brown color in default. But can't I change other typography if needed ?

Thanks for help!

Best regards.

[yang-anL]

In addition,

For map, I can't choose the custum field "attraction address" in the map marker dynamic source.
Attraction address is a custom field of 景點 ( post type: attraction) , which has a relationships to 遊記（post type: itinerary）

So I should be able to choose the custom fields belong to the related post ( attraction) in a itinerary, right ? But I can't .

[Waqar]

Thanks for writing back.

> I found if I add the CSS code to the "Template for 遊記", the whole video block disappeared.
> My video block is not buided in the template but the post itseft. does it make code fail?

- I've added a slightly updated CSS code and the video block's spacing is fixed now:

.tb-youtube > div > .fluid-width-video-wrapper {
    position: initial;
}

> About the style of field and text, I uploaded an image. I know the theme seems to give link a brown color in default.
> But can't I change other typography if needed ?

- This missing block setting styles seem to be the same issue that is being investigated in the other ticket.
( ref: https://toolset.com/forums/topic/split-content-template-layout-changed/ )

I'll follow up on this on the other ticket.

> For map, I can't choose the custum field "attraction address" in the map marker dynamic source.
> Attraction address is a custom field of 景點 ( post type: attraction) , which has a relationships to 遊記（post type: itinerary）
> So I should be able to choose the custom fields belong to the related post ( attraction) in a itinerary, right ? But I can't .

- I suppose, you're referring to the map block used at the bottom of the content template "Template for 遊記".

The template is for the "travel notes" post type, so you won't be able to use the "attraction address" field directly as a dynamic source for the map marker, because it is attached to the different "Attractions" post type.

In this case, the correct usage would be how it is set now. The source of the map marker would be a view block that is set to show results from the related "Attractions" posts.
( screenshot: hidden link )

[yang-anL]

Hi ,

Video issue: The gap did canceled, but can't the video itself 16:9 ?

Map issue:

If I want to the show all posts just like in the tutorial, does it work that change layout from slider ( one post at a time ) to grid layout ( all post showed) ?
https://toolset.com/lesson-placement/lesson-placements-1622939-1620853/

Why don't I try by myself? Because I found if I changed it to grid layout ( maybe 3 columns 9 items each page), it still shows just one post...... I don't know why I got obstacles so frequently ... ^^"

Besides, I got many test view when trying. Is there a way to delete useless view?

[Waqar]

> Video issue: The gap did canceled, but can't the video itself 16:9 ?

I did some testing with the Youtube block and your website's active theme "Soledad" on my test website and noticed that one of the script files from the theme adds some HTML around the YouTube block, resulting in this spacing conflict.

I've removed the CSS code from my last message and included the following script in the JS editor of the "Template for 遊記" content template and both the extra spacing and the video dimensions are fixed now.
( screenshot: hidden link )

jQuery( document ).ready(function() {
var vidTags = jQuery( ".tb-youtube .fluid-width-video-wrapper > iframe" );
vidTags.unwrap();
});

> If I want to the show all posts just like in the tutorial, does it work that change layout from slider ( one post at a time ) to grid layout ( all post showed) ?

- When you'll be creating a new view to show all the results as map markers at once, it doesn't matter which loop style or layout you select for it because you won't be actually showing anything from this view on the front-end. This view's only purpose would be to query all the results so that they can be then used in the map block for the map markers source.
(I would go with the simplest loop style 'unformatted')

> Why don't I try by myself? Because I found if I changed it to grid layout ( maybe 3 columns 9 items each page), it still shows just one post

- Most likely it would be because of the pagination settings in the view block.
( example screenshot: hidden link )

> Besides, I got many test view when trying. Is there a way to delete useless view?

- Please go to WP Admin -> Toolset -> Settings -> General and for the "Editing experience" select the option "Show both the legacy and Blocks interface and let me choose which to use for each item I build".

After this, the views management screen will become available at WP Admin -> Toolset -> Views.

[yang-anL]

Hi,

Appreciate all your help , the video issue is all fixed.

About the map, I try a new one view and it works as followed:
1. I show 3X3 items for each page, and the map will show these 9 markers.
2. And I turned 2nd page, there are still 5 items in this page. The map markers have gone at first, so I use the code you gave

[wpv-map-marker map_id='map-7' marker_id='marker-[wpv-post-id]' marker_field='wpcf-attraction-address'][/wpv-map-marker] (changing map _id manually )

After adding this, the map markers will correspond to items showed.

So, I think it works now . Is the reason why tutorial gym locations don't need extra codes due to it updating pages via search block?
_____

Besides, when using pagination, annoying black dots appear again.. And I can only control column gap by view loop setting. Row gap can not be changed.

Please help me this two small issue..... Thank you very much !

Best Regards

[Waqar]

> Is the reason why tutorial gym locations don't need extra codes due to it updating pages via search block?

- The Gym search page in the demo website uses the page refresh, not the AJAX to update the paginated results.
( hidden link )

But the view ('test view for showing all address') in your content template is set to update the pagination results using the AJAX and doesn't reload the page. This is why your view needed the map marker shortcode.

> Besides, when using pagination, annoying black dots appear again..

- To avoid these list-style black dots from appearing for all views, used on any page/content template, you can include the following custom CSS code at WP Admin -> Appearance -> Customize -> Custom CSS:

.wpv-view-output ul li {
list-style-type: none !important;    
}

> And I can only control column gap by view loop setting. Row gap can not be changed.

- The extra vertical space/gap between results in your screenshot comes from the Stackable plugin's CSS code.

You can override it using some custom CSS code added in the template's "CSS Editor":

.wpv-view-output .ugb-main-block {
    margin-bottom: 20px;
    margin-top: 20px;
}

Feel free to adjust the value 20px as needed to increase or decrease that vertical space/gap.

Tip: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

[yang-anL]

My issue is resolved now. Thank you!