Placing a static image in a module? - Guilliam's Little Walkthru(in the park) -
Posted: Tue Aug 23, 2005 12:42 am
.
[CENTER]"HOW to insert static images inside a module"
This walkthru is ~almost~ same with inserting ".swf" or flash animations.
[/CENTER]
Versions, tools, etc. needed:
1. Mambo 4.5.2 Stable [ Titan ]
2. rhuk_solarflare II (used this template for this walthru since its the common or the default template used)
3. "com_TinyMCE-EXPAdmin1beta4.zip" AND "bot_TinyMCE-EXP125beta4.zip" both can be downloaded from: http://mamboforge.net/frs/?group_id=974 (mambo wyswyg editor, BUT you can use almost any wyswyg editor depending on your preference, while for the purpose of this walkthru, this is the wyswyg editor that we will be using.) IF you get "Permission ERRORS" in installing the said "bot_TinyMCE-EXP" please go to "site_root/mambots/" and change the folder PERMISSION of the folder "/editors" to 777. make sure to chmod the folder BACK again to "755" after the installation. then in your " Global Configuration" (admin/backend) on the "WYSIWYG Editor:" select "TinyMCE-EXP" as your default wyswyg editor.. check image below for reference:
4. A little knowledge in administering Mambo
The Procedure: (assuming the installation of the wyswyg editor went fine)
1. login to your mambo backend(administrator)
2. click on the "Modules" tab (upper menu), then "Site Modules", it will bring you to the "Site Module Manager" page.
3. Fill in the FIELDS with:
3.a.) Title: static test
3.b.) Show title: yes (check screenshot below for reference)
4. on the "content:"
4.a.) write a text something like "this is a test"
4.b.) highlight the text "this is a test" and click on "center", in doing so you should see your sample text aligned in the center by now. (check screenshot below)
4.c.) press ENTER once(so the active cursor will be down below your sample text), then click on "insert/edit image".
4.d.) you will see a pop up window like this:
4.e.) click on "browse" on that pop window, and select the image that you wish to upload(the width should NOT be more than the width of the module box, i.e. not more than 150px, for the SFII template)
4.f.) once the image is uploaded successfully.. you should see a thumbnail image of it in the upper box(where the thumbnails are presented) click on it once and let the image manager fill in the other fields with default values(you can actually do furnishings on the values, BUT for the purpose of this walk thru, the default values filled in will be fine.) click the "ok" button in the bottom right of the image manager's pop up window. in doing so, your screen will look similar to this(the image depends on what image you uploaded):
4.g.) IF you want the image to be a link(clickable to proceed to another page, pls follow the following steps, IF NOT, proceed to walkthru #5).
4.g.1.)click on the image again, when clicked and active, click on the icon "insert/edit link"(its the icon which looks like a chain). clicking on that button will lead you to a pop-up window of: "Link to Published Content/Enter Link Information". disregard the fields in the "Link to Published Content", we will link the image with an exiting page/url for this session.
4.g.2.) fill in the fields:
"URL:" - the url where you want the page to be pointed when clicked.
"Title:" - shows when mouse over
"Protocol:" - what protocol to be used(just leave this as the default value of "Other"
"Target" - options what you wish the browser will behave when clicked(for this walk thru, choose "_blank"
(please see screenshot below for reference):
4.g.3.) click on the button "insert"
5.) in the main window of: "Site Module: New" the window were currently configuring. click the icon located on the upper right labeled "Save". once saved you will be lead to the page: "Module Manager [ Site ]" and would see the module we just made named "static test". make sure it is PUBLISHED. (see screenshot below for reference)
6.) go to your front end(the site).. you should see NOW the module you made. on my example, it looks something like the screenshot below:
DONE!!!
NOW i leave the tinkering to you on configuring the image manager like, swap image, links, target properties of the links, etc. :p
hope that helps!
~guilliam roque~
btw.. excuse my errors in typo's and spelling.. dont have time anymore to check and edit those errors.
lemme hear your outcome and feedback to this walkthru.
~ditto~
CROSSED REFERENCED from: http://forum.m*mboserver.com/showthread ... ge=1&pp=20
^^obviously change the "*" character in the URL given.
.
[CENTER]"HOW to insert static images inside a module"
This walkthru is ~almost~ same with inserting ".swf" or flash animations.
[/CENTER]
Versions, tools, etc. needed:
1. Mambo 4.5.2 Stable [ Titan ]
2. rhuk_solarflare II (used this template for this walthru since its the common or the default template used)
3. "com_TinyMCE-EXPAdmin1beta4.zip" AND "bot_TinyMCE-EXP125beta4.zip" both can be downloaded from: http://mamboforge.net/frs/?group_id=974 (mambo wyswyg editor, BUT you can use almost any wyswyg editor depending on your preference, while for the purpose of this walkthru, this is the wyswyg editor that we will be using.) IF you get "Permission ERRORS" in installing the said "bot_TinyMCE-EXP" please go to "site_root/mambots/" and change the folder PERMISSION of the folder "/editors" to 777. make sure to chmod the folder BACK again to "755" after the installation. then in your " Global Configuration" (admin/backend) on the "WYSIWYG Editor:" select "TinyMCE-EXP" as your default wyswyg editor.. check image below for reference:
4. A little knowledge in administering Mambo
The Procedure: (assuming the installation of the wyswyg editor went fine)
1. login to your mambo backend(administrator)
2. click on the "Modules" tab (upper menu), then "Site Modules", it will bring you to the "Site Module Manager" page.
3. Fill in the FIELDS with:
3.a.) Title: static test
3.b.) Show title: yes (check screenshot below for reference)
4. on the "content:"
4.a.) write a text something like "this is a test"
4.b.) highlight the text "this is a test" and click on "center", in doing so you should see your sample text aligned in the center by now. (check screenshot below)
4.c.) press ENTER once(so the active cursor will be down below your sample text), then click on "insert/edit image".
4.d.) you will see a pop up window like this:
4.e.) click on "browse" on that pop window, and select the image that you wish to upload(the width should NOT be more than the width of the module box, i.e. not more than 150px, for the SFII template)
4.f.) once the image is uploaded successfully.. you should see a thumbnail image of it in the upper box(where the thumbnails are presented) click on it once and let the image manager fill in the other fields with default values(you can actually do furnishings on the values, BUT for the purpose of this walk thru, the default values filled in will be fine.) click the "ok" button in the bottom right of the image manager's pop up window. in doing so, your screen will look similar to this(the image depends on what image you uploaded):
4.g.) IF you want the image to be a link(clickable to proceed to another page, pls follow the following steps, IF NOT, proceed to walkthru #5).
4.g.1.)click on the image again, when clicked and active, click on the icon "insert/edit link"(its the icon which looks like a chain). clicking on that button will lead you to a pop-up window of: "Link to Published Content/Enter Link Information". disregard the fields in the "Link to Published Content", we will link the image with an exiting page/url for this session.
4.g.2.) fill in the fields:
"URL:" - the url where you want the page to be pointed when clicked.
"Title:" - shows when mouse over
"Protocol:" - what protocol to be used(just leave this as the default value of "Other"
"Target" - options what you wish the browser will behave when clicked(for this walk thru, choose "_blank"
(please see screenshot below for reference):
4.g.3.) click on the button "insert"
5.) in the main window of: "Site Module: New" the window were currently configuring. click the icon located on the upper right labeled "Save". once saved you will be lead to the page: "Module Manager [ Site ]" and would see the module we just made named "static test". make sure it is PUBLISHED. (see screenshot below for reference)
6.) go to your front end(the site).. you should see NOW the module you made. on my example, it looks something like the screenshot below:
DONE!!!
NOW i leave the tinkering to you on configuring the image manager like, swap image, links, target properties of the links, etc. :p
hope that helps!
~guilliam roque~
btw.. excuse my errors in typo's and spelling.. dont have time anymore to check and edit those errors.
lemme hear your outcome and feedback to this walkthru.
~ditto~
CROSSED REFERENCED from: http://forum.m*mboserver.com/showthread ... ge=1&pp=20
^^obviously change the "*" character in the URL given.
.
