File fields containing images are not displayed correctly

[dwanjuki]

Describe the bug
File type fields containing images are not displaying correctly in the Member Directory .
The filename shows beside the image and shifts the image to the left.

To Reproduce
Steps to reproduce the behavior:

1. Create a File user field.
2. Add the user field to your directory or profile's elements.
3. Upload an image to the field for a member.
4. View the member in the directory.

Screenshots

Expected behavior
The uploaded image appears in full.

Isolating the problem (mark completed items with an [x]):

• I have deactivated all other plugins and confirmed that this bug occurs when only Paid Memberships Pro and Member Directory and Profile Pages are active.
• This bug happens with a default WordPress theme active, or Memberlite.
• I can reproduce this bug consistently using the steps above.

WordPress Environment

Details

PMPro 3.6.2 PMPro Member Directory 2.1.2

[dwanjuki]

Temp CSS workaround to hide filename and show image in full.

.pmpro_member_profile_field .pmpro_form_field-file-preview img + .pmpro_form_field-file-name {
    display: none;
}

[dwanjuki]

Related: strangerstudios/paid-memberships-pro#3537

[kimcoleman]

The fix in core should be the fix needed to trickle down here to directory.

Once that is in place, the CSS to make images display full width (across both columns) without hiding the file name will be:

.pmpro_member_profile .pmpro_card_content .pmpro_member_profile_field:has(img) { flex-basis: 100%; width: 100%; }

We are also working on a potential tutorial on adding a true image "gallery" to a profile page that would load the images in a lightbox on click.