Solved

Replacing width,height values of EMBED, IMG tags

Posted on 2009-06-29
6
536 Views
Last Modified: 2013-12-13
hello,

I need to replace embed and img which are submitted by users. as you know, some of users try to add video or image file links into textfield.

I found some of examples of regex function in order to replace img and embed tag's WIDTH and HEIGHT values but there is a big problem.

I need a function that can replace those dimensions with SCALE PROPOTIONS. its like croping an image that is uploaded. for example user wrote this code in textfield :

<img src="http://www.google.com/image.jpg" width="1400" height="1000">

and I have specific maximum WIDTH and HEIGHT values :

max_width = 700
max_height 700

is it possible to replace  that tag like (in order to max width-height values):

<img src="http://www.google.com/image.jpg" width="700" height="500">


thank you
0
Comment
Question by:middleofnowhere
  • 4
  • 2
6 Comments
 
LVL 4

Expert Comment

by:tokyoahead
ID: 24741768
well it is possible. but you will have a problem if the image code is missing any of the elements, switches them around or leaves away the quotes. they can leave the widht and heigt also away and the image will appear in orginal size... maybe much wider than your page. Your code will be quite fat to accommodate all the eventualities.

I would suggest the following: use a special code. If they want to add an image, they have to use
[image:http://www.google.com/image.jpg]
You will then read this and translate it into <img style="width:100%" src="http://www.google.com/image.jpg">

why this code? first of all you do not know the proportions of the image. so defining a height and width is not a good idea unless you know what the dimensions are exactly. second, if you use the style, you can use correct HTML (width="100%" is not). third, you can remove all other fancy HTML that might be a security issue in the first place.

You can on top of that allow them to do a
[image:http://www.google.com/image.jpg 50]
which will result in a <img style="width:100%" src="http://www.google.com/image.jpg">. Of course you can also do a <img style="max_width:700px" src="http://www.google.com/image.jpg"> for a 100/missing width, and reduce the width accordingly to make it smaller.

lots of options here.
0
 
LVL 4

Expert Comment

by:tokyoahead
ID: 24741775
sorry, typo. the first sentence in the last paragraph should read:

You can on top of that allow them to do a
[image:http://www.google.com/image.jpg 50]
which will result in a <img style="width:50%" src="http://www.google.com/image.jpg">.
0
 

Author Comment

by:middleofnowhere
ID: 24741807
I get it. actually you're right about code sentence is given by user. I made a mistake. probably they will not give any size for images. they will just give links. so your code seems appropiate. but I have 2 questions :

1- I use striptags() function in order to filter any unwanted tags. I just give them <b><a><embed><img>. so how can I translate a code like [image:http://www.google.com/image.jpg]. actually default percent values can be given by me thats ok. but still I dont know how can I use regex() function to turn [image:] code into <img width...> ? could you show me a function for that?

2- img codes all right with above but video <embed> codes have always width and height values. what would you suggest for that? percent width values is looking cool but is that appropriate for embed codes?

thank you for your answer
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Expert Comment

by:tokyoahead
ID: 24741850
You do not need to use regex to do that. You can use strpos, which is much faster then regex (and less brainy, too :-)

You do a strpos for "[image:", then in a substr( of the string so that you cut off the comment before "[image:", then you do a strpos for "]" and you have your [image: .....] completely localized. you repeat for the string until strpos for [image: is false.

each [image you replace with <img ... > etc. you simply explode the string between [image: and ] by spaces  and get an array with the relevan elements.

If you set it up properly, you can use many different tags, not only "image" but also video etc.

for the size of the video I would recommend that you do a 640x480, which is std TV resolution, that should be fine. I am not sure if a code like that would distort the video anyhow. Otherwise you can do a code like [image:http://watever.com 640 480]




0
 
LVL 4

Accepted Solution

by:
tokyoahead earned 500 total points
ID: 24741859
if you do not want to write this yourself you can also go and take pre-made "BBCode" classes that do similar things. You might have to tinker with the code a bit to make it do what you want exactly though....

here is an example class:

http://www.phpclasses.org/browse/package/951.html

if you search online for "bbcode class" you will find much more,
0
 

Author Comment

by:middleofnowhere
ID: 24741882
thank you for information. I've never worked with bbcode before. I'll check that.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now