Home › Toolset Professional Support › [Resolved] Images conflict
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
- | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | - |
- | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Kolkata (GMT+05:30)
Related documentation:
This topic contains 11 replies, has 2 voices.
Last updated by anarT 5 years ago.
Assisted by: Minesh.
I would like to display some images. I can add up to 3 images. When I add more than 3 images to my custom post type, all the other custom post type content (phone, e-mail etc.) disappear in the frontend. Screenshot attached.
The funny thing is, if I delete the e-mail and website fields, then it works with up to 5 images. When I delete also the phone field, then it will work with 6 images.
Website link:
hidden link
(at the moment i left there both variants. With 3 images and with 6 images. These should look exactly the same, but as you see, all the texts and images are gone with 6 images).
Installer and Archive files of the website:
hidden link
Regards
Anar
Hello. Thank you for contacting the Toolset support.
Thanks for the insights you shared when it used to work. I suspect it could be the theme/plugin conflict at the moment but I can share more accurate details once I'll deploy the duplicator package.
Have you tried the basic debug steps? as I see one JS error on browser's console but it seems not related but needs to check once I set up your test site.
In order to minimize the cause of the issue:
Could you please try to resolve your issue by deactivating all third-party plugins as well as the default theme to check for any possible conflicts with any of the plugins or themes?
Let me know if you find anything and I will get back to you by tomorrow.
I tried with default theme - still didn't work
I tried to deactivate all third-party plugins - still didn't work.
This is really strange.
With the duplicator you shared I found see that the slider with 6 slides works just fine.
Please check the following video: hidden link
The video created using the same page "trauerpapiere " you shared but its from the duplicator you shared which I installed on my test server.
Are you using any cashing plugins, please disable that, try to install the duplicator on another server that will help you to confirm that is there an issue or not?
Thanks for the quick feedback.
I tried another Server, deactivated caching plugin, installed the webpage with duplicator, but nothing changed.
I still have no images.
Here is the link (new server, installed with duplicator, caching plugin deactivated and deleted):
hidden link
I don't understand. I saw your video and as you say, it worked there. How is it possible? Do you have any other ideas?
I checked and on my browser, I see the images are rendered with the flexslider div:
<div style="max-width: 600px;" class="flexslider" align="center"> <ul class="slides"> <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="" data-thumb-alt=""><img src="<em><u>hidden link</u></em>" class="attachment-medium" alt="" title="" style="" srcset="<em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 900w" sizes="(max-width: 300px) 100vw, 300px" draggable="false" width="300" height="196"></li> <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="" class=""><img src="<em><u>hidden link</u></em>" class="attachment-medium" alt="" title="" style="" srcset="<em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 900w" sizes="(max-width: 300px) 100vw, 300px" draggable="false" width="300" height="196"></li> <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="" class=""><img src="<em><u>hidden link</u></em>" class="attachment-medium" alt="" title="" style="" srcset="<em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 900w" sizes="(max-width: 300px) 100vw, 300px" draggable="false" width="300" height="196"></li> <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="" class=""><img src="<em><u>hidden link</u></em>" class="attachment-medium" alt="" title="" style="" srcset="<em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 900w" sizes="(max-width: 300px) 100vw, 300px" draggable="false" width="300" height="196"></li> <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" data-thumb-alt="" class="flex-active-slide"><img src="<em><u>hidden link</u></em>" class="attachment-medium" alt="" title="" style="" srcset="<em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 900w" sizes="(max-width: 300px) 100vw, 300px" draggable="false" width="300" height="196"></li> <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="" class=""><img src="<em><u>hidden link</u></em>" class="attachment-medium" alt="" title="" style="" srcset="<em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 900w" sizes="(max-width: 300px) 100vw, 300px" draggable="false" width="300" height="196"></li> </ul> <ol class="flex-control-nav flex-control-paging"><li><a href="#" class="">1</a></li><li><a href="#" class="">2</a></li><li><a href="#" class="">3</a></li><li><a href="#" class="">4</a></li><li><a href="#" class="flex-active">5</a></li><li><a href="#" class="">6</a></li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
But with the link you shared: hidden link
I do not see the image tag is rendered within the every li tag.
<div align="center" style="max-width: 600px;" class="flexslider"> <ul class="slides"> <li class="flex-active-slide" data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;"></li> <li data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;"></li> <li data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;"></li> <li data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;"></li> <li data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;"></li> <li data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;"></li> </ul> <ol class="flex-control-nav flex-control-paging"><li><a href="#" class="flex-active">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
Can you please share wp-admin access details so I can check further whats going wrong with your setup.
*** 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.
I've duplicated the view here:
=> hidden link
And just display the flexslider code withing the view's body:
<div align="center" style="max-width: 300px;" class="flexslider"> <ul class="slides"> [wpv-for-each field="wpcf-bilder-gallery"] <li>[types field="bilder-gallery" size="medium" align="none" resize="pad" padding_color="#FFF"][/types]</li> [/wpv-for-each] </ul> </div>
And after I checked the page => hidden link it used to work.
Then, I've added the fullcode of loop of your original view and again, I see the different results and I see with all loop iteration I see the map as well as the slider. As you can see all images with each loop working here:
=> hidden link
With your original view: hidden link
I see you have added lots on conditional statements as well as you are using the [wpv-for-each] within the [wpv-conditional] statement. I try to made many changes to your original view and load the page on frontend but I see always same results. It looks like either there is aggressive caching for the page: hidden link from server.
I suggest you should try to create a new view step by step and add the things step by step and check whats working and check what breaks the things because it can be anything. strange this is that it works with the test page I've created as you can see: hidden link
The problem is, that I can't place [wpv-for-each] within the [wpv-conditional] statement. If I remove the conditional statement, then everything works fine. I'm wondering if you have any workarounds for this?
I need those conditional statements as I have different layouts for different search results. I have one custom post type with the opportunity to choose a different layout based on the custom field (field slug "paket").
You can replace the [wpv-for-each] shortcode with your Types shortcode and add the separator attribute.
For example:
<ul> <li>[types field="my-number" separator="</li><li>"][/types]</li> </ul>
More info:
=> https://toolset.com/documentation/user-guides/repeating-fields/#Displaying%20Repeating%20Fields
Unfortunately exactly the same result. There is no difference if I use the [wpv-for-each] or if I'll use the Types shortcode and add the separator attribute. I can display only 3 images. No difference. When I have 4 or more images, then they will disappear.
Can you please check now: hidden link
After too much troubleshooting as your view's loop output contains too many conditionals statements finally I'm able to find the solution for you.
I've added now as many as 10 images and it works.
I've replaced the slider code's [wpv-for-each] loop that is added as with the following view's loop editor:
=> hidden link
[wpv-for-each field="wpcf-bilder-gallery"] <li>[types field="bilder-gallery" size="medium" align="none" resize="pad" padding_color="#FFF"][/types]</li> [/wpv-for-each]
With the following code:
<li>[types field="bilder-gallery" size="medium" align="none" resize="pad" padding_color="#FFF" item="[wpv-post-id]" separator="</li><li>"][/types]</li>
Can you please confirm it works at your end as well.
Thank you, thank you for your amazing support!
My issue is resolved now. Thank you!