WordPress Media Manager

WordPress uses a templates directory structure.

. = http://websitename.com thus ./home is http://websitename.com/home

To begin with, all graphic media and so on is loaded directly into wordpress.

Login to the website
./wp-login.php

Next, load media such as .jpg into the Media Manager (you can drag and drop all at once or select file)
./wp-admin/media-new.php

All Graphics will be referenced usually as

./wp-content/uploads/YEAR/MONTH/image.jpg

for instance if i design the home page to reference logo.jpg. I would upload logo.jpg with the media manager and copy its full url on the right side panel when editing the image ( you will see ‘Edit’ link after image has loaded ) or just hard code it into the home page such as

http://websitename.com/wp-content/uploads/2013/02/logo.jpg
live url source: http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png

Bear in mind the format when referencing an image in your layouts.
http://websitename.com/wp-content/uploads/year/month/imagename.extension

If by chance the folder ‘wp-content’ has been renamed, then you will need to find out the new name of the wp-content directory and use that new name instead. Which would be
http://websitename.com/*/uploads/year/month/imagename.extension
* = the new name of the ‘wp-content’ folder

The url source code created can be used in multiple ways. One such is to use it for an image tag <img src=””> on the wordpress page or post. Paste your http source code between the “”, so when editing a page or post in Edit View the code in the body of that post would look similar to
<img src="http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png">

Finally, if a link from the image is wanted then you would use <a href=””><img src=””></a>

href=”http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png”
src=”http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png”

Use the same source for both the ‘a href’ and the ‘img src’ to create a clickable picture

The sample is set to open in a new window <a href=”” target=”_blank”>
If, you copy the image sample below and paste into a page, open the page, go to edit view and replace all the ” symbols. WordPress sometimes displays a similar symbol to the “.

Sample Image Code
<a href=”http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png”>
<img src=”http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png”>
</a>

Posted in Editor Host Tutorials Tagged with: ,

Leave a Reply