Using custom characters in JCE Editor can be challenging, especially if you want to use symbols, not on the JCEs default list. There are two ways to do this.
Special characters are often used in content to show something, but could you please explain how a field is inserted into an article? You know it's by inserting curly brackets { and }, but you can't insert the field number in between because you will then show the field instead of the text.
There are two ways to do this. One is by overriding/adding the characters to the Character Map in JCE; how come this method requires you to add each code separately in each of your JCE profiles using an HTML entity? Using this way, you must ensure that JCE does not strip your code. The other way is by using CSS and pseudo-elements
Adding special characters to the Character Map is very time-consuming. First, you'll need to find the HTML entities you want to add. Here is a list of them. Now go into your JCE profile of choice; go into "Plugin Parameters" and find Character Map. There you need to add all your entities.
<span class="special-chars curly-backets">field 1</span>
// Curly Brackets
span.special-chars {
display: inline-block;
background-color: 777;
}
span.curly-brackets:before {
content: "{";
}
span.curly-brackets:after {
content: "}";
}
Go to Components → JCE Editor → Profiles → [YOUR PROFILE] usually "Default" → Editors Parameters ↔ Typography → Write your file path and name in "Custom CSS Files"
Go into your Profile (as above) → Plugin Parameters → Style Select (scroll down to find)
Here you add your styles
There are three places to make sure you add the styles. Give it a Name, Tag, and Classes (for Tag, it is helpful to use "span").
In your article, select the test to have, like the Styles dropdown, and your "Curly Brackets" will appear.
REMEMBER TO ADD YOUR STYLES TO THE TEMPLATE!
- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -
JCE Editor is more than a basic Editor for Joomla. You can give access to specific folders on the ROOT or even subfolders using the “Filesystem” in the JCE Profiles.
Read more: How do I get access to more folders in Joomla using JCE Editor
Custom Fields in Joomla offers a large number of opportunities. You can, if you like, create an override using Custom Fields directly into the article, or you can put them into an article wherever you want.
Joomla has since version 3.8 offered a large number of Custom Fields in the Core install.
Custom Fields that comes preinstalled with the Joomla Core:
You can read all about them here.
In this tutorial, we will try to make a system to do rating in your content; this is how we rate our reviews of extensions/templates using Custom Fields and ReReplacer from Regular Labs. We also use FontAwesome to publish thestar. You can even make a Content Template for simple access to the Review system using Content Templater that comes from Regular Labs useing your favorite Editor of Choice.
To make Custom Fields in Joomla, go to Content Fields (It is, by the way, it is recommended to sort the Fields into Field Groups, you can create a category by going to Content Fields Groups).
The Fields that we have used are Ratio Field; you may also use the Checkbox to get the same result. Here you can read about how to make a Ratio Field.
We have created fields for Total, Functionality, Ease of use, and Documentation Ratio Fields, containing values from 0 to 5.
We will then get these Ratio Fields:
It is easy to get the fields to appear in your Articles, you use the shortcode {field [FIELD NUMBER]} in our example, this will be field 1, field 2, field 3 and field 4.
In our solution we use an table that looks like this:
<table style="width: 100%;">
<tbody>
<tr class="stars-rating-rows">
<td class="star-rating-stars label">
<span><strong>Total</strong></span></td>
<td class="star-rating-stars"><strong>
<span>❴field 1❵</span></strong></td>
</tr>
<tr class="stars-rating-rows">
<td class="star-rating-stars label">
Functionality</td>
<td class="star-rating-stars">
❴field 2❵</td>
</tr>
<tr class="stars-rating-rows">
<td class="star-rating-stars label">
Ease of use</td>
<td class="star-rating-stars">
❴field 3❵</td>
</tr>
<tr class="stars-rating-rows">
<td class="star-rating-stars label">
Support / Documentation</td>
<td class="star-rating-stars">
❴field 4❵</td>
</tr>
</tbody>
</table>We have chosen to use the Regular Labs’ Extension ReReplacer to replace the content for eachstar in our solution. This Extension replaces HTML content in your article with HTML content of choice.
We have done it this way:
The HTML Code for this solution is:
Search For:
<span class="field-value">0</span>Replace with:
<span class="field-value">
<i class="fa fa-star" style="color:#666;"></i>
<i class="fa fa-star" style="color:#666;"></i>
<i class="fa fa-star" style="color:#666;"></i>
<i class="fa fa-star" style="color:#666;"></i>
<i class="fa fa-star" style="color:#666;"></i>
</span>Search For:
<span class="field-value">1</span>Replace with:
<span class="field-value">
<i class="fa fa-star" style="color:#ffd700;"></i>
<i class="fa fa-star" style="color:#666;"></i>
<i class="fa fa-star" style="color:#666;"></i>
<i class="fa fa-star" style="color:#666;"></i>
<i class="fa fa-star" style="color:#666;"></i>
</span>
Change out the:
<i class="fa fa-star" style="color:#666;"></i>with
<i class="fa fa-star" style="color:#ffd700;"></i>for thestar 1 to 5 each in its own ReReplacer.
- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -
Icons have a significant visual effect to have on your website. Did you know that using an icon as a Custom Field is possible? - Creating an override for the Field layout is done in minutes.
Since Font Awesome is included in Joomla's Cassiopeia template, we will use a template override for the Field layout.
Creating overrides in Joomla 4 is relatively easy. It is easier if you can read code and know HTML. Just follow these steps:
Select the "Site Template" to go into the area for creating overrides of Joomla 4.
Joomla 4 left menu
Select "System" from the left menu.
The difference between Site Templates and Site Template Styles is that the overrides for the Template that is put on the Site Templates place, here you put all your customization of the site. The Styles are set in the separate Site Template Styles, which you only use to change the site's primary colors and add a custom logo and the template's name.
Joomla 4 select "Site Templates"
This opens the place where you create the overrides. There is a selection called "Create Overrides"; go into it.
The override we are looking for is a "Layout"-override, and the field, this is located under Layouts ⇒ com_fields, select "Field".
Now go into the editor under HTML ⇒ layouts ⇒ com_fields ⇒ field ⇒ render.php.
REMEMBER TO RENAME THE render.php FILE!
<?php
/**
* @package Joomla.Site
* @subpackage com_fields
*
* @copyright (C) 2016 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Language\Text;
if (!array_key_exists('field', $displayData)) {
return;
}
$field = $displayData['field'];
$label = Text::_($field->label);
$value = $field->value;
$showLabel = $field->params->get('showlabel');
$prefix = Text::plural($field->params->get('prefix'), $value);
$suffix = Text::plural($field->params->get('suffix'), $value);
$labelClass = $field->params->get('label_render_class');
$valueClass = $field->params->get('value_render_class');
if ($value == '') {
return;
}
?>
<?php if ($showLabel == 1) : ?>
<span class="field-label <?php echo $labelClass; ?>"><?php echo htmlentities($label, ENT_QUOTES | ENT_IGNORE, 'UTF-8'); ?>: </span>
<?php endif; ?>
<?php if ($prefix) : ?>
<span class="field-prefix"><?php echo htmlentities($prefix, ENT_QUOTES | ENT_IGNORE, 'UTF-8'); ?></span>
<?php endif; ?>
<span class="field-value <?php echo $valueClass; ?>"><?php echo $value; ?></span>
<?php if ($suffix) : ?>
<span class="field-suffix"><?php echo htmlentities($suffix, ENT_QUOTES | ENT_IGNORE, 'UTF-8'); ?></span>
<?php endif; ?>
<?php
/**
* @package Joomla.Site
* @subpackage com_fields
*
* @copyright (C) 2016 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Language\Text;
if (!array_key_exists('field', $displayData)) {
return;
}
$field = $displayData['field'];
$label = Text::_($field->label);
$value = $field->value;
$showLabel = $field->params->get('showlabel');
$prefix = Text::plural($field->params->get('prefix'), $value);
$suffix = Text::plural($field->params->get('suffix'), $value);
$labelClass = $field->params->get('label_render_class');
$valueClass = $field->params->get('value_render_class');
if ($value == '') {
return;
}
?>
<?php if ($showLabel == 1) : ?>
<span class="field-label <?php echo $labelClass; ?>"><?php echo htmlentities($label, ENT_QUOTES | ENT_IGNORE, 'UTF-8'); ?>: </span>
<?php endif; ?>
<?php if ($prefix) : ?>
<span class="field-prefix"><?php echo htmlentities($prefix, ENT_QUOTES | ENT_IGNORE, 'UTF-8'); ?></span>
<?php endif; ?>
<span class="field-value <?php echo $valueClass; ?>"><i class="fa fa-<?php echo $value; ?>"></i></span>
<?php if ($suffix) : ?>
<span class="field-suffix"><?php echo htmlentities($suffix, ENT_QUOTES | ENT_IGNORE, 'UTF-8'); ?></span>
<?php endif; ?>
The best field to use is the "radio-button" field. On the options tab - Go to layouts, and select the desired override.
- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -
ADS
