Spacing between images.

Hey again Troy,

Glad you actually mentioned that since I didn’t recognize the username ??

I’ve checked your activity page and I couldn’t find this anywhere. The only place where there are two images you can actually see the space between them, see screenshot https://screencast.com/t/faZRAWwffEeq.

I also check the lower resolutions but couldn’t find anything there.

Please advise,
Bojan

Bojan,
I do see the space on mobile now… weird that I wasn’t seeing it.
What I am hoping to have happen with image uploads (so they match how the links look on the activity which is a 100% wide thumbnail image) is this:

If a user uploads a single image it would view at 100% wide if they uploaded two images it would scale them to view two side by side and is they uploaded more it would stack them 2 up side by side. Currently if I set the setting in the plugin to have the image view at 400px wide. If they upload one image it is viewed at this size (small compared to the rest of the timeline) and looks funny. I can set the settings to have the image view at 800px wide and if one image is uploaded it looks great on the activity, however if they upload more than one image the images are stacked on top of each other at 800px wide so their post becomes really long and you have to scroll to view the images.

Does this make sense? Is this something that is possible to fix?

Thanks for your time,
Troy

I posted up 3 images as an example.
Is there custom css for the image posts similar to the css that you gave me for the links?
It would be nice to space the text content of the post away from the images a little bit more.

Thanks,
Troy

Also… the space between the images doesn’t show on desktop browsers.

Troy

Hey again Troy,

This is by the way what I am seeing on my desktop https://screencast.com/t/zDWMGMrAUA, so I’m not sure what you’re referring to, and on the top all the images are 100% wide, see screenshot https://screencast.com/t/sntvtybI8K.

We can do it with CSS but this will make the image look pretty bad as these are image thumbnails with smaller dimensions, you can try using bigger size of those thumbnails as I suggested in another thread by using the option in the plugin settings, that image already has maximum width defined to 100% so it will not go out of it’s holder if that makes sense. Also make sure to regenerate thumbnails once you do this so it affects older images as well.

Best regards,
Bojan

Bojan,

Yes… I see the spacing on the desktop and mobile…. I had to clear all the browser caches, website data and cookies. The second screenshot you sent is actually a link post and it is displaying correctly with the code we did before.

The two shots of the belt (first screen shot) were posted with the plugin setting at 400px wide so they are small. Now I have the setting at 800px (that is the width of the container) wide and you can see three images of golfers I posted near the top and they are all at 100% wide. What I’m hoping is that if a user posts a single image it will post at 100% wide but if they post two or more images it will make them fit at two side by side at 50% width. Makes for a nicer layout with multiple images.

Let me know if that makes sense and would be possible.

Thanks,
Troy

Found an issue!
It wasn’t a cache issue that I wasn’t seeing the spaces between images it has to do with if you are logged in or not.

If I’m logged in as a user you don’t see the spaces between images. Logged out you do see it.

Troy

Hey Troy,

Do I still have that account on your site? I’ve tried logging in but couldn’t? Did you remove it?

Please let me know

Cheers,
Bojan

I deleted it. You can just join again.

Sorry.
Troy

Hey Troy,

I’ve checked your site while logged in and I found what’s causing this. Did you by any chance add the following:

.bpfb_images br {
    display: none!important;
}

If yes please remove that and the space between the images will be back.

Best regards,
Bojan

Where did you find this code located? I don’t remember putting it in. I don’t see it in custom css.

Troy

Hey Troy,

It’s actually not in the custom CSS file but rather in one of the plugin files called bpfb_interface.css which is located in /wp-content/plugins/buddypress-activity-plus/css/.

I double checked the same file on my sandbox site and I couldn’t find that so someone definitely added that. You can override it by adding the following custom CSS:

.activity-inner .bpfb_images br {
    display: block !important;
}

Hope this helps ??

Cheers,
Bojan

I removed that CSS from the bpfb_interface.css files and it fixed the issue as you stated. Have no idea how it got there.

Thanks,
Troy

ps. I have two other questions but will start a new thread so this can be marked as resloved.

Sure thing, glad that helped ??

Cheers,
Bojan