Flutter
From ThaiiS Note (Wiki)
Contents |
Flutter
>>>>>>> http://magicfields.org/
General Usage
To get a variable
<? echo get('variable'); ?>
To get an image with image tags
<? echo get_image('variable'); ?>
To a get a template setting
<? echo option('variable'); ?>
Get a specific field from a specific group
<? get($fieldName, $groupIndex=1, $fieldIndex=1, $readyForEIP); ?> <? get_image($fieldName, $groupIndex=1, $fieldIndex=1); ?> <? get_audio($fieldName, $groupIndex=1, $fieldIndex=1); ?>
$fieldName - string containing field name $groupIndex - integer representing the index of the group in case the group is duplicated. $fieldIndex - integer representing the index of the field in case the field is duplicated. $readyForEIP - if true and the field type is textbox or multiline textbox, the resulting value will be wrapped n a div that is ready for EIP. To get the path of phpthumb
<? echo pt(); ?>
Get duplicate fields
Get number of field duplicates given field name and group duplicate index. The function returns 1 if there are no duplicates (just the original field), 2 if there is one duplicate and so on.
<? getFieldDuplicates ($fieldName, $groupIndex); ?>
Get duplicate groups
Get number of group duplicates given field name. The function returns 1 if there are no duplicates (just he original group), 2 if there is one duplicate and so on. $fieldName is the name of any field in the group
<? getGroupDuplicates ($fieldName); ?>
Custom queries
Ordering posts based on a custom field - Assuming you have a field named “my_custom_order”, query_posts should be
<? query_posts($query_string.’customorderby=x_my_custom_order&order=ASC’); ?>
Filtering posts with a specified value - Assuming you have a field named “my_field”, add a the prefix ‘x’ to it and add it normally to query_posts. E.g.
<? query_posts($query_string.’x_my_field=true’); ?>
Usage with Class
<img src= "<? echo pt(); ?>?src=<? echo get('photo1'); ?>&w=50>" />
<a class="zoom1" href="<? echo get('photo1'); ?>"><img title="11" src="<? echo get('photo1'); ?>" width="100"></a>
Get image thumb
<img src= "<? echo pt(); ?>?src=<? echo get('photo1'); ?>&w=50>" />
<a class="zoom1" href="<? echo get('photo1'); ?>"><img src= "<? echo pt(); ?>?src=<? echo get('photo1'); ?>&w=50>" /></a>
w=50 is thumb size
if no photo field
<?php if( get('photo9')=='' ) { ?>
<?php } else { ?>
<li><a class="MagicZoom" rel="zoom-position: custom;zoom-width: 600; zoom-height: 388;zoom-fade: true" id="zoom" title="" href="<? echo pt(); ?>?src=<? echo get('photo9'); ?>&w=600>"><img src= "<? echo pt(); ?>?src=<? echo get('photo9'); ?>&w=100>" border="0" /></a></li>
<?php } ?>
or
<?php if( get('photo10')=='' ) { ?>
<?php } else { ?>
<a href="<? echo get('photo10'); ?>">10</a> |
<?php } ?>
Flutter and Admin Menu WPMU
Here is the change I made to RCCWP_Menu.php (for Flutter 1.1, around line 457):
foreach ($menu as $k => $v) {
//HACKS
if ($k == 2) $site_admin = $v;
////////////
if($k > 5) $new_menu[$k+$offset]=$v;
}
$menu = $new_menu;
$menu[2] = $site_admin;
Windows upload images
windows server issues with get_image()
if your using a windows server and your getting image paths with the slashes stripped out here's what to do.
RCCWP_Constant.php line 115
change from
define('FLUTTER_FILES_URI', WP_CONTENT_URL.DIRECTORY_SEPARATOR.FLUTTER_FILES_NAME.DIRECTORY_SEPARATOR);
to
define('FLUTTER_FILES_URI', WP_CONTENT_URL.'/'.FLUTTER_FILES_NAME.'/');
thanks friends from internet community :)
More
<? echo jt_get_thumb("photo", 1, 1, false, "w=250&h=0&zc=1");?>
phpthumb option
- http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php
- http://www.freshtilledsoil.com/how-to-use-the-flutter-custom-fields-options-list-to-crop-and-manipulate-images/
custom option
src = filename of source image
new = create new image, not thumbnail of existing image.
Requires "w" and "h" parameters set.
[ex: &new=FF0000|75] - red background, 75% opacity
Set to hex color string of background. Opacity is
optional (defaults to 100% opaque).
w = max width of output thumbnail in pixels
h = max height of output thumbnail in pixels
wp = max width for portrait images
hp = max height for portrait images
wl = max width for landscape images
hl = max height for landscape images
ws = max width for square images
hs = max height for square images
f = output image format ("jpeg", "png", or "gif")
q = JPEG compression (1=worst, 95=best, 75=default)
sx = left side of source rectangle (default = 0)
(values 0 < sx < 1 represent percentage)
sy = top side of source rectangle (default = 0)
(values 0 < sy < 1 represent percentage)
sw = width of source rectangle (default = fullwidth)
(values 0 < sw < 1 represent percentage)
sh = height of source rectangle (default = fullheight)
(values 0 < sh < 1 represent percentage)
zc = zoom-crop. Will auto-crop off the larger dimension
so that the image will fill the smaller dimension
(requires both "w" and "h", overrides "iar", "far")
Set to "1" or "C" to zoom-crop towards the center,
or set to "T", "B", "L", "R", "TL", "TR", "BL", "BR"
to gravitate towards top/left/bottom/right directions
(requies ImageMagick for values other than "C" or "1")
bg = background hex color (default = FFFFFF)
bc = border hex color (default = 000000)
fltr = filter system. Call as an array as follows:
- "brit" (Brightness) [ex: &fltr[]=brit|<value]
where <value is the amount +/- to adjust brightness
(range -255 to 255)
Availble in PHP5 with bundled GD only.
- "cont" (Constrast) [ex: &fltr[]=cont|<value>]
where <value is the amount +/- to adjust contrast
(range -255 to 255)
Availble in PHP5 with bundled GD only.
- "gam" (Gamma Correction) [ex:
&fltr[]=gam|<value>]
where <value> can be a number >0 to 10+ (default 1.0)
Must be >0 (zero gives no effect). There is no max,
although beyond 10 is pretty useless. Negative
numbers actually do something, maybe not quite the
desired effect, but interesting nonetheless.
- "sat" (SATuration) [ex: &fltr[]=sat|<value>]
where <value> is a number between zero (no change)
and -100 (complete desaturation = grayscale), or it
can be any positive number for increased saturation.
- "ds" (DeSaturate) [ex: &fltr[]=ds|<value>]
is an alias for "sat" except values are inverted
(positive values remove color, negative values boost
saturation)
- "gray" (Grayscale) [ex: &fltr[]=gray]
remove all color from image, make it grayscale
- "th" (Threshold) [ex: &fltr[]=th|<value>]
makes image greyscale, then sets all pixels brighter
than <value> (range 0-255) to white, and all pixels
darker than <value> to black
- "rcd" (Reduce Color Depth) [ex:
&fltr[]=rcd|<c>|<d>]
where <c> is the number of colors (2-256) you want
in the output image, and <d> is "1" for dithering
(deault) or "0" for no dithering
- "clr" (Colorize) [ex:
&fltr[]=clr|<value>|<color>]
where <value> is a number between 0 and 100 for the
amount of colorization, and <color> is the hex color
to colorize to.
- "sep" (Sepia) [ex:
&fltr[]=sep|<value>|<color>]
where <value> is a number between 0 and 100 for the
amount of colorization (default=50), and <color> is
the hex color to colorize to (default=A28065).
Note: this behaves differently when applied by
ImageMagick, in which case 80 is default, and lower
values give brighter/yellower images and higher
values give darker/bluer images
- "usm" (UnSharpMask) [ex:
&fltr[]=usm|<a>|<r>|<t>]
where <a> is the amount (default = 80), <r> is the
radius (default = 0.5), <t> is the threshold
(default = 3).
- "blur" (Blur) [ex: &fltr[]=blur|<radius>]
where (0 < <radius> < 25) (default = 1)
- "gblr" (Gaussian Blur) [ex: &fltr[]=gblr]
Availble in PHP5 with bundled GD only.
- "sblr" (Selective Blur) [ex: &fltr[]=gblr]
Availble in PHP5 with bundled GD only.
- "smth" (Smooth) [ex: &fltr[]=smth|<value>]
where <value> is the weighting value for the matrix
(range -10 to 10, default 6)
Availble in PHP5 with bundled GD only.
- "lvl" (Levels)
[ex: &fltr[]=lvl|<channel>|<method>|<threshol>d
where <channel> can be one of "r", "g", "b", "a" (for
Red, Green, Blue, Alpha respectively), or "*" for all
RGB channels (default) based on grayscale average.
ImageMagick methods can support multiple channels
(eg "lvl|rg|3") but internal methods cannot (they will
use first character of channel string as channel)
<method> can be one of:
0=Internal RGB;
1=Internal Grayscale;
2=ImageMagick Contrast-Stretch (default)
3=ImageMagick Normalize (may appear over-saturated)
<threshold> is how much of brightest/darkest pixels
will be clipped in percent (default = 0.1%)
Using default parameters (&fltr[]=lvl) is similar to
Auto Contrast in Adobe Photoshop.
- "wb" (White Balance) [ex: &fltr[]=wb|<c>]
where <c> is the target hex color to white balance
on, this color is what "should be" white, or light
gray. The filter attempts to maintain brightness so
any gray color can theoretically be used. If <c> is
omitted the filter guesses based on brightest pixels
in each of RGB
OR <c> can be the percent of white clipping used
to calculate auto-white-balance (default = 0.1%)
NOTE: "wb" in default settings already gives an effect
similar to "lvl", there is usually no need to use "lvl"
if "wb" is already used.
- "hist" (Histogram)
[ex: &fltr[]=hist|<b>|<c>|<w>|<h>|<a>|<o>|<x>|<y>]
Where <b> is the color band(s) to display, from back
to front (one or more of "rgba*" for Red Green Blue
Alpha and Grayscale respectively);
<c> is a semicolon-seperated list of hex colors to
use for each graph band (defaults to FF0000, 00FF00,
0000FF, 999999, FFFFFF respectively);
<w> and <h> are the width and height of the overlaid
histogram in pixels, or if <= 1 then percentage of
source image width/height;
<a> is the alignment (same as for "wmi" and "wmt");
<o> is opacity from 0 (transparent) to 100 (opaque)
(requires PHP v4.3.2, otherwise 100% opaque);
<x> and <y> are the edge margin in pixels (or percent
if 0 < (x|y) < 1)
- "over" (OVERlay/underlay image) overlays an image on
the thumbnail, or overlays the thumbnail on another
image (to create a picture frame for example)
[ex: &fltr[]=over|<i>|<u>|<m>|<o>]
where <i> is the image filename; <u> is "0" (default)
for overlay the image on top of the thumbnail or "1"
for overlay the thumbnail on top of the image; <m> is
the margin - can be absolute pixels, or if < 1 is a
percentage of the thumbnail size [must be < 0.5]
(default is 0 for overlay and 10% for underlay);
<o> is opacity (0 = transparent, 100 = opaque)
(requires PHP v4.3.2, otherwise 100% opaque);
(thanks raynerape?gmail*com, shabazz3?msu*edu)
- "wmi" (WaterMarkImage)
[ex: &fltr[]=wmi|<f>|<a>|<o>|<x>|<y>|<r>] where
<f> is the filename of the image to overlay;
<a> is the alignment (one of BR, BL, TR, TL, C,
R, L, T, B, *) where B=bottom, T=top, L=left,
R=right, C=centre, *=tile)
*or*
an absolute position in pixels (from top-left
corner of canvas to top-left corner of overlay)
in format {xoffset}x{yoffset} (eg: "10x20")
note: this is center position of image if <>x
and <y> are set
<o> is opacity from 0 (transparent) to 100 (opaque)
(requires PHP v4.3.2, otherwise 100% opaque);
<x> and <y> are the edge (and inter-tile) margin in
pixels (or percent if 0 < (x|y) < 1)
*or*
if <a> is absolute-position format then <x> and
<y> represent maximum width and height that the
watermark image will be scaled to fit inside
<r> is rotation angle of overlaid watermark
- "wmt" (WaterMarkText)
[ex: &fltr[]=wmt|<t>|<s>|<a>|<c>|<f>|<o>|<m>|<n>|<b>|<O>|<x>]
where:
<t> is the text to use as a watermark;
URLencoded Unicode HTMLentities must be used for
characters beyond chr(127). For example, the
"eighth note" character (U+266A) is represented
as "
" and then urlencoded to "%26%239834%3B"
Any instance of metacharacters will be replaced
with their calculated value. Currently supported:
^Fb = source image filesize in bytes
^Fk = source image filesize in kilobytes
^Fm = source image filesize in megabytes
^X = source image width in pixels
^Y = source image height in pixels
^x = thumbnail width in pixels
^y = thumbnail height in pixels
^^ = the character ^
<s> is the font size (1-5 for built-in font, or point
size for TrueType fonts);
<a> is the alignment (one of BR, BL, TR, TL, C, R, L,
T, B, * where B=bottom, T=top, L=left, R=right,
C=centre, *=tile);
*or*
an absolute position in pixels (from top-left
corner of canvas to top-left corner of overlay)
in format {xoffset}x{yoffset} (eg: "10x20")
<c> is the hex color of the text;
<f> is the filename of the TTF file (optional, if
omitted a built-in font will be used);
<o> is opacity from 0 (transparent) to 100 (opaque)
(requires PHP v4.3.2, otherwise 100% opaque);
<m> is the edge (and inter-tile) margin in percent;
<n> is the angle
<b> is the hex color of the background;
<O> is background opacity from 0 (transparent) to
100 (opaque)
(requires PHP v4.3.2, otherwise 100% opaque);
<x> is the direction(s) in which the background is
extended (either "x" or "y" (or both, but both
will obscure entire image))
Note: works with TTF fonts only, not built-in
- "flip" [ex: &fltr[]=flip|x or &fltr[]=flip|y]
flip image on X or Y axis
- "ric" [ex: &fltr[]=ric|<x>|<y>]
rounds off the corners of the image (to transparent
for PNG output), where <x> is the horizontal radius
of the curve and <y> is the vertical radius
- "elip" [ex: &fltr[]=elip]
similar to rounded corners but more extreme
- "mask" [ex: &fltr[]=mask|filename.png]
greyscale values of mask are applied as the alpha
channel to the main image. White is opaque, black
is transparent.
- "bvl" (BeVeL) [ex:
&fltr[]=bvl|<w>|<c1>|<c2>]
where <w> is the bevel width, <c1> is the hex color
for the top and left shading, <c2> is the hex color
for the bottom and right shading
- "bord" (BORDer) [ex:
&fltr[]=bord|<w>|<rx>|<ry>|<>c
where <w> is the width in pixels, <rx>
and <ry> are
horizontal and vertical radii for rounded corners,
and <c> is the hex color of the border
- "fram" (FRAMe) draws a frame, similar to "bord" but
more configurable
[ex: &fltr[]=fram|<w1>|<w2>|<c1>|<c2>|<c3>]
where <w1> is the width of the main border,
<w2> is
the width of each side of the bevel part, <c1> is the
hex color of the main border, <c2> is the highlight
bevel color, <c3> is the shadow bevel color
- "drop" (DROP shadow)
[ex: &fltr[]=drop|<d>|<w>|<clr>|<a>]
where <d> is distance from image to shadow,
<w> is
width of shadow fade (not yet implemented),
<clr> is
the hex color of the shadow, and <a> is the angle of
the shadow (default=225)
- "crop" (CROP image)
[ex:
&fltr[]=crop|<l>|<r>|<t>|<b>]
where <l> is the number of pixels to crop from the left
side of the resized image; <r>, <t>,
<b> are for right,
top and bottom respectively. Where (0 < x < 1) the
value will be used as a percentage of width/height.
Left and top crops take precedence over right and
bottom values. Cropping will be limited such that at
least 1 pixel of width and height always remains.
- "rot" (ROTate)
[ex: &fltr[]=rot|<a>|<b>]
where <a> is the rotation angle in degrees;
<b> is the
background hex color. Similar to regular "ra" parameter
but is applied in filter order after regular processing
so you can rotate output of other filters.
- "size" (reSIZE)
[ex: &fltr[]=size|<x>|<y>|<s>]
where <x> is the horizontal dimension in pixels,
<y> is
the vertical dimension in pixels, <s> is boolean whether
to stretch (if 1) or resize proportionately (0, default)
<x> and <y> will be interpreted as percentage of current
output image size if values are (0 < X < 1)
NOTE: do NOT use this filter unless absolutely neccesary.
It is only provided for cases where other filters need to
have absolute positioning based on source image and the
resultant image should be resized after other filters are
applied. This filter is less efficient than the standard
resizing procedures.
- "stc" (Source Transparent Color)
[ex: &fltr[]=stc|<c>|<n>|
EIP
EIP (Edit-n-place) Flutter offers a feature named EIP (edit-n-place). EIP allows authors to edit the post directly from the blog page. When the blog page is opened and the current logged-in user is an author, he will be able to directly edit the post simply by clicking the post title or the post content. Once clicked, the title/content area becomes editable and a save button appears.
The author can edit the title/content and click save when he finishes editing. Since it is not trivial to know exactly the place of title/content that the desginer wants to be editable, Flutter needs some help from the desginer. In order to make a title editable, the designer must add a class to the tag enclosing the title in the theme file. The class name should be retrieved using the function EIP_title(), and for the content a similar function is used named EIP_content(). In addition, you can use EIP feature for fields of type textbox and multiline textbox. When you use get() function, it will return the value of the textbox field wrapped in a div.
For example, to make a title (which is enclosed in an <h2> tag) EIP-compatabile, use the following line :
<h2 class="<?php EIP_title(); ?>"> <?php the_title(); ?> </h2>
And to make a content (which is enclosed in a <div> tag) EIP-compatabile, use the following line :
<div class="<?php EIP_content(); ?>"> <?php the_content(); ?></div>