wordpress auto-size images

Hi,

I have this page:
http://blog.tutorialref.com/skype/skype-call-forwarding-161.html

and it's the second image with the image of the Skype Account settings. The image's width is too big so I had to create a style="width:784px;height:426px;" for the image.

Isn't there some wordpress plugin that allows one to set the width to, say, 785px and then have the image automatically adjust its height. I manually changed the width and height but since some details may not be as clear when the image is shrunk I hyperlinked it to the larger and original image. This would be a good wordpress plugin. If there isn't such a plugin then I'm thinking of creating it myself but I don't want to reinvent the wheel either. =)

Thank you,
Victor
Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AndyBeardCommented:
If you are using the WordPress media manager then there are ways to configure all the default sizes

Here is a good article covering how it works
http://help2design.com/wordpress/how-to-change-wordpress-image-thumbnail-size-and-regenerate-thumbnails/

Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi AndyBeard,

I looked at the link but I'm not certain how to implement it. Tried looking on google for the answer too.

1) Why is there Thumbnail sizes and Medium sizes and Large sizes? For instance, I have this image:
http://tutorialref.com/images/skype-call-forwarding-personal-profile.png

but it extends past the width of the post's width column. So I had to add this css style:
<img style="width:784px;height:426px;" src="http://tutorialref.com/images/skype-call-forwarding-personal-profile.png" alt="Skype call forwarding personal profile page" />

So how would I use the Settings->Media so I wouldn't have to manually add in my style's width and height?

2) I suppose there is nothing that will automatically add in the hypertext link to the larger image.

I'm thinking the only way to dynamically change the width and height is via javascript and then it would add in the styles and also add in the hypertext link too.

AndyBeardCommented:
You probably need to spend some time with the WordPress media manager as it does all this for you.

When you upload an image, WordPress automatically creates various size images and thumbnails, and that article explains how to change the default seting.

When you select to insert an image using the media manager, you have an option of which preselected site to use, and you choose whether the inmage should be without a link, with a link to the raw image, or to an attachment page.

What I would do is probably set the medium image to a max width you can use, less a little for white space so maybe 700 px

You can probably leave the height blank

To rescale your older images you would have to use the plugin also mentioned in that post.

http://wordpress.org/extend/plugins/regenerate-thumbnails/

If you are not using the media manager to upload images, you won't get thumbnails etc created for each image. You will have to process them manually yourself in an image program. Almost any image viewer these days has the ability to batch process images including resizing them.

2. The WordPress media manager can create pages for attached images, but if you aren't using it it makes things much more complicated.
There are various ways full size images can be displayed, and an attachment page isn't really very good anyway - much better is to use a plugin that allows you to have an overlay modal window.
There are tons of different options and choice is mainly personal preference.
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi AndyBeard,

Thank you for the clarification.

1) When I'm adding in a post I don't see a way to use the Media Manager. I see the Media link in the left column and the 'add new' link. But it seems like the Media manager works independently of the Post.

2) When I click on the Media link on the left and 'add new' I didn't see any of the preselected options you mentioned. I must be looking at something that is not the Media Manager then.
http://tutorialref.com/images/wordpress-media-manager-upload-image.png
http://tutorialref.com/images/wordpress-media-manager-image-options.png

3) You mention "...There are various ways full size images can be displayed, and an attachment page isn't really very good anyway - much better is to use a plugin that allows you to have an overlay modal window..."

What is an overlay modal windows and do you know of a plugin to do this?

Thank you. You're very helpful with your answers. =)
vkimura
AndyBeardCommented:
You are looking at the media manager for managing historical media

When you are editing a post, either with or without the WYSIWYG editor, immediately above the edit window you will see "Upload / Insert" and next to that should be the icon to upload images.
There are 2 media uploaders, if the flash one works for you it allows selecting multiple files at once.

When I suggested there are lots, I meant lots of options in the overlay
http://wordpress.org/extend/plugins/tags/overlay

The Shadowbox JS plugin looks like it is updated frequently and might suit your needs.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi AndyBeard,
Thank you very much for your answers. That was very helpful to me. =)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.