PDA

View Full Version : Resizing a picture (HTML code)


Zeeshan
January 12, 2012, 10:30 PM
A lot of us have trouble doing it. Also Nasif wrote a similar post but cannot find the thread so it merits it's own thread.

Bangladesh flag as the Image:

http://www.bnpbd.com/wp-content/uploads/2010/01/Bangladesh-Flag.jpg

In order to resize it code as follows:

<IMG SRC="yourimage.gif" WIDTH="75" >

This should render it as follows:

<IMG SRC="http://www.bnpbd.com/wp-content/uploads/2010/01/Bangladesh-Flag.jpg" WIDTH="75">

Zeeshan
January 12, 2012, 10:37 PM
Lol fail on my own thread. Reverse-da can you render the latter image nicer please? E-)

Naimul_Hd
January 13, 2012, 03:56 AM
Lol fail on my own thread. Reverse-da can you render the latter image nicer please? E-)

:lol::floor:

btw, thanks a lot for this thread. i badly need this tips :up:

tonoy
January 14, 2012, 12:47 PM
Zeeshan your code was fine(Well almost). The code is

<IMG SRC="yourimage.gif" WIDTH="75" />

The reason you were getting a smaller picture is because you had not mentioned anything about the height of the picture, hence it was adjusted automatically to maintain its original ratio.


<img src="http://www.bnpbd.com/wp-content/uploads/2010/01/Bangladesh-Flag.jpg" width="75" height="313" />

<img src="yourimage.gif" width="75" height="313" />



<img src="http://www.bnpbd.com/wp-content/uploads/2010/01/Bangladesh-Flag.jpg" width="750" height="470" />

<img src="yourimage.gif" width="750" height="470" />

You can also use bimg tag
750
750
Although, I think bimg is used just to edit the width(help me out here Nasif Bhai).

Nasif
January 14, 2012, 02:08 PM
Although, I think bimg is used just to edit the width(help me out here Nasif Bhai).

That is correct. BIMG works by sizing to the width, and auto height to maintain aspect of the image.

After reading this thread, I figured I would simplify this for users even more. So, now you can use the new IMAGE tag to fit any image to forum width automatically. You don't need to specify size. Tag will figure out if your image is too wide for the forum and then resize accordingly. It will auto link to the actual image to open in a new window if clicked on the image.

I have also added tag icon as as well, so that you can use it by button click. Click on the button from the advanced editor (not on the quick post editor):
http://www.banglacricket.com/alochona/images/buttons/resize.png

Example:
http://www.banglacricket.com/pictures/newpic884.jpghttp://www.banglacricket.com/pictures/newpic884.jpg

tonoy
January 14, 2012, 02:31 PM
Nicely done Nasif Bhai. :)

Zeeshan
January 14, 2012, 03:34 PM
Fail Tony fail! My original code had the height; the new code is the one that Zunaid bhai resized. My problem was every time I wanted to edit the post WYSWYG wasn't showing up.

And thanks a million Nasif bhai for the new thingmabobjiggyjiggle.

Naimul_Hd
January 14, 2012, 09:43 PM
Nasif bhai, thanks to you million times for making our life easier ! :)

al-Sagar
January 17, 2012, 10:27 PM
as i have a lot of experience of fitting pictures i normally use the following code

<img src="yourimage.gif" width="875" height="525" />

i calculate the height depending on the original pics ratio .....

normally width of 875 fits nicely into a thread

Naimul_Hd
January 18, 2012, 07:51 AM
Help:

I tried to resize these pictures (http://www.banglacricket.com/alochona/showpost.php?p=1456586&postcount=40) as Nasif bhai suggested but instead of picture, i am getting these written words. why is that ? :(
<i>removed the quote as incorrect html was throwing off the browser</i>At first, i pasted the image link in http://www.banglacricket.com/alochona/images/editor/insertimage.gif and then select the picture and clicked http://www.banglacricket.com/alochona/images/buttons/resize.png option. But when i post, only see the above links. I also tried to paste the image link in between http://www.banglacricket.com/alochona/images/buttons/resize.png sign .... but in vain :(

what am i missing ? please help me mods !
but whenever i go to edit the pictures, i see them but cant see them in the post !

Zunaid
January 18, 2012, 08:02 AM
Help:

.....
but whenever i go to edit the pictures, i see them but cant see them in the post ! what am i miss

the "ing" at the end of your last word. That's what you are missing.

I'll look into it - hadn't checked the script since Nasif added it.

http://www.hotelmarketingstrategies.com/wp-content/uploads/2011/02/missing-link.jpg

Zunaid
January 18, 2012, 08:05 AM
http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/cricket_passion_2011/bp12.jpg

Zunaid
January 18, 2012, 08:06 AM
I'm getting the same symptoms when the image is larger than the desired width. Will report back soon. It looks like the script has a bug - looking at the missing html at the beginning.

Naimul_Hd
January 18, 2012, 08:06 AM
the "ing" at the end of your last word. That's what you are missing.

I'll look into it - hadn't checked the script since Nasif added it.

http://www.hotelmarketingstrategies.com/wp-content/uploads/2011/02/missing-link.jpg

damn...you are super fast ! did not give me any chance to correct it.

Naimul_Hd
January 18, 2012, 08:09 AM
I'm getting the same symptoms when the image is larger than the desired width. Will report back soon. It looks like the script has a bug - looking at the missing html at the beginning.

Thank God. i thought i was the only dumb one who cant use it properly. Thank you Zunaid bhai for rescuing me :)

Nasif
January 18, 2012, 09:39 AM
Goes to show that quick fixes are always bugged :)

I will look into it once I get home today. Sorry for the trouble guys.

Nasif
January 18, 2012, 07:39 PM
It didn't work because you had URL tag there. When you pasted the link, URL tag inserted in between image tag which through the bug. If you see editor highlighted your LINK with blue color, then you have inserted URL tag inadvertently.

I copy pasted your link, worked fine.

Remember: your image will be autolinked, as such you don't have to use the URL tog to link to the original image.

http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/cricket_passion_2011/bp12.jpg

Nasif
January 18, 2012, 07:45 PM
Help:

I tried to resize these pictures (http://www.banglacricket.com/alochona/showpost.php?p=1456586&postcount=40) as Nasif bhai suggested but instead of picture, i am getting these written words. why is that ? :(
At first, i pasted the image link in http://www.banglacricket.com/alochona/images/editor/insertimage.gif and then select the picture and clicked http://www.banglacricket.com/alochona/images/buttons/resize.png option. But when i post, only see the above links. I also tried to paste the image link in between http://www.banglacricket.com/alochona/images/buttons/resize.png sign .... but in vain :(

what am i missing ? please help me mods !
but whenever i go to edit the pictures, i see them but cant see them in the post !

You can't use the http://www.banglacricket.com/alochona/images/editor/insertimage.gif and http://www.banglacricket.com/alochona/images/buttons/resize.png together. At least not yet. I might have to do some tweaking to make it work together.

Just paste your link on the editor and then highlight and press http://www.banglacricket.com/alochona/images/buttons/resize.png. That will enclose your url within the IMAGE tag. No need to use anything else.

Naimul_Hd
January 18, 2012, 08:16 PM
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

Naimul_Hd
January 18, 2012, 08:18 PM
Just paste your link on the editor and then highlight and press http://www.banglacricket.com/alochona/images/buttons/resize.png. That will enclose your url within the IMAGE tag. No need to use anything else.

Nasif bhai, i followed that instruction but it came blank (see previous post) :(

here is the link of a pic:

https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg (I too removed the hyperlink)

I highlighted it and press http://www.banglacricket.com/alochona/images/buttons/resize.png sign...but no result. :(

Nasif
January 18, 2012, 08:31 PM
http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

Zunaid
January 18, 2012, 08:43 PM
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

Zunaid
January 18, 2012, 08:43 PM
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

Zunaid
January 18, 2012, 08:45 PM
http://1.bp.blogspot.com/-CEXXZsTKJd4/TaHH3VIjlbI/AAAAAAAAAoI/-3rkYE9vpwc/s1600/DSCN3144.JPG

Zunaid
January 18, 2012, 08:46 PM
Nasif - it's working (see above). The other image may have hot-link protection.

Nasif
January 18, 2012, 08:47 PM
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

something on that URL is unique which is breaking the tag. I am looking at it now.

Naimul_Hd
January 18, 2012, 08:56 PM
http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

something on that URL is unique which is breaking the tag. I am looking at it now.

Really sorry Nasif bhai for giving you hard time. :(

Zunaid
January 18, 2012, 08:57 PM
Nasif - you are probably right - smart hotlink protection from Akamai and Naimul just HAD to use that image. Stone him.

Zeeshan
January 18, 2012, 09:09 PM
aar shobkichur mooley gopal...

yung mullah baybeee!!!

Naimul_Hd
January 18, 2012, 09:18 PM
Nasif - you are probably right - smart hotlink protection from Akamai and Naimul just HAD to use that image. Stone him.

:eek:

You should thank me that i gave you such puzzle ! onek din por apnader kopal e gham bhaj ante pere nijeke gorbito mone korchi :D

btw, that picture is taken from one of the FB fan pages. So, you mean, i will face the same problem whenever i share FB pictures on BC ?

Nasif
January 18, 2012, 09:26 PM
Looks like it wasn't link protection afterall. vB was adding blank spaces to long URL. I needed to disable line breaks option for the new code. All is well now :)

And all of sudden all the pictures are showing up :D

Zeeshan
January 18, 2012, 09:31 PM
Nasif bhai relishing on Chuck Norris moment

Zunaid
January 18, 2012, 09:31 PM
Looks like it wasn't link protection afterall. vB was adding blank spaces to long URL. I needed to disable line breaks option for the new code. All is well now :)

And all of sudden all the pictures are showing up :D

You the man.

:up:

Naimul_Hd
January 18, 2012, 09:36 PM
Looks like it wasn't link protection afterall. vB was adding blank spaces to long URL. I needed to disable line breaks option for the new code. All is well now :)

And all of sudden all the pictures are showing up :D

awesome ! :notworthy::notworthy:

Nasif
January 19, 2012, 10:33 PM
http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/394044_315194528525636_101991343179290_939216_1472 51389_n.jpg

[বাংলা]১৬ কলা পূর্ণ [/বাংলা]

The original img tag will now resize as well. So, you can use the default IMG tag (the http://www.banglacricket.com/alochona/images/editor/insertimage.gif http://www.banglacricket.com/alochona/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAIAAAD tKeFkAAAAZ0lEQVQ4je2PMQ7AIAwD/XQ/zT9Lh0gRoSUp7dh6QAz4zgB/ImYws/Ys+tcFkv6AZAVYOQGQcMgTf+7v+/P+ff/5O72/WNT7farPjsJd/1j2U5KkQFT+KI+ZEGtANk+XQDTlV4iv5QDs0hi4LIz0VAAAAAB JRU5ErkJggg== icon). I have removed the newly added resize icon as it is redundant now.

Murad
January 22, 2012, 04:18 PM
Ki korlen bhai. Ekhon to mobile theke pics dekha jaina. Age to link thakto ekhon blank.
<br />Posted via BC Mobile Edition (Android)

Zeeshan
January 22, 2012, 10:42 PM
eto fedayen nato murad bhai...ajaira pechal...mubile bebohar korte apnake ke bolse? ami bhaat khaite mari na aar apnee blaakberry android-er bahar maren

Dilscoop
January 24, 2012, 02:04 AM
This is tight! Nice Nasif! I like how it doesn't have that "Click here to view full size" thing at the top of the pictures like the other forums! It's 2012 in here!

http://banglacricket.com/alochona/showthread.php?p=1459611#post1459611

Now that "EDIT" button disappears after a while, I can't edit any of my crap. Will one of you be kind enough to fix couple of these please?