blog documentation FAQ followers forum marketplace services youtube

solved Having mobile friendly embedded pictures in forum and blog posts?

The Jamroom Network » Forum » Using Jamroom » Page » Having mobile friendly embedded pictures in forum and blog posts?
alt=
K_K
@k-k
7 years ago
95 posts
I am new user to Jamroom, so still trying to figure out things.

How are you guys embedding pictures in forum and blog posts so that they work nicely with mobile users also?

It seems to me if I try use pictures with "float" position, they tend to "break" when viewed in phone with narrow screen, going over the side. Or I have to select a small size for them, which is not ideal for desktop browser.

Lately I have been selecting "original" size and then selecting "stretch" for the location. That seems to display the pictures very similarly in desktop and mobile browsers.

Any tricks out there?
updated by @k-k: 05/17/17 05:22:32PM
michael
@michael
7 years ago
7,746 posts
There is a class img_scale that if added to an image will stretch it out to fit the width of the container.

<img class="img_scale"......

but that should be what the stretch does.

If you could provide some steps I can check it out here to see if there's a better way. Just an image added to via the editor?
alt=
K_K
@k-k
7 years ago
95 posts
"Stretch" seems to give out this...
style="width:100%;
...which works nicely.

I am not implying anything is wrong by any means, just coming from Ning and trying to get used to new things :).

Ning's mobile version never worked that good, so I used to have a lot of pictures in blog posts that were small sized and would open to bigger ones when clicked (that worked pretty well with desktop).

Now that the Jamroom pages scale nicely to mobile, I think using container wide pictures is the way to go. In mobile clicking small pictures gets cumbersome and in bad connection might make the user to abandon the whole article, so having the pictures viewable from the get go seems like a good idea.
michael
@michael
7 years ago
7,746 posts
nice one. :)

You can use any of the larger image sizes 'xxlarge' 'xxxlarge' 'original' along with the stretch option but large images take longer to load on the page. Its a good idea to try to get the image you want to use just larger than the box that will contain it to get the best balance of speed and clarity.
alt=
K_K
@k-k
7 years ago
95 posts
Thanks for info, that will help with mobile users with bad connections.

By the way, are the Jamroom picture sizes xxlarge, xxxlarge, etc. selected so that they just work with the different Site Builder column widths? Of course they can't work if the whole site has some peculiar custom width, but some common one?
michael
@michael
7 years ago
7,746 posts
The image widths are just a selection of reasonable sized images:
image size - must be one of: xxsmall,xsmall,56,small,icon96,icon,medium,large,larger,xlarge,xxlarge,xxxlarge,1280,original

Each wording size has a corresponding px size too. They are not designed to match Site Builder columns.

Site Builder columns are 12 wide across the screen, so you can break that up into up to 3 columns. Those widths are % widths that add up to 100%

So site builder could have
6|6 to get to 12 or
4|4|4 to get to 12
8|4 to get to 12
.....