Pods image thumbnail doesn't show up after upload

[styloola]

I’m using Kleo with Buddypress and Pods framework.
If I create a Pod with an image field, after I uploaded the image, the thumbnail doesn’t show up. This works in the admin section and with a standard theme like Twenty Fifteen.
It seems that Pods uses Plupload but I think incompatibility resides in an event not firing or in a particular css class.
The image IS upload to the system and saved in the Pod, so everything works fine, but without a thumbnail showing up, the user think nothing is working.

[Abe]

Hi, does it shows added after page refresh? try to inspect in your browser console if there are any Javascript errors.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[styloola]

Unfortunately there’s no error in the console
The image is added in the dom, but is not shown. Here is the dom after the image upload.

COPY CODE

<li class="pods-file hidden" id="pods-file-2931" style="display: list-item;">
        <input name="pods_field_cover[2931][id]" data-name-clean="pods-field-cover-id-id" id="pods-form-ui-pods-field-cover-id-id" class="pods-form-ui-field-type-text pods-form-ui-field-name-pods-field-cover-id-id" type="hidden" value="2931">

        <ul class="pods-file-meta media-item">
            
            <li class="pods-file-col pods-file-icon">
                <img class="pinkynail" src="http://local-www.apetime.it/wp-content/uploads/2015/01/2523878740_83d0bea717_b5-150x150.jpg" alt="Icon">
            </li>

            <li class="pods-file-col pods-file-name">
                2523878740_83d0bea717_b            </li>

            <li class="pods-file-col pods-file-delete"><a href="#delete">Delete</a></li>

			        </ul>
    </li>

If I remove the “hidden” class from the first < li >, using the inspector, the image appears.

This is the same DOM part taken with theme Twenty Fifteen.

COPY CODE

<li class="pods-file hidden" id="pods-file-20" style="">
        <input name="pods_field_image[20][id]" data-name-clean="pods-field-image-id-id" id="pods-form-ui-pods-field-image-id-id" class="pods-form-ui-field-type-text pods-form-ui-field-name-pods-field-image-id-id" type="hidden" value="20">

        <ul class="pods-file-meta media-item">
            
            <li class="pods-file-col pods-file-icon">
                <img class="pinkynail" src="http://www.scarletpassion.com/wp-content/uploads/2015/01/2523878740_83d0bea717_b1-150x150.jpg" alt="Icon">
            </li>

            <li class="pods-file-col pods-file-name">
                    <input name="pods_field_image[20][title]" data-name-clean="pods-field-image-id-title" id="pods-form-ui-pods-field-image-id-title" class="pods-form-ui-field-type-text pods-form-ui-field-name-pods-field-image-id-title" type="text" value="2523878740_83d0bea717_b" tabindex="2" maxlength="255">
            </li>

            <li class="pods-file-col pods-file-delete"><a href="#delete">Delete</a></li>

			        </ul>
    </li>

In this case the image appears even if there is the same “hidden” class. Could it be a CSS error? Or maybe Kleo is defining “hidden” behaviour in a different way from Twenty Fifteen?

[styloola]

I think I found the problem: it’a css definition for the “hidden” class in bootstrap:

COPY CODE

.hidden {
display: none!important;
visibility: hidden!important;
}

Any idea on how to “remove” it?
I tried adding this to the style.css in the kleo-child dir, with no success:

COPY CODE

#pods-file-2931 {
    display: block;
    visibility: visible;
}

[styloola]

The problem is not in Kleo but I think is Pods bug: http://pods.io/forums/topic/pods-image-thumbnail-doesnt-show-up-after-upload/

[Abe]

So all good now?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[styloola]

Yes, I keep the issue opened on Pods forum, while I already marked it resolved here.

[Author]

Posts