1. zuotoski
  2. Bug Report
  3. Saturday, May 10 2014, 04:12 AM
Hello!
The first version that I installed and tested, picture viewer was scaling the image inside the frame. Now, this is not happening anymore and to see the comment area, Who posted, Delete Photo, Report Photo and share this, I have to scrool down.

I've changed the template to Beez3 and Protostar to see if it had something to do with my template, but the result was the same. I also activated the Bootstrap CSS in the Easy Profile Configuration page, but nothing seems to make any effect. As a matter of fact, the images are the same that I've uploaded to the Social Network Test Page, and there the images are resized inside the frame.

Attached goes an image of what I am talking about.

Regards.
Attachments (1)
admin Accepted Answer
Admin
Hi,
we have not change nothing.

it is normal, the scroll is required and depends of:
- image ratio
- browser height (if your browser have 100~400px of height, it' impossible render Menu,Image List,Main Image, Comment and Options)
- browser width (the image have the same width of window - exclude 15px pf padding)
- number of comment (the comment may be infinite)

But you can create own solution with some line of css (example in screenshot).
Attachments (1)
  1. more than a month ago
  2. Bug Report
  3. # 1
zuotoski Accepted Answer
Thanks for the tip, but this is not what I want. I want it to work just like in your demo page where the image fits itself in the browser. As I said, the images that I am testing here are the same as the images that I sent to the demo page.

The first version of Social Profile Plugin as working fine... I understand that you said that you didn't do anything to change it, but somehow it did. I may be wrong, but I think that one of the purposes of responsiveness it to fit images to show 100% of it inside a div, and it is not happening here.

As a experienced developer professional as you are, you sure know how do people work - if there is something that is not on sight, they leave it ot just "don't know that it exists". To leave the interactive out of sight is not a good idea. Sure, I can reduce my images to fit a screen of 1024 x 768 or something, but will the users do it? Without mention that it will ruin the image for a 1920 x 1080 pixels resolution.

Please, think about it.
  1. more than a month ago
  2. Bug Report
  3. # 2
admin Accepted Answer
Admin
Ok,
the image are not fit with window, the only change is this:
in file /plugins/jsn/socialnetwork/app/config/bootstrap.php at line 199 and 200 you can set the image resize for uploaded photo, before PHOTO_WIDTH was 1200px now is 1400px.

In alternative you can add this directive to CSS to set max-height of photo:
#tag-wrapper img {
width: auto;
max-height: 400px;
}
  1. more than a month ago
  2. Bug Report
  3. # 3
zuotoski Accepted Answer
Ok,

It really helped, made a difference. A few months ago I didn't care how my pages looked like in mobiles or something, and to be honest I don't like mobiles and something either (just like social networks concept - please, don't misunderstand "social networks concept" with your project concept, I am talking about a general concept here - I think that this kind of thing is underused and underestimated) - going back to the mobile thing... well, like it or not this is what most people have been using to be online, and now I worrie if all my ressources are available to the user, if the important things are visible and at the reach. This is why I am so anoying with layouts, this is why I've been pushing you with "little" things.

I don't know how other social networks deal with situations like this about the image viewer, but in my opinion it should have a way to show to the mobile user the comment area, just like to the tablet and "normal" user and it should change according to the way the user turns the screen (horizontal or vertical). My knowlegment in CSS and stuff is poor, I am trying very hard to learn it and understand, to do not depend on others or even not wast someone else's time, but it is a looooong term curve of learning, and evolution does not wait. I have my limitations, but I do what I can - in this case, I tried many things, but one way or another, something was always ending wrong.

Well, thanks for your help - I'll continue the tests..
  1. more than a month ago
  2. Bug Report
  3. # 4
zuotoski Accepted Answer
I decided to use your tip but with a twist - if you see anything wrong, please correct me:
#tag-wrapper img {
max-width: 80%!important;
max-height: 800px!important;
}


This way, it fits nice on a 1920 x 1080 screen and also adjusts fine on most mobiles and tablets, it is not the ideal because sometimes the comments area gets hidden, so the user must scroll to see it, but it's ok now.

Thank you again.
  1. more than a month ago
  2. Bug Report
  3. # 5
admin Accepted Answer
Admin
I think the better is this:
#tag-wrapper img {
width: auto !important;
max-height: 60% !important;
}

in landscape window you see a fullwidth image (example smartphone)
  1. more than a month ago
  2. Bug Report
  3. # 6
zuotoski Accepted Answer
Content Protected
  1. more than a month ago
  2. Bug Report
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.
Sorry, the discussion is currently locked. You will not be able to post a reply at the moment.