History of DataPluginImg
{maketoc}
! General Information
One or more images can be inserted into any wiki page, blog entry, and news article in bitweaver.
__Filetypes:__ Bitweaver supports a large number of file types thanks to it's use of either GD libraries, the imagemagick or the magickwand estensions.
! Method 1: Using FisheyePackage
When creating a news article you are promted to upload and resize an image. For blog posts and wiki pages, the process is slightly more complicated - you need to upload a picture to the image galleries first and then link to it on the page using the wiki syntax (image tag).
!! Upload image
Bitweaver uses the ((FisheyePackage|fisheye)) package to store and view image files. By default, each user has an image folder created for them, and a fixed amount of storage space.
__URL:__ http://yoursite.com/fisheye/upload.php
The fisheye upload screen, it is easy to upload multiple images, and store them in a file gallery for later use.
!! Image Galleries
In Bitweaver all content is assigned a number as well as a name, and image gallaries are no exception.
A list of all galleries is available at:
http://yoursite.com/fisheye/index.php
You can view any gallery directly by knowing the gallery ID number.
http://yoursite.com/fisheye/view.php?gallery_id=1
You can also link directly to an image (displayed by itself)
http://yoursite.com/fisheye/view_image.php?image_id=6&gallery_path=/1
! Inserting an image in a page.
To put an image into a page, you need to know its directory path. Once you are viewing (in the fisheye gallery) the image you want to place on a page, then right-click ''copy image location'' to copy the path. Then return to the page you would like to include the image into and use the image tag.
__The image tag:__
syntax: ~np~ {img src= width= height= align= desc= link= } ~/np~
__Note:__ The ((parameter))s used in this tag are the same as the parameters in the HTML "img" tag. You can pretty much swap the ~np~ { and < ~/np~brackets interchangably, if you are allowing bitweaver to parse html.
When using ~np~{ img }~/np~ the image and the description are enclosed with a "div" tag, that you can style with various css parameters:
* align
* background
* border
* color
* desc
* float
* font
* font-family
* font-size
* font-weight
* height
* link
* margin
* padding
* src
* text-align
* width
! Method 2: Uploading images as attachment
You can directly upload images as wiki page attachments. This will not place the image in a gallery and the image can only be viewed when included in a wiki page, article...
!! Inserting an image as an attachment.
An image file (or any other kind of file) and be attached to the page using the attachments tab in the edit screen. This can be used to upload a file instead of going to the fisheye/upload page, with an identical result.
1. Opening the attachments tab, upload the image as an attachment.
2. Save. The image will appear thumbnailed and right aligned on the page.
3. Right click on the image and copy image location.
4. Edit the page again and use the location in the src parameter of the img tag.
5. you can detach (but not delete) the attachment now if you like, the image will stay.
! Method 3: Using the { attchment } plugin
Once you have uploaded images / attachments, they will show up in the attachment browser in the wiki edit page. This gives you a list of all files you have uploaded and their attachment ids. this allows you to use the ((DataPluginAttachment|attachment plugin)) to insert the attachments in the page.
! Img tag parameters and usage
|| __::Parameter::__ | __::Values allowed::__ | __::Description::__ | __::Example::__
src |URL |The URL of the image to display
desc |"text" |Defines a short description of the image
align |center, left, right |Specifies how to align the image according to surrounding text.
height |pixels or % |Sets the height of the image |400
width |pixels or % |Sets the width of the image |600
link |URL |If you insert a link, clicking the image will take you to that location
The following parameters take CSS style parameters
float | |If you want to float the image. |right
padding | |Padding around the image. |5px
margin | |Margin arond the image. |5px
background | |Background colour around the image. |#ff6600
border | |Defines a border around an image. |3px solid pink
text-align | |Will help you align the description with the image |center
color | |Colour of the description that goes with the image |#990000
font | |Font settings for the description |
font-size | |Font size of the description |10px
font-weight | |Font weight of the description |bold
font-family | |Font familiy for the description text |Verdana, sans-serif||
! General Information
One or more images can be inserted into any wiki page, blog entry, and news article in bitweaver.
__Filetypes:__ Bitweaver supports a large number of file types thanks to it's use of either GD libraries, the imagemagick or the magickwand estensions.
! Method 1: Using FisheyePackage
When creating a news article you are promted to upload and resize an image. For blog posts and wiki pages, the process is slightly more complicated - you need to upload a picture to the image galleries first and then link to it on the page using the wiki syntax (image tag).
!! Upload image
Bitweaver uses the ((FisheyePackage|fisheye)) package to store and view image files. By default, each user has an image folder created for them, and a fixed amount of storage space.
__URL:__ http://yoursite.com/fisheye/upload.php
The fisheye upload screen, it is easy to upload multiple images, and store them in a file gallery for later use.
!! Image Galleries
In Bitweaver all content is assigned a number as well as a name, and image gallaries are no exception.
A list of all galleries is available at:
http://yoursite.com/fisheye/index.php
You can view any gallery directly by knowing the gallery ID number.
http://yoursite.com/fisheye/view.php?gallery_id=1
You can also link directly to an image (displayed by itself)
http://yoursite.com/fisheye/view_image.php?image_id=6&gallery_path=/1
! Inserting an image in a page.
To put an image into a page, you need to know its directory path. Once you are viewing (in the fisheye gallery) the image you want to place on a page, then right-click ''copy image location'' to copy the path. Then return to the page you would like to include the image into and use the image tag.
__The image tag:__
syntax: ~np~ {img src= width= height= align= desc= link= } ~/np~
__Note:__ The ((parameter))s used in this tag are the same as the parameters in the HTML "img" tag. You can pretty much swap the ~np~ { and < ~/np~brackets interchangably, if you are allowing bitweaver to parse html.
When using ~np~{ img }~/np~ the image and the description are enclosed with a "div" tag, that you can style with various css parameters:
* align
* background
* border
* color
* desc
* float
* font
* font-family
* font-size
* font-weight
* height
* link
* margin
* padding
* src
* text-align
* width
! Method 2: Uploading images as attachment
You can directly upload images as wiki page attachments. This will not place the image in a gallery and the image can only be viewed when included in a wiki page, article...
!! Inserting an image as an attachment.
An image file (or any other kind of file) and be attached to the page using the attachments tab in the edit screen. This can be used to upload a file instead of going to the fisheye/upload page, with an identical result.
1. Opening the attachments tab, upload the image as an attachment.
2. Save. The image will appear thumbnailed and right aligned on the page.
3. Right click on the image and copy image location.
4. Edit the page again and use the location in the src parameter of the img tag.
5. you can detach (but not delete) the attachment now if you like, the image will stay.
! Method 3: Using the { attchment } plugin
Once you have uploaded images / attachments, they will show up in the attachment browser in the wiki edit page. This gives you a list of all files you have uploaded and their attachment ids. this allows you to use the ((DataPluginAttachment|attachment plugin)) to insert the attachments in the page.
! Img tag parameters and usage
|| __::Parameter::__ | __::Values allowed::__ | __::Description::__ | __::Example::__
src |URL |The URL of the image to display
desc |"text" |Defines a short description of the image
align |center, left, right |Specifies how to align the image according to surrounding text.
height |pixels or % |Sets the height of the image |400
width |pixels or % |Sets the width of the image |600
link |URL |If you insert a link, clicking the image will take you to that location
The following parameters take CSS style parameters
float | |If you want to float the image. |right
padding | |Padding around the image. |5px
margin | |Margin arond the image. |5px
background | |Background colour around the image. |#ff6600
border | |Defines a border around an image. |3px solid pink
text-align | |Will help you align the description with the image |center
color | |Colour of the description that goes with the image |#990000
font | |Font settings for the description |
font-size | |Font size of the description |10px
font-weight | |Font weight of the description |bold
font-family | |Font familiy for the description text |Verdana, sans-serif||