Shortcodes:Frontend

From e107 Wiki
Jump to: navigation, search

e107 Wiki: English | Русский | Deutsch | Français | Magyar | Português | Български | Česky | Nederlands | Ελληνικά | Italiano | Norske | Polska | Slovenščina | Español | Svenska | Translate: Wiki | Page

logo_wiki.png

Current Release 1.0.4 | e107.org | Download | Changelog | Forum | Plugins | Themes | RSS Feed of Latest Changes | Atom Feed of Latest Changes


e107 Shortcode Guide
Main page > I : First Aid > II : Development > III : Administration > IV : How To's > V : Plugin Writing > VI : Theming & Shortcodes



These shortcodes are those used in the public area of your site but they may also be used in the admin area in some circumstances.

Contents

{BANNER}

Displays a banner from the banner system in e107, at its placed location, and it will rotate through the banners in all campaigns.

{BANNER=ABCD}

Will only display banners from a campaign with name ABCD.

Contact

{SITECONTACTINFO}

Displays the site contact information which is set in the Admin section under the Site Preferences:Site Information.

{CONTACT_IMAGECODE}

This will display the image verification code, used on login page, contact page, register, forum submit etc.

{CONTACT_IMAGECODE_INPUT}

This is the box to enter the image verification code from above (EG. {CONTACT_IMAGECODE}). Used to validate all the forms (login, signup, forum posting) you want to protect with the image verification code by the spammers. You must enter in the code from the generated image in this box to validate.

{CUSTOM}

The {CUSTOM} shortcode handles various types of output. In essence, these are replacements to the standard menus of the same type. For example, instead of using the standard login menu you can use {CUSTOM=login} which will display a username and password form on your site without the surrounding menu table render. The following pages in this section of the manual will introduce you to the different {CUSTOM} types available to you.

{CUSTOM=clock}

This shortcode will display a horizontal clock in this format: Monday, 01 January 2006 01:01

{CUSTOM=language}

Displays a drop down box with a list of installed languages for a multi-lingual site.

See also #Languages below.

{CUSTOM=login}

This shortcode displays a horizontal login menu WITHOUT the image code verification or the forgot password link.

{CUSTOM=quote}

This shortcode is used to display a random quote when ever the page is refreshed. To use this you need to have a file named "quote.txt" in you root website folder (where the e107_config.php files is located). The format of quote.txt is simple, each new line is a new quote and will be displayed in the format on that line.

Code: Example quote.txt
"Technological progress is like an axe in the hands of a pathological criminal." --Albert Einstein
"History will be kind to me for I intend to write it." --Sir Winston Churchill
"All you need in this life is ignorance and confidence; then success is sure." --Mark Twain
"A bank is a place that will lend you money if you can prove that you don't need it." --Bob Hope

This will give you 4 random quotes.

{CUSTOM=search} - Deprecated.

Please use {SEARCH} instead.

{CUSTOM=welcomemessage} - Deprecated.

Please use {WMESSAGE} instead.

Languages

{LANGUAGELINKS}

Adding the {LANGUAGELINKS} shortcode to your theme will render a link in the native language of each language that is available on your site in the e107_languages folder, separated by a |. e.g.

 English | Français | 한국어

It may be customized by giving the shortcode the languages you wish to render. ie. If you have multiple language folders on your server (in e107_languages/), but only wish to render some of them, you can use a comma separated list in the $parm area of the shortcode: e.g.

{LANGUAGELINKS=English,French,Korean} would render the first example above. 

If you wish to change the default separator, this can be done by defining the following in your theme.php file:

define("LANGLINKS_SEPARATOR"," x ");

which would render links that look something like this:

 English x Français x 한국어 

The links generated by this shortcode can be customized further using the css classes: languagelink and languagelink_active. e.g.

a.languagelink:link, a.languagelink:visited {
	color: white;
}

a.languagelink_active:link, a.languagelink_active:visited {
	color: white;
	text-decoration: underline;
}

{LINKSTYLE}

Coming soon.

Mail

{EMAIL_ITEM}

This displays a link to "Recommend This" by email.

Syntax

message^source^other_parms

message: sets the alt and the title attribute of the link
source: sets the link to be emailed
^: separates the different parameters
Code: Example code
{EMAIL_ITEM=news.php^news.php}

Result

Code: Result
<a href='email.php?news.php'>
<img src='e107_images/generic/lite/email.png' style='border:0' alt='news.php' title='news.php'/>
</a>

{EMAILTO}

This creates an email link. You must set the "IMAGE_email" constant. It will only display the link for members

Code: Example theme.php
define("IMAGE_email", "Email"); //gives you a text link
define("IMAGE_email", "<img src='email.png'/>"); //gives you an image link
define("IMAGE_email", "<img src='email.png'/> Email"); //gives you both an image and text link
define("IMAGE_email", "<img src='".e_IMAGE."generic/".IMODE."/email.png' style='border:0'/>"); 
                       //gives you e107's default email icon

{EMAILTO=1} //will create a email link to the user with the id of 1
{EMAILTO=none@none.com} //will create a link to this email address

Media

{E_IMAGE}

This will return the value of "$IMAGES_DIRECTORY". More information on "$IMAGES_DIRECTORY" can be found at Change your e107 folder names.

{IMAGESELECTOR}

This will create a image selection dialog and preview box. Usage:

{IMAGESELECTOR=<name>,<path>,<default>,<width>,<height>,<multiple>,<label>}.
Parameters
  • name: This is the select box "name" and "id" as well as the img "id" attributes.
  • path: This is the image directory path.
  • default: This is the default image that will be displayed when the preview box.
  • width: This is the width of the preview box (uses "style" not "width" img attribute).
  • height: This is the height of the preview box (uses "style" not "height" img attribute).
  • multiple: This allows a multiple select box. To enable this option use "TRUE" or "1".
  • label: The is the label for the select box.
Code: Example
{IMAGESELECTOR=choose_image,e107_images,/logo.png,100px,100px,0,Select an Image}
{IMAGESELECTOR=choose_image2,e107_images,,,,1}

Would output:

Code: Example Source
<!-- Start Image Selector -->

<select style='float:left' class='tbox' name='choose_image' id='choose_image' 
                           onchange="preview_image('choose_image','e107_images');">
	<option value=''>Select an Image</option>
<option value='adminlogo.png'>adminlogo.png</option>
<option value='advanced.png'>advanced.png</option>
<option value='button.png'>button.png</option>
<option value='e107_icon_16.png'>e107_icon_16.png</option>

<option value='e107_icon_32.png'>e107_icon_32.png</option>
<option value='logo.png'>logo.png</option>
<option value='logo_template.png'>logo_template.png</option>
<option value='logo_template_large.png'>logo_template_large.png</option>
<option value='pcmag.png'>pcmag.png</option>
<option value='splash.jpg'>splash.jpg</option>
</select> <img id='choose_image_prev' src='e107_images/logo.png' alt='' 
                                           style='width:100px;height:100px' />

<!-- End Image Selector -->


<!-- Start Image Selector -->

<select multiple='multiple' style='height:' class='tbox' name='choose_image2' id='choose_image2' 
                            onchange="preview_image('choose_image2','e107_images');">
	<option value=''> -- -- </option>
<option value='adminlogo.png'>adminlogo.png</option>
<option value='advanced.png'>advanced.png</option>
<option value='button.png'>button.png</option>
<option value='e107_icon_16.png'>e107_icon_16.png</option>

<option value='e107_icon_32.png'>e107_icon_32.png</option>
<option value='logo.png'>logo.png</option>
<option value='logo_template.png'>logo_template.png</option>
<option value='logo_template_large.png'>logo_template_large.png</option>
<option value='pcmag.png'>pcmag.png</option>
<option value='splash.jpg'>splash.jpg</option>
</select> <img id='choose_image2_prev' src='e107_images/generic/blank.gif' alt='' 
                                            style='width:*;height:*' />


<!-- End Image Selector -->

News

{NEWS_ALT}

This displays the latest news from a chosen category using its ID number. It will use the $NEWSSTYLE format from your theme.php.

Code: Example
{NEWS_ALT=1}

This would display the latest new from the new category with the ID of 1.

{NEWS_CATEGORIES}

This displays the News Categories list.

{NEWS_CATEGORY}

This is a synonym for {NEWS_ALT}.

{NEWSFILE}

This creates a direct download link to a file in the downloads directory.

Code: Example
{NEWSFILE=test.zip}

Would output this:

Code: Example Output
<img src='e107_images/generic/lite/download.png' alt='' style='vertical-align: middle;' /> 
<a href='e107_files/downloads/test.zip'>test.zip</a>

{NEWSIMAGE}

This displays an image from the e107_images/newspost_images directory as well as a link to the last news item to have that image.

Code: Example
{NEWSIMAGE=test.png}

Would output this:

Code: Example Output
<a href='news.php?item.3.2'>
<img class='news_image' src='e107_images/newspost_images/test.png' alt='' style='border:0px' />
</a>

{NEXTPREV}

This code is used to generate the next/previous buttons often found on pages that contain long listings from the database. The following example, will display 30 rows from the database on each page.

  $from = ($_GET['frm']) ? $_GET['frm'] : 0;
  $view = 30;

  $total_items = $sql -> db_Select("download", "*", "download_author='$usernm'");
  $sql -> db_Select("download", "*", "download_author='$usernm' LIMIT $from,$view");
  while($row = $sql-> db_Fetch()){
     $text .= "text-here".$row['fieldname'];
   }

 $parms = $total_items.",".$view.",".$from.",".e_SELF.'?frm=[FROM]';
 $text .= $tp->parseTemplate("{NEXTPREV={$parms}}");

echo $text;

{PLUGIN}

This code will allow you to place a specific plugin menu anywhere you want. You should enter the path to the menu as the parameter. If no directory is given, it is assumed to be the same as the plugin name. Do not provide .php extension.

  • {PLUGIN=chatbox_menu} - File is assumed to be e_PLUGIN/chatbox_menu/chatbox_menu.php
  • {PLUGIN=forum/newforumposts_menu} - File is assumed to be e_PLUGIN/forum/newforumposts_menu.php

{SEARCH}

Adding this shortcode to your theme will place a small search box and button on the page which will search all the default search areas of your site. (see admin/search). You can however, customize it to search one particular section if you wish. Here are some examples:

{SEARCH=news}

Search only news items.

{SEARCH=comments}

Search comments only.

{SEARCH=users}

Search for users only. (members)

{SEARCH=downloads}

Search in downloads only.

{SEARCH=pages}

Search within custom pages.

{SEARCH=<plugin_name>}

On plugins that support searching, you can also give the folder name of the plugin you wish to search within. For example, to search within the chatbox plugin, which has a folder in e107_plugins by the same name, you would use {SEARCH=chatbox}.

Site Details

{LOGO}

Displays the site logo. If a image is found at THEME_NAME/images/e_logo.png it will use it, else it uses the default logo image located at e107_images/logo.png.

{SITELINKS}

This displays the basic site navigation menu. More to come.

{SITELINKS_ALT}

This displays an advanced site navigation menu.

The presented links menu requires a mouse click on a parent to enable the dropdown.

To make it auto expand on mouseover you need to use: {SITELINKS_ALT=no_icons+noclick}

{SITENAME}

Returns the current 'site name' as configured in preferences.

{SITETAG}

Returns the current 'site tag' as configured in preferences.

{SITEDESCRIPTION}

Returns the current 'site description' as configured in preferences.

{SITEDISCLAIMER}

Returns the current 'Site Disclaimer' as configured in preferences.

Themes

{MENU}

This takes the parameter of the menu area you wish to render.

{MENU=2} - Will render all menus assigned to area #2.

{SETSTYLE}

This shortcode is allows for multiple styles. See Advanced theme creation: Multiple Theme Menu Styles on how to use it.

Users

{EXTENDED} - Deprecated

Use {USER_EXTENDED} instead.


{USER_EXTENDED}

This will display an extended user field. Usage is {USER_EXTENDED=<field_name>.[text|value|icon].<user_id>}.

EXAMPLE:

{USER_EXTENDED=gender.value.5}  

This will show the value of the extended field user_gender for user #5.

NOTE THAT: e107 adds USER_ to the field name, hence gender in the first parameter returns the value in the DB field user_gender.

{EXTENDED_ICON}

This will show the icon for a extended user field. Usage is {EXTENDED_ICON=<field_name>.<user_id>}. This is also the same as using {USER_EXTENDED=<field_name>.icon.<user_id>}.

EXAMPLE:

{EXTENDED_ICON=user_gender.5}
{USER_EXTENDED=user_gender.icon.5}

These both will show the icon of the extended field user_gender for user #5.

{EXTENDED_TEXT}

This will show the text for a extended user field. Usage is {EXTENDED_TEXT=<field_name>.<user_id>}. This is also the same as using {USER_EXTENDED=<field_name>.text.<user_id>}.

EXAMPLE:

{EXTENDED_TEXT=user_gender.5}
{USER_EXTENDED=user_gender.text.5}

These both will show the text of the extended field user_gender for user #5.

{EXTENDED_VALUE}

This will show the value for a extended user field. Usage is {EXTENDED_VALUE=<field_name>.<user_id>}. This is also the same as using {USER_EXTENDED=<field_name>.value.<user_id>}.

EXAMPLE:

{EXTENDED_VALUE=user_gender.5}
{USER_EXTENDED=user_gender.value.5}

These both will show the text of the extended field user_gender for user #5.

{PICTURE}

This displays the picture of a user.

Code: Example
{PICTURE=1}

This would display the picture of the user with the ID of 1.

{USER_AVATAR}

  • {USER_AVATAR} - Will show the current logged-in user's avatar.
  • {USER_AVATAR=4} - Will show the avatar of userid #4.
  • {USER_AVATAR=path_to_image} - Will show that image

{WMESSAGE}

The welcome message may be placed immediately following the header, or explicitly using a theme template, dependent on the option selected. This description primarily covers use within a template.

The welcome message display is also affected by the 'front page' options set for particular user classes. (It looks as if it usually only appears on the user's 'Home' page as set).

There are several optional parameters:

{WMESSAGE=header}

Linked with the admin option 'Override standard system to use'.

{WMESSAGE=ignore_query}

Appears to cause the welcome message to ignore the query part of the URL in determining whether a page match has occurred.

{WMESSAGE=force}

Appears to cause the welcome message to appear on every page?