Image Sizing, Text Alignment and Formatting

classic Classic list List threaded Threaded
45 messages Options
123
Reply | Threaded
Open this post in threaded view
|

Image Sizing, Text Alignment and Formatting

Harvey
This post was updated on .
Sorry if this has been asked before, I couldn't find it.

When i transplant images from blogger - meaning I just paste the image code - so that it is still being hosted by BLOGGER, images look pretty good.

You only have to strip off the image alignment code that blogger attaches that Nabble doesn't recognize.

The images at the same size (400 px wide) - look great.

But if I take a 300 x 400 px image and bump it to 480 x 640 on Nabble it looks blurry. Even thought the image itself is 1000 px wide.

What am I doing wrong?

My images range from 80k to 150k.  Is this too small for an image that size?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Hugo <Nabble>
Maybe the problem is in the forced resize. One thing you can do is make the image adjustable to the current width. So you should add this style code to the image tag:
style="width:100%"
For example:
<a href="myimage.jpg" style="width:100%">
Please try that and see if the blur still bothers you.
You may post a link to an image that you don't like and I will take a look.
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Harvey
I think you are right about the forced resize.

Would be IDEAL if there was bigger default size from the menu.

I tend to size photos to 1000 px for blogger and display them at 400 px wide - it works well on blogger.

One thing I love about the Nabble forum is that it's going to allow us to post larger images.

In the classic view it looks like I could handle images up to 750px in my iframe.  Any way to add another choice:

250 wide
500 wide
Custom
Full Size

or maybe the third size is fixed at 640 or 750?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Harvey
In reply to this post by Hugo <Nabble>
Ok I tried what you a said on an image I uploade through Nabble.  I change the % to 95% for a little space and it looked good. (image was not the greatest to begin with - will try again with a better image).

With some of my images I've just copied the code over from Blogger, so it looks like this:




code  (with "carrots removed and replaced with [ or ] ):

[a href="http://4.bp.blogspot.com/_kfWSSeHI78Y/TDj6lWhIxgI/AAAAAAAAEyM/gaFYODNGLis/s1600/Chatterbox.jpg"  imageanchor="1" style="margin-left: 0em; margin-right: 0em; width:95%;"][img border="0" height="300" src="http://4.bp.blogspot.com/_kfWSSeHI78Y/TDj6lWhIxgI/AAAAAAAAEyM/gaFYODNGLis/s400/Chatterbox.jpg" width="400" /][/a]

First - is it ok with Nabble if I pinch code from Blogger?

Second, can I use width:95% with the above code? Do I need to strip out the height and width parameters? I did that but it didn't seem to work).

Here's the spot where the image uploaded to Nabble worked:

http://the-forum.932206.n3.nabble.com/Roll-Call-tp936102.html

One other thing. I uploaded a pic at 250 wide.  THEN I decide I wanted it 500. It looks like I have to CHANGE the name of the picture to do that?  Am I allowed to upload two different pics with the same name?  (I do it alot).
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Harvey
Testing 1,2,3....

There are two images here:

http://the-forum.932206.n3.nabble.com/Gore-Mountain-Terrain-Update-tp957095.html

The top one is 1000 px wide, 75k and coded as huge suggested:

[a href="myimage.jpg" style="width:100%"]


The second one is done full size at 750 px wide. It is 250k in size.

Hard for me to tell, but the both LOOK about equal in quality.  (Opinions on that welcome.)

Maybe my camera and photog skills just aren't good enough to handle the bigger size. Bloggers max width is 400 px.
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Hugo <Nabble>
In reply to this post by Harvey
Harvey44 wrote
First - is it ok with Nabble if I pinch code from Blogger?
Yes, that's ok.
Harvey44 wrote
Second, can I use width:95% with the above code? Do I need to strip out the height and width parameters? I did that but it didn't seem to work).
You should add the "width:95%" to the "IMG" tag, not to the "A" tag. And yes, you should remove those "height=..." and "width=..." from that tag too.
Harvey44 wrote
One other thing. I uploaded a pic at 250 wide.  THEN I decide I wanted it 500. It looks like I have to CHANGE the name of the picture to do that?  Am I allowed to upload two different pics with the same name?  (I do it alot).
The image upload should work with the same file name (the last should replace the previous file).
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Hugo <Nabble>
In reply to this post by Harvey
That thread is gone.
Harvey44 wrote
[a href="myimage.jpg" style="width:100%"]
As I said on the other post, add the width style to the IMG tag instead.
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Harvey
Hugo ... is there anyway to LIMIT the width of images posters can post?  

Rather than spend a lot of energy explaining to new people why images shouldn't be larger than 750 px (I get a horizontal scroll bar in my setup) - it would be ideal if I could just not allow images above that size.
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Hugo <Nabble>
Sorry, there is no way to specify such limit. Nabble displays the horizontal scroll bar at the bottom of each post just to keep things visible to everyone. I think this solution is good enough.
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Harvey
Hugo - if you name an image in subsequent post the same image name as an image in a previous post:

[nabble_img src="IMAGENAME.jpg" style= border="0"/]

is there a conflict? Will it replace the image in the previous post?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Hugo <Nabble>
You can have the same image name in multiple posts. This should work without problem. Please let me know if you see issues.
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Harvey
In reply to this post by Harvey
Harvey44 wrote
Would be IDEAL if there was bigger default size from the menu...

In the classic view it looks like I could handle images up to 750px in my iframe.  Any way to add another choice ....

... maybe the third size is fixed at 640 or 750?

You guys are incredible. Anyone notice? There is now a third size available in image sizing - 750 px.

Awesome and thank you. This is a perfect large size for my embedded forum in Classic view.

Thanks guys!
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Harvey
This post was updated on .
In reply to this post by Hugo <Nabble>
Hugo ...more questions about text wrap and images.


Is there anyway to add some "padding" between the text and the image so there is some space between them? See below ... I'd like more space there....



Also when you use left or right alignment is there any way to ensure that the photo caption stays underneath the image? In that image "Saranac Avenue" is intended to be below the image as a caption.

And .... is there a way to align TEXT to center?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Jamesdeluxe
Is it possible to change fonts in Newspaper?

Can I have more than one font in a single entry?
Reply | Threaded
Open this post in threaded view
|

Re: Image Sizing

Hugo <Nabble>
In reply to this post by Harvey
Harvey44 wrote
Is there anyway to add some "padding" between the text and the image so there is some space between them? See below ... I'd like more space there....
Yes, you can add a style tag to the nabble image like this:

<nabble_img src="image.png" border="0" style="margin:1em"/>
Harvey44 wrote
Also when you use left or right alignment is there any way to ensure that the photo caption stays underneath the image? In that image "Saranac Avenue" is intended to be below the image as a caption.
I will open a ticket for this implementation. Right now this is possible only with complex HTML structures, so you would have to type everything in HTML format. So I plan to soon implement an easy way to display the image caption wherever the image is (left, right or center). Please wait some weeks until this is done.
Harvey44 wrote
And .... is there a way to align TEXT to center?
You can use this:
<span style="display:block;text-align:center">
    CENTERED
</span>
Reply | Threaded
Open this post in threaded view
|

How to change font family and color

Hugo <Nabble>
In reply to this post by Jamesdeluxe
The easiest way to change fonts is by changing the font settings in "Options > Editor > Change appearance".
In the middle of the text you can change fonts by using the <font.../> tag, see:
<font color=red>font</font>
<font face="Monospace">Monospace</font>
<font face="Garamound">Garamound</font>
font
Monospace
Garamound
Reply | Threaded
Open this post in threaded view
|

Re: How to change font family and color

Harvey
Thank you.

If you want a variable border around an image can you do this:

style="margin:0,0,0,1em"

?

Also is there a list of available fonts?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: How to change font family and color

Hugo <Nabble>
Harvey44 wrote
If you want a variable border around an image can you do this:

style="margin:0,0,0,1em"

?
This isn't valid CSS code. Also, I don't understand the meaning of "variable border".
Harvey44 wrote
Also is there a list of available fonts?
The font isn't available on the Nabble side. Each visitor has its own fonts installed on his/her machine, so you shouldn't use rare fonts that only you have. You should stick to common fonts like times, serif, monospace, tahoma, verdana, etc.
Reply | Threaded
Open this post in threaded view
|

Re: How to change font family and color

Harvey
<quote author="Hugo &lt;Nabble&gt;">
Harvey44 wrote
If you want a variable border around an image can you do this:

style="margin:0,0,0,1em"

?
This isn't valid CSS code. Also, I don't understand the meaning of "variable border".
<quote author="Harvey44">

In html if you do :

border = 1x, 2px, 2px, 1px;

the first number is for top of the image, then right side, then bottom, then left side.

It goes around in a clockwise circle.

I "think" that's html?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: How to change font family and color

Hugo <Nabble>
hmm, ok, now I understand what you mean by variable border. The point is that you shouldn't use a comma (as far as I know), you should use a space char. Example:

style = "margin:0 0 0 1em"

Your description is right: top left bottom right
123