---
title: 'Custom Fields - how far can you go'
created_time: '2023-09-23 17:06:17'
language: fr
subtitle: ''
---

# Custom Fields - how far can you go

by Marc Dechèvre

![Marc](%URL%.images/marc_dechevre.jpg "100x100")

present slides <i class="fa fa-desktop"></i>  https://slides.woluweb.be

[CMS Africa](https://www.cmsafricasummit.org/) 2019.03.15 | **#CMSAfrica19**

[Basic Joomla Tutorials](https://www.basicjoomla.com/) 2019.11.13 | [@basicjoomla](https://twitter.com/basicjoomla) [YouTube](https://www.youtube.com/watch?v=_QjuGhCxQkY)

## Joomla before version 3.7

Near perfection... | Musical analogy:

<iframe src="https://open.spotify.com/embed/track/4GRDiNU8fkizXz4rDX9gS5" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

## Then Joomla 3.7 came in April 2017

OMG ! 3.7 shipped with **Custom Fields**. Joomla rocks !!!

<iframe src="https://open.spotify.com/embed/track/6p5MrYPnXtvb9DHOscgFlL" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

## Giving that feeling

![roller coaster](https://media.giphy.com/media/RgDfUOzEwATiE/giphy.gif)

## Custom Fields

How far can we go ?

A few examples to get inspiration

<small>
NB: Want to read the long version ? In the April 2018 issue of Joomla Community Magazine, I published an article about "how far can we go with Joomla and Custom Fields":<br />
https://magazine.joomla.org/item/3326-how-far-can-we-go-with-joomla-and-custom-fields
</small>

### Custom Fields make Joomla so powerful

Custom Fields make Joomla so powerful and it is so easy.

And above all: it is part of **core**, meaning
- it is stable/robust/...
- it is free and you do not depend on third-party
- it can be used for basically everything:
  - Articles, Contacts, Users
  - Even third-party extensions if they have integrated the option

### Many different types of Custom Fields

16 types natively, ie readily available in Joomla Core

**Calendar** Field ● Checkboxes Field ● Color Field ● **Editor** Field ● Usergroup Field ● List Field ● List of Images Field ● Textarea Field ● **Text** Field ● Media Field ● **Integer** Field ● Radio Field ● Sql Field ● **Url** Field ● User Field ● Repeatable Field (will be improved in J!4)

###
![allfields](%URL%.images/allfields.jpg)

### You want more ?

Many other Custom Fields have already been developed

Even more are coming

Examples: YouTube, Related Article, Map, ...

A new Category in the Joomla Extension Directory dedicated to Custom Fields: https://extensions.joomla.org/category/authoring-a-content/custom-fields/

And even more are available<br />(see next edition of [Joomla Community Magazine](https://magazine.joomla.org))

### Need your own Custom Field ?

Custom Fields are simple "plugins" (in the Joomla sense).

So it is very (very) light to develop.

(like duplicate another one, edit a few lines of code and that's it)

### Many usecases

Can be used in various contexts:

####

![usecases](%URL%.images/usecases.jpg)

## Examples

6 practical examples of Joomla websites using Custom Fields

### Directory of persons

https://www.bbpo-fbpo.be/nl/organizer-zoeken

For each person (member):
- picture
- phone number
- position
- name of company
- logo
- ...

Same layout automatically for all persons.

####
![example1](%URL%.images/example1.png)

#### Example of override - Article View
```php
	<div itemprop="articleBody">
		<?php // <<< override WOLUWEB >>> at first there was only "echo $this->item->text;" in "articleBody" ?>
		<div class="row">
			<div class="col-md-3">
				<div class="well">
					<div class="members-picture"><?php echo $this->item->jcfields[1]->value; ?></div>
					<div class="members-lang"><?php echo $this->item->jcfields[8]->value; ?></div>
					<div class="members-membership"><?php echo $this->item->jcfields[6]->value; ?></div>
					<div class="members-membership"><?php echo $this->item->jcfields[7]->value; ?></div>
				</div>
				<div class="well">
					<div class="members-logo"><?php echo $this->item->jcfields[9]->value; ?></div>
					<div class="members-cy"><h4><?php echo $this->item->jcfields[10]->value; ?></h4></div>
					<ul class="fa-ul">
						<?php if (!empty($this->item->jcfields[14]->value)): ?>
							<li><div class="members-address"><em class="fa fa-li fa-map-marker"></em> <?php echo $this->item->jcfields[14]->value; ?></div></li>
						<?php  endif; ?>
						<?php if (!empty($this->item->jcfields[11]->value)): ?>
							<li><div class="members-tel"><em class="fa fa-li fa-phone"></em> <?php echo $this->item->jcfields[11]->value; ?></div></li>
						<?php  endif; ?>
						<?php if (!empty($this->item->jcfields[12]->value)): ?>
							<li><div class="members-email"><em class="fa fa-li fa-envelope"></em> <?php echo $this->item->jcfields[12]->value; ?></div></li>
						<?php  endif; ?>
						<?php if (!empty($this->item->jcfields[13]->value)): ?>
							<li><div class="members-web"><em class="fa fa-li fa-globe"></em> <?php echo $this->item->jcfields[13]->value; ?></div></li>
						<?php  endif; ?>
					</ul>
				</div>
			</div>			
			<div class="col-md-9">
				<?php echo $this->item->text; ?>
			</div>
		</div>
	</div>
```
Note: the template uses Bootstrap3 (cfr the "col-md-3" etc)

####
![example1](%URL%.images/example1b.png)

#### Example of third-party Extension

<small>[Articles Anywhere](https://www.regularlabs.com/extensions/articlesanywhere/tutorial) by RegularLabs for the ["table view" of the members](https://www.bbpo-fbpo.be/fr/trouver-un-professionnel-de-l-organisation)</small>

```html
<div class="table-responsive">
  <table class="table middle table-striped table-condensed">
	<thead>
		<tr>
			<th style="width: 10%;"></th>
         	<th style="width: 20%;"><i class="fa fa-user"></i> Nom</th>
			<th style="width: 20%;"><i class="fa fa-building"></i> Entreprise</th>
			<th style="width: 20%;"><i class="fa fa-flag"></i> Langues</th>
			<th style="width: 10%;"></th>
		</tr>
	</thead>
	<tbody>
      {articles category="14" ordering="ordering ASC"}
		<tr>
			<td>[link][picture][/link]</td>
            <td>[link][title][/link]</td>
			<td>[link][company-name][/link]</td>
			<td>[languages]</td>
			<td>[link]<span class="btn btn-xs btn-primary">Lire la suite</span>[/link]</td>
		</tr>
	  {/articles}
    </tbody>
  </table>
```

### Film Festivals

https://www.moisdudoc.be/demandez-le-programme

Details of a film:
- gallery
- video
- synopsis
- ...
- sessions
 - hour
 - venue
 - price
 - ...

####
![example2](%URL%.images/example2.png)

### Knowledge Base

https://clear-my-cache.com

On every page, tabs on the right with
- Gallery
- Video
- Text
- Image

####
![example3](%URL%.images/example3.png)

### Products Catalog

https://www.axmo.fr

Each product has many Custom Fields
- Images
- Text
- ...

####
![example4](%URL%.images/example4.png)

### Play with colors !

http://www.greendog.fr/experimentations

Custom Fields are not only about content: here, a different Color for each article

####
![example5](%URL%.images/example5.png)

### Event Website

https://www.joomladay.fr/2019/programme

On each Session page
- all details (pitch, time, ...)
- but also
 - link to Speaker page
 - link to Room page

Interesting thing: the slot is a Custom Field of type List, ie Slot1, Slot2 etc.
That value is not displayed as content... but is inserted as a Class on each Session.
Given the fact that the timetable is a table made with CSS Grid, the Session will position itself automatically in the right cell !

####
![example6a](%URL%.images/example6a.png)

####
![example6b](%URL%.images/example6b.png)

## Behind the scene

Let's see the backend

### Flexible and easy to setup

Each Custom Field can be assigned
- either to all Articles
- either only to certain (Categories) of Articles

All Custom Fields can also be grouped so that they will appear on distinct Tabs when editing Articles, Contacts etc

### Example for joomladay.fr

Custom Fields for a Session (on 2 dedicated tabs)
- slot, link PDF, video, text, …
- link to Speaker / Room

Custom Fields for a Speaker (2 other dedicated tabs):
- pitch, ...
- social links (Facebook, Twitter, Github, ...)

####

![backend1](%URL%.images/backend1.png)

####

![backend2](%URL%.images/backend2.png)

## Thank you, Allon !

Before ending, big round of applause for Allon Moritz (CH)

![Allon](%URL%.images/allon_moritz.jpg "150x150")

He is the author of Custom Fields (previously one of his extensions: DP Fields) and gave it for free to the Joomla Project. **Tweet him now**

```php
Thank You @laoneo for #Joomla #CustomFields !
```

## Useful links

Already available in Joomla Community Magazine:
- [Custom Fields – Episode 1: How far can we go with Joomla! and Custom Fields?](https://magazine.joomla.org/all-issues/march-2018/how-far-can-we-go-with-joomla-and-custom-fields)
- [Custom Fields - Episode 2: how to manage your Custom Fields](https://magazine.joomla.org/all-issues/may-2018/custom-fields-episode-2-how-to-manage-your-custom-fields)
- [Custom Fields - Episode 3: all the parameters one can wish for](https://magazine.joomla.org/all-issues/october-2018/custom-fields-episode-3-all-the-parameters-one-can-wish-for)

Coming soon in Joomla Community Magazine (waiting for relaunch):
- Custom Fields - special issue 1 - list of resources
- Custom Fields - special issue 2 - more plugins and extensions

[old version in French](https://cinnk.com/magazine/juillet-2017/960-custom-fields-bonus)

## This is (not) the end

With these 6 examples above we do not pretend to have covered all that can be achieved with Custom Fields.

Our objective here is simply to give a flavour of how powerful and easy Joomla can be when using Custom Fields.

The only limit now... is your imagination!

## Get in touch

<i class="fa fa-desktop"></i> https://slides.woluweb.be

Any suggestion about this presentation ?<br />
Please feel free to contact me. I'll be happy to keep improving it:)

<i class="fa fa-user"></i> <i class="fa fa-facebook"></i> [Marc Dechèvre](https://www.facebook.com/marc.dechevre) | <i class="fa fa-skype" aria-hidden="true"></i> <i class="fa fa-twitter"></i> [woluweb](https://twitter.com/woluweb)<br />
<i class="fa fa-mobile"></i> <i class="fa fa-whatsapp"></i> +32 474 37 13 12 | <i class="fa fa-phone"></i> +32 2 772 58 69

<i class="fa fa-send"></i> https://www.woluweb.be/contact

https://www.slideshare.net/woluweb