Display pictures on activity wall side by side

Archives rtMedia
#1

Hello,

I have a question about rtmedia:

Is it possible to display pictures on activity wall side by side (instead of one by one)?

Thank you very much

#2

Plz help me

thanks

#3

Hello @viriis,

For arranging multiple images in activity side by side try below piece of CSS code to ‘Custom CSS’ tab under rtMedia admin settings:

For two side by side images:

.rtmedia-activity-media-length-2 {
    overflow: hidden;
}

#buddypress ul.rtmedia-activity-media-length-2 li {
    display: inline-block;
    float: left;
    padding-left: 2px;
    padding-right: 2px;
    width: 50%;
}

.rtmedia-activity-media-length-2 .rtmedia-list-item > a {
    display: block;
}

For three side by side images:

.rtmedia-activity-media-length-3 {
    overflow: hidden;
}

#buddypress ul.rtmedia-activity-media-length-3 li {
    display: inline-block;
    float: left;
    padding-left: 2px;
    padding-right: 2px;
    width: 33.33%;
}

.rtmedia-activity-media-length-3 .rtmedia-list-item > a {
    display: block;
}

NOTE : Depending on the number of image upload, you can set number of columns for side by side layout. For example for 4 column layout you can further set class names -3 to -4 and width: 33.33%; to width: 25%;

Thank you.

Pictures not show in a grid format in activity
Image size Activity stream
#4

Thank you very much for your help… Thank you very much… Thank you very much… Thank you very much… Thank you very much… Thank you very much… Thank you :slight_smile:

Perfect…

#5

You are welcome @viriis :slight_smile:

#6

Hi, could you please tell me if I wanted it to display 4 photo’s or 6 photo’s to display 2 under 2 or 3 under 3. What code would do this.

#7

Hello @neild1971,

You can add class names with which you want to arrange in respective column width. Use class names -2 and -4 with width: 50% for 2 under 2 layout. OR use class names -3 and -6 with width: 33.33% for 3 under 3 layout.

For example ( 2 under 2 for 4 images ) :

.rtmedia-activity-media-length-2, .rtmedia-activity-media-length-4 {
    overflow: hidden;
}    
#buddypress ul.rtmedia-activity-media-length-2 li, #buddypress ul.rtmedia-activity-media-length-4 li {
    display: inline-block;
    float: left;
    padding-left: 2px;
    padding-right: 2px;
    width: 50%;
}    
.rtmedia-activity-media-length-2 .rtmedia-list-item > a, .rtmedia-activity-media-length-4 .rtmedia-list-item > a {
    display: block;
}

Thank you.

#8

Hi @pranalipatel,

Two images show side by side but if i uploaded one image with one video then video thumbnail not appear correctly. Kindly help us in this regard.

image.jpg823×625 71.1 KB

#9

Hi @pranalipatel,

if i uploaded two videos then they are also not appeared correctly. Kindly help me in this regard.

2 videos.jpg1129×521 63.2 KB

#10

Hello @Aqeel_Iqbal,

Yes, the custom code you are using will only work with the media type Photo.

There are different media types ( photo, music, video, documents ) available. Also, it is very random which two media will be attached to the same activity hence it would be difficult to arrange each of the possibility with such CSS.

Thanks.

#11

Hi @pranalipatel,

OK

Is there any way to display two videos side by side like pictures?

#12

Hello @Aqeel_Iqbal,

There is not any custom CSS available to assist you for videos at this moment. However, we will discuss your requirement with the team if we can share any possible workaround for this and update you regarding that.

Thanks,

#13

Hi @pranalipatel,

Bundle of Thanks for considering that issue

I am waiting for your reply.

#14

Hi,

This topic remains only related to display layout of Photos on activity stream. There is not any further development of other media types so far.

Here, you can find the document on this with some examples - https://rtmedia.io/docs/developers/customize-display-layout-photos-buddypress-activity-wall/

Closing this topic now.

Thanks,

#15