Knowledge Base/Solutions for Soapbox 1/Solutions for Soapbox 1.x

Images and Photos

PICnetter
posted this on July 15, 2009 06:55 pm

How do I insert an image?

You'll have to upload each image you want to use separately (in the media manager), and then insert them into your content item from the media manager. 

Note: If you plan to make any modifications to the image (resize, crop, etc.) make those changes to the image before you upload them into the Media Manager. Editing the image in Joomla doesn't not always give the best results.

* Go to 'Site' in the top navigation menu
* Choose 'Media Manager'
* Choose which folder in the Media Manager you would like these images to be stored (usually, there's already a folder called 'images')
* Click on the 'Browse' button on the far right of the Media Manager window to find the image file that is stored on your computer and that you want to upload to your site
* Once you've chosen the file, and it's directory populates the 'file upload' text box, hit the 'Upload' button on the upper right corner of your screen (it is a globe icon with a green arrow pointing up)
* Note: 10MG is the maximum size
* When your image files are successfully uploaded to the server, you should see an icon of the file in the media manager folder that you have open.

Now you're ready to insert the image.

* Open the content item in which you would like the image to appear.
* Place your cursor where you would like the image to be placed.
* Click on the 'Image Manager' icon in the toolbar of the WYSIWYG editor (it looks like a little landscape photo; if you can't find it place your mouse arrow over each icon, and it's name/function will pop up)
* Choose the image that you want (make sure to look in the right folder in the directory)
* Click on the ‘Appearance’ tab at the top
* Set ‘Align’ to ‘Default’
* Set ‘Vspace’ & ‘Hspace’ both to 0
* Click on ‘Insert' or 'Update'
* Click on 'Apply' or 'Save'

** If you're trying to fix an image that's already been inserted, first click on the image in your editor (so that it is selected) and THEN click on the 'Image Manager' icon, and follow the instructions related to the 'Appearance' tab.


Troubleshooting an image with lots of white space underneath or next to it

Often, lots of blank spaces occur around images when you're looking at a page in one browser but not another.  This is because of the way browsers render image parameters differently, and often the culprit is Internet Explorer.  If you notice this problem, follow these instructions to troubleshoot.

* Click on the image that's been embedded in your text area so that it is selected.
* Click on the 'Image Manager' icon in the toolbar of the WYSIWYG editor (it looks like a little landscape photo; if you can't find it place your mouse arrow over each icon, and it's name/function will pop up)
* Click on the ‘Appearance’ tab at the top
* Set ‘Align’ to ‘Default’
* Set ‘Vspace’ & ‘Hspace’ both to 0
* Click on ‘Insert' or 'Update'
* Click on 'Apply' or 'Save'
* Refresh the page on the front end a few times to see if your changes have taken effect