Adding pictures
We went though a number of changes regarding the fckeditor and ckeditor until we finally have something that works. I am sure some bugs will pop up from time to time and we certainly welcome your input and reporting any problems that appear. The Contact link at the top bar (second from the right) is an email form directly to management. Please use it for you comments, suggestions and requests.
So finally to insert pictures under these pages in any of the articles that you will publish you have the following choices:
1. Insert your picture anywhere within your text:
Insert your picture anywhere without a table, preferably align your picture left as shown here (select align= left when you place your picture).
Then type beside the picture your text.
What was typed here was perfectly aligned in the visual editor, after you save things may change a bit. You can readjust it after saving, by using the edit link.
Keep in mind that when you reach the bottom of your picture, your text will cover the full line below the picture as can be seen in this example.
Also keep in mind that when you press "Enter" you create a double space paragraph.
While when you press "Shift + Enter" you create a single space paragraph as shown in this line.
Now if we continue with more text it will jump in the next line which is still in the same level as the bottom of the picture.
Pressing "Shift + Enter" we came here and thus we achieved almost a full wrap position for our photo.
As you go down and especially using the "Enter" key you may be creating some undesired space. It is easier to remove this space from the Source Editor by removing the unwanted tags: <p> </p>
If you align your picture to the right as shown here you may have more of a problem producing a nice looking arrangement, since writing is now almost like writing a right to left language. This can be overcomed if you shrink your picture further as shown here and still add the click to enlarge feature as shown below in the table example and more specifically Picture_1, Picture_2 and Picture_3
2. Insert your picture in a table with two columns and one row:
|
|
Use the new fckeditor toolbar to create a table, the table icon is located in the second row of icons from the top, 5th from the right. You will see the short description “Insert/Edit Table” when you place your mouse over it. Click on the icon and a screen like the one shown to the left (Picture_1) will appear. Change the Width from 200 pixels to 100% (choose the % from the down pointing arrow) and change the number of columns and rows to 1 for both. In the table we used here we decided to use the left cell for pictures and the right cell for text. First we opened the Source editor (top left icon) and changed the first tag (used for the left column) <td.... to <td width="30%"...... and the one below Used for our text from <td... to <td width="70%"..... This will provide us with a wider space for text. Upload the picture(s) from your computer as shown in:http://www.ellada-mas.com/Drupal/node/2 and copy the link shown below the name of your uploaded picture. Open the Insert/Edit Picture icon and you will see the screen shown to the left (Picture_2). Insert the link in the Image Info tab under URL and change the width in to something reasonable to fit your table (we used in this case 200 (pixels). Under align select "Abs Middle". We then opened the Link tab (see: Picture_3) and pasted again the same image link as we pasted in Image Info tab. We then selected under Target the "New Window (_blank)" option. This will open , upon click on the picture, the full size picture in a new tab. Now go to the Source tab and find the <td> tag wich includes the tect and change it to <td valign="top"> Now you are done and hopeful the pictures are shown aligned with your text. If hey are not we made a small white background picture 20*20 pixels (very small) as shown below. The link is http://www.ellada-mas.com/Drupal/sites/default/files/white20_20.jpg copy it and paste it, in the Source editor, not the visual, above the top left picture, change the size (as per Picture_2) to a larger size if pictures are out of alignment (especially near the top). Use also the <br /> tag in any other areas (under the Source editor) to get the best alignment. Note: <br /> tag is for single line change. If you press Enter to change line you get a double line change, if your press "Shift + Enter" you get a single line change. |
The code of the above table is added at the top of the text file that you can download by right clicking on the link shown below:
table_templates.txt
Become member
To become a member you must send us an email using the contact form from the link on the top header "contact" in every page. Simply ask for a new member account. Specify a user name (can be a nickname), and we will send you in the email provided your first password, which you can change any time after you log in.
