OSSN GROUPS Component: group cover image on mobiles/tablets is not responsive

[SAWD1507]

In creating Cover images for Groups, I understand that the cover picture must be at least 850 x 300 or greater, which works fine on a standard laptop or desk top machine.

However, the image is not responsive on mobile devices or tablets and only shows a portion of the image.

OSSN profile covers are responsive.

Tested as several devices as well as Firefox Web developer tools with the same results

group cover view on tablet device:

group cover -Normal view on laptop:

[lianglee]

Thanks for reporting as i requested you to post it here, we'll take a look and see.

[SAWD1507]

Thank you

[githubertus]

Well, I wouldn't consider this to be a bug, but at best a 'limitation' of the GoBlue theme.
Since the theme's cover div comes with a constant fixed height of 200px all over the place (yes, reduced to 188px with very narrow widths which doesn't make too much a difference) - how would you make it 'responsive' then? You only got 3 choices:

1. shrink/enlarge the image width to fit the device width - which will destroy the original image ratio and make the pic look strange
2. shrink/enlarge the height and width of the div accordinging to the device width - which will lead to an either too large height or a so small height that you won't recognize any more details
3. keep the ratio intact and display only a cropped part of the image (the current solution)

All three solutions are in fact not 100% satisfying, thus if you want to display (even readable information) inside the image AND keep the ratio, the only solution would be to save and keep more than only one image and load the best fitting one depending on the device in use.

[SAWD1507]

@githubertus

I note what you say, however....

As far as I am concerned.....and I am not a developer....I purchased a product that includes the GROUP component ...there was no indication that it would work only at certain breakpoints and not on mobile devices/tablets.

As far as it being a "bug", as I said, I am not a developer, I am a user, I am not in a position to classify it as such...however, if it does not work then it is a bug as far as I am concerned as most of my members will undoubtedly access the site via a mobile device, and the GROUP facility does not work for those devices to display the cover correctly.

All of your suggestions may well be "sound", but to be perfectly honest, they are not practicable, given that there is a vast difference in the profile covers already doing its job at being "responsive"

Given that users WILL NOT HAVE the same device with the same resolution, your final option is equally not very practicable.

In my unqualified (non developer) opinion, I would say that if it can be done for profile covers then there should not be any reason why the same cannot be applied to grover covers, but what do I know.

[githubertus]

Hmm, honestly I'm a little irritated at this point. I'm running Ossn 5.1 free / GoBlue theme, and when using the same image with a profile and a group I'm experiencing these display limitations in BOTH cases.

But if I got you right, on your community the same image scales perfectly on a profile page, but not on a groups page.

So please provide the original image and let us know the Ossn version / theme you're using.

[SAWD1507]

I am little confused, although I am not sure how or why you would be irritated at this point.

I am running OSSN 5.1-build-10091901 Premium with both GoBlue 4.4 and GoBlack 4.4 with same results. I have also reinstalled OSSN on a different domain with the same results. It is a fact that the profile covers do "resize" at different resolutions but I would not exactly call it a perfect resize, it does resize with minor cropping to our needs, but not as much as for the group covers in this instant issue and I have tested same with different devices on different OS platforms with same results with different browsers. The cropping for group covers is very, very noticeable where as profile covers are minor in our opinion so that is why we have not reported an issue with profile covers.

As to why you may be experiencing limitations in both cases I cannot ascertain, as I have indicated, I am not a developer and I am simply a user with other admins to build a community site.

I have reported the matter to Softlabs Support, hence why I am here. Perhaps you would be better to direct your question to them for I do not believe I can be of any help more than I have said

[SAWD1507]

Using the same "group cover" in the examples above, I used it as a profile cover and viewed the profile on an ipad at 736, it resizes as expected, whereas repeating it for a group cover crops badly and does not resize, as reported.

IPAD 736 view ----responsive profile cover

[githubertus]

" I do not believe I can be of any help more than I have said "

You could have been - maybe - if you had simply provided your image as requested in order to make me reproduce your issue. Because so far ... I can't.
Using a pic of 850 x 300 - as you said in your first posting like this one below ...

on my site gives the same view both for the profile AND the groups page

[SAWD1507]

" I'm running Ossn 5.1 free / GoBlue theme,"

Well, for starters I am not using the Free version so perhaps we can get on the same hymn sheet.
Can you replicate the issue on the Premium version?

secondly, my last comment indicated I used the same image for both group and profile covers with different results, not the same as your issue.

finally, in order for me not to be confusing issues further, as you appear to be getting confused with what I am saying, can you tell me if you are part of the development team or Soft Labs that will be looking into this "bug", given that I have now had two interpretations, one saying it is a bug, to whom I place my faith, and you, indicating that ....perhaps...that I could be doing something wrong.

If you are part of the development team looking into this issue for Soft Labs, then I am more than happy to "comply", otherwise if you are not then I would feel more comfortable with allowing lianglee to deal with the issue. So can you clarify for me please. I do not want to be communicating to two or more individuals, given that your opinion of this being a "bug" differs from that of lianglee.

Thanks

[SAWD1507]

I think I have made my issue clear, however, again, I must repeat....using the same image at 850x300...

GROUP COVER: standard laptop view...

GROUP COVER: ipad view at 768

PROFILE COVER: ipad view at 768

I am therefore confused at what you say @githubertus, for surely, if you are correct then the same image used would be cropped for the PROFILE COVER on the ipad at 768? not so?

I am giving you all the details that I have,
"You could have been - maybe - if you had simply provided your image as requested in order to make me reproduce your issue"

Providing the image for you to attempt to replicate the same issue when I am showing you what is happening is illogical when I am telling you and showing you....

Unless I am doing something wrong in Photoshop and also in OSSN Groups, then I have been using these images fine for laptop development, the issue only showing when it is tested on mobile devices and tablets.....how is providing you with the image going to solve the GROUPS issue when I do not have the same issue as you on PROFILE COVERS ??

I do not have an issue with PROFILE COVERS (any cropping is manageable for our use) .....only GROUP COVERS.

[lianglee]

@SAWD1507, i have seen the conversation and in softlab24 ticket i mentioned this can be issue as i can't say anything without investigating. Zetman is part of the team and senior developer than me.

I will take a look into what exactly is wrong with it, a little be patience and time is required.

[SAWD1507]

@lianglee

I take it that "ZETMAN" is githubertus, I can only but reiterate, that I am simply a user of OSSN and not a developer, I was reluctant to even join GitHub as personally I have no use for it, however, that aside, perhaps if I were introduced from the outset at to whom I was talking to or who was doing what then the conversation ....perhaps....would have gone in a different direction.

That being said, again, as a user, I simply wish to have the issue resolved. I am at pains to get the point across that in the Premium version I have the issue. You yourself indicated it was an issue, githubertus indicated that he was using the FREE version. I see that as a non starter as to replicate the issue in greater detail I would have thought that the same version as the reported fault should be used.

I am none the wiser as to if the components in both the free and the premium version SHOULD act in the same way as I believe there is some limitations in the free version.....I may be incorrect on that.

Whomever will be looking at the issue is not really of great concern, as far as I am concerned, I reported the issue to Soft Labs and I have ended up here, so it is not vital to me as to whom will look at the matter as long as the matter does get investigated, for as I have indicated, the GROUPS component forms a vital if not main feature of our community site and to be honest we cannot deploy live until it is resolved, as a large number of our users will be mobile/tablet users.

I appreciate that a little patience is required and I am prepared to wait a little while, however, I have noted that there are reported issues from August and a few weeks ago, I do not expect an overnight resolution but I would appreciate some indication as to how long this would take, for as I said, I cannot deploy live without it.

As I indicated in the softlab24 ticket, I have also encountered issues with the CHAT bar also not appearing at different resolutions, thus giving me the impression that this is a wider issue for the lower resolutions, something I will be looking into at our end. The Groups and the Chat components are vital to what we are doing, I am willing to give some leeway for you ....or whomever.....to obviously investigate the issue, but at the same time, that patience is on a tight schedule for deploying the site and I shall enquire as to its progress at intervals.

If Zetman requires any further information from me then as indicated, I will comply, I was not aware of who was who for supporting this issue or softlabs in general.....I am just a user with a paid premium product and would wish the matters resolved.

Thank you for understanding and in turn for your patience.

[SAWD1507]

@githubertus

Now that lianglee has explained, if you wish any further information from myself on the matter then please ask.

As I am not part of Softlabs, if the 5,1 Free version should work exactly as the 5.1 Premium version then I cannot understand why you are getting a different result to me. As indicated, I have the 850x300 image working on profile covers to a manageable acceptance but not in the group covers.

The images above indicate that to be so. I am now playing around with different image sizes above and below that minimum width to see if any improvement can be made.

Again if you require any further information then please ask.

[SAWD1507]

I have done the following from our end:
OSSN v5.1 is installed

Created a new cover image at 850x300:

Removed OSSN v5.1 groups Component and replaced it with OSSN 5.0 Groups component (as I know that had worked previously for me in v 5.0)

I created a new TEST FOLDER Group and uploaded the newly created cover and tested at different resolutions with the now v5.0 groups component installed:

Laptop/development view:

iPad 768 view ** Responsive and does not crop **

iPhone 414 view: ** Responsive and does not crop **

Galaxy 360 view: ** Responsive and does not crop **

Therefore, the Groups Component from v5.0 works in my case, but it does not work in v5.1 for Group covers...

However, in testing the Profile cover with 5.0 groups component installed (both 5.1 and 5.0 show that the Group component is at v3.0 ? ) :

the minimum size obtained before it breaks the profile cover is 481:

below 481 the profile cover no longer is responsive (whereas the groups cover is responsive)

Given that, in a mobile world, users will want to use OSSN on the go then both the profile cover and the group cover should have a minimum resolution before it breaks.... I feel that should be 360, unless there are technical reasons why that would be impossible... However, I am often reminded by our testers of that annoying phrase..... "Well Facebook can do it, why can't OSSN"....and although I am quick to defend OSSN and say "This is not Facebook", I can understand the logic, technical or otherwise, as to the statement.

If there are no technical reasons for using the v5.0 Groups component in OSSN v5.1, other than this, then this would be a very temporary workaround....until it is properly investigated and I shall worry about profile covers another time as group covers are more important to us.

[lianglee]

i hope your users don't compare it with facebook. Further i have mentioned that we are working on it. so a little bit patience is required, You may try to add following in your css file and flush your cache.

.ossn-group-cover img {
    width:100% !important;
}

[lianglee]

Please let me know if that work for you ?

[lianglee]

REF: make left/right cover repositioning work in groups #1414

[lianglee]

In favor of #1523 covers now require at least length of container , example at least 1040px in width. and 300px in height.

(Height of container is actually 200px but if cover is exactly of same size, it will lose the functionality of re position)

[SAWD1507]

Added:

.ossn-group-cover img {
width:100% !important;
}

Did not work for group covers at 360x740 using group component in 5.1

Does work for group covers at 360x740 using group component in 5.0

[SAWD1507]

@lianglee

"hope your users don't compare it with facebook."

Sadly they do, for although Facebook is Facebook and we al know the history and status of that platform, many users are fed up with that restrictive method and want something flexible and controllable within certain remits., I saw OSSN as an alternative that would deliver what my users wanted....but there is a however..... I have been attempting to streamline OSSN for well over 6 months now to deploy a live community site that is working to what my users say and want (within reason)...hence issues such as IP address logging, access to the platform from ALL mobile devices and tablets (no one carries a desktop machine around with them), or even the ability to scroll up to (window.scrollTo(0,0)) when at the bottom of a 100 plus long Newsfeed filled with various postings or even to scroll the Left/Right panels independent of the Newsfeed appears to be just some of what users want....at present OSSN does not give that "out of the box" whilst other platforms can and do, including that old Facebook. So when they compare "Well facebook can do it" with OSSN, they are the users that might just stick with Facebook and not cross over to OSSN as users.

I appreciate the modular format of OSSN and given its hefty price tag compared to others, the components to do basic things "Like facebook" are the attractions that users want to see....They believe OSSN lacks it. reply masked by admin $lianglee...That is just my opinion.

"Further i have mentioned that we are working on it. so a little bit patience is required"

I have already indicated that I am prepared to wait.....a little.... By that I mean that as I have already indicated, the majority of users of today will be mobile/tablet based.... I am a few weeks away from a live deployment.....Suffice to say that I cannot deploy until the users of mobile/tablets can adequately view Group/profile cover images correctly and I must allow you to investigate the matter.....but at the same time, as they say, patience has limitations, and that is not to sound negative, only to say that we cannot afford to wait weeks...we either deploy as is and allow OSSN to get a bad rep due to the issue or wait till it is resolved. We have chosen to wait for a while to allow you to investigate whilst we work on other issues.

"You may try to add following in your css file and flush your cache."

Tried and tested.....It appears that the Groups component from OSSN v5.0 is much more stable than the upgrade 5.1

"In favor of #1523 covers now require at least length of container , example at least 1040px in width. and 300px in height."

We have created the cover at 1040 and it works for Groups at lower resolutions, but breaks the profile covers at the same resolutions......there appears to be a trade off between v5.0 and 5.1 as well as the Profile covers.... therefore we....and I am very sure other admins in the same position... cannot therefore use the components for deployment.

As we would have multiple users at multiple resolutions, we cannot create an image for each possible mobile device, nor can we have a total responsive image at different px lengths. hence why our beta testers (users) have already said "Well facebook can do it, Why can OSSN not do it to?" Their frustration is felt by us, the admins.....That is not a direct slur on you or OSSN but a reality of what is happening.

[lianglee]

I understand your users frustration and we'll work in future to find some solution on the covers.