Notice

The forum is in read only mode.

Support Forum

Welcome! Support Forums have been reactivated

Auto adjust images

2 years 5 months ago
  • Robby's Avatar
    Topic Author
  • Robby
  • Offline
  • Fresh Boarder
  • Posts: 79
  • Thank you received: 0
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi,

How do I set all user images to auto adjust to fit the screen automatically?

Attachments:
2 years 5 months ago
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi
The image are using max-width: 100%; on the wall stream, if you will manually set a width and height for the image it will break and aspect ratio and also show same width for all screen size.
You can force the image via CSS code to use static size.

Regards

2 years 5 months ago
  • Robby's Avatar
    Topic Author
  • Robby
  • Offline
  • Fresh Boarder
  • Posts: 79
  • Thank you received: 0
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi,

I don't want to break the layout. I want the images to resize to fit the designated width and height. Right now it doesn't do that. When I upload images on JomSocial, I don't have to resize it, and it gives me options to crop. How can I set all that up so my site can be user friendly? I don't know css code.

Thanks,

2 years 5 months ago
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi
The suggestion is for wall stream because when I replied there was no image showing in your first post.
When you upload an image on site it will use its original size. And if you will not crop it for thumbnail it will use the original size.
This is how it works, the profile has the same size of the container and it will auto resize the images, if you will force the image via CSS it will break the aspect ratio of the image.

Let me know if you want to change the size of the thumbnail container because auto resize of image always depends on the container size, and auto crop does not a solution as every image has a different graphic in it.



Regards

2 years 5 months ago
  • Robby's Avatar
    Topic Author
  • Robby
  • Offline
  • Fresh Boarder
  • Posts: 79
  • Thank you received: 0
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi,

On my events page it doesn't automatically resize. I didn't change the code. Could you take a look?

2 years 5 months ago
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi
This is not the profile pic.
Its the event image that is in the background.If you will modife the background css it will not fill the full space of background.
Try this code in /css/custom.css file if you want to show the full background image.

.joms-list--card .joms-list__cover-image {
    background-size: contain!important;
}

Regards

2 years 5 months ago
  • Robby's Avatar
    Topic Author
  • Robby
  • Offline
  • Fresh Boarder
  • Posts: 79
  • Thank you received: 0
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi,

I tried the code, but it didn't work.

2 years 5 months ago
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi
Kindly check there is no code in custom.css file as I suggested here: your site URL /templates/ja_magz_ii/css/custom.css
Once you added the code it will look like this : Removed

Its not an issue, background image fill the full space if you will force it to show 100% it will not fill the full container space.


Regards

2 years 5 months ago
  • Robby's Avatar
    Topic Author
  • Robby
  • Offline
  • Fresh Boarder
  • Posts: 79
  • Thank you received: 0
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi,

Could you remove the link and the screenshot of my site? I tried the code. I deleted after i saw that it didn't work.

2 years 5 months ago
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi
We removed the link and screenshot.
I added it to show the code is correct and if you will add the code how it will look on your site.


Regards

2 years 5 months ago
  • Robby's Avatar
    Topic Author
  • Robby
  • Offline
  • Fresh Boarder
  • Posts: 79
  • Thank you received: 0
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Thanks. It's the photo on the main event page that doesn't show correctly. The photo you posted has been showing correctly.

2 years 5 months ago
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi
I checked the site again, the code was not added, so i added it in your custom.css file line1
and its working fine
kindly clear browser cache and check your site, If you need a screenshot I can share it with you as the code is working on site.

Regards

2 years 5 months ago
  • Robby's Avatar
    Topic Author
  • Robby
  • Offline
  • Fresh Boarder
  • Posts: 79
  • Thank you received: 0
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi,

I removed the code you added. That code makes the image smaller than the width of image holder. If you click on the photo, you will see on the next page that the image doesn't format correctly. It doesn't fit the image holder. This is the code that needs to be fix.

2 years 5 months ago
Licenses:
JomSocial Active GURU Active Publisher Active AdAgency Active iSEO Active Socialize Active

Hi
This is different page as compared to the topic subject.
The cover pics cannot use full height because the image height are too long and it breaks the page layout if you will force to show overflow.

The only tweak is use this code in custom.css file that force the cover height to limit

.joms-focus__cover .joms-focus__cover-image > img, .joms-hcard__cover .joms-focus__cover-image > img {
    max-height: 270px;
}

You need to use the media query to apply different max height value for different screen size.

Kindly open a new thread for new subject questions.


Regards

Moderators: Piotr Garasiński
Powered by Kunena Forum

Join 180,000 websites creating Amazing communities

JomSocial is the most complete, easy-to-use addon that turns Joomla CMS into a
full -fledged, social networking site

TRY NOW BUY NOW