Custom fields are what you use to make a database that is specific to your needs. IPS4 supports a wide range of field types so that you can collect data in the appropriate formats, from text and numbers, to upload fields and YouTube embeds.
We're going to create a few different fields to gather information about each recipe that we can then display in our database. They are:
List of ingredients
Prep time
Cook time
Cuisine
A link to a YouTube video recipe
We don't need fields for the recipe title, or the instructions. Databases already provide a title field, and we'll also use the built-in content field for the recipe instructions.
We'll see how to set up the custom fields, as well as how to customize their appearance.
Ingredients field
1. To create a new field, hover on the Pages tab in the AdminCP, and then click the Fields link under the Recipes database in the menu. The screen will show you the default built-in fields for your database, including Title and Content.
2. Click the Create New button; you'll see a form where you configure your field.
3. For Title, enter "Ingredients". This is the field title users will see when adding/viewing recipes on your site.
4. For Description, enter "One per line". The description is only shown on the add/edit record form, so it's a good place to enter special instructions for filling it in.
5. For the type, we'll choose Editor in this case, because it will allow the user to format the list if they wish. The other fields on the form will change depending on which field type you choose, since each has specific options.
6. We don't require a maximum length, but we do want to require this field to be completed, so leave these settings at their default values.
7. On the Display tab, we'll configure how the field content is shown to users. First, enter ingredients as the field key. This key is how IPS4 identifies this field in templates. We won't actually be using it in this tutorial, but it's good practice to set it anyway so you can use it later if needed.
8. We don't want our list of ingredients to show on the listing screen, so disable that option.
9. We do, however, want it to show on the record display screen, since this is the main screen for viewing a recipe. A badge isn't ideal for showing content from an Editor, so change the Display View Format to the simple Label: Value option as shown:
Display View Format
10. We'll show the list of ingredients above the main record content, so make sure Above the item content is selected for the Display option.
11. Finally, there's no need to allow this field to be updated when viewing a record; instead, users will go to the full edit form. You can leave the Editable when viewing a record option disabled.
12. Save the form to create the field.
Other fields
Other fields
Other fields are created in the same way, so instead of going through the whole process again, here's the configuration options you need for each field. Where a configuration option isn't listed, leave it at its default value.
Note: Some field types, including the Select Box type that Cuisine uses (see below), support a fixed set of options from which the user can choose. You'll set these up as key/value pairs in the AdminCP, but the user will only see the values when they select them. The key is just used internally by IPS4 and in custom templates to identify the value, and is best kept as a single lowercase word.
Prep time Name: Prep Time Type: Text Required: No Template key: prep-time Listing view format: Label: Value Display view format: Label: Value
Cook time Name: Cook Time Type: Text Required: No Template key: cook-time Listing view format: Label: Value Display view format: Label: Value
Cuisine Name: Cuisine Type: Select Box Content: (key/value)
indian / Indian
italian / Italian
american / American
mexican / Mexican
Allow filtering: Yes Required: Yes Template key: cuisine Listing view format: Label: Value Show to right of listing area: Yes Display view format: Label: Value Display: Above the item content
Video recipe Name: Video tutorial Type: YouTube Embed Required: No Template key: video-tutorial Show in listing template: No Show in display template: Yes In a record, display as: Embedded Player
That's it! If you now head over to the front-end page for your database, click into a category, and click the Add New Recipe button, you'll see your fields on the form, ready to collect information! Feel free to add some sample records to try it out.
You'll also see the Record Image field that the database provides automatically (discussed earlier). When you upload an image here, you'll see it is automatically included in the record view for you.
Here's an example recipe in our database:
There are several methods of adding advertisements on your Community both in HTML and as image-based ads. They are placed automatically in areas of your choosing.
Create Ads
Advertisements can be placed on you site in either image or plain HTML in Advertisements in the AdminCP.
You can add a new advertisement by clicking on the "Create new" button shown in the image above. Once you have done this you will be presented with the various options for creating an image. You can either enter HTML code or you can click "Upload Images" in order to upload an ad image.
In the example below, you will see you can chose to enter separate HTML code to appear on secure pages.
Once you have added your image or advertisement code, you can then choose the location and permissions for your advert to be shown. You can select more than one location for an ad to show and criteria for when and how long to show the ad.
When using Google Adsense adverts you may notice that page navigation no longer works as expected. This is caused by Google requiring that adverts are not loaded using AJAX. To resolve this issue you can disable AJAX pagination using the built in theme settings.
Ajax Pagination
Should you wish to disable an advert at any time, you can do this by clicking the "Enabled" text in the list, which will then change to "Disabled"
Disable/Enable
Manual Ad Placement
You can put advertisements in several pre-defined locations but it is also possible to create additional locations which you can insert by modifying the HTML code for your community or use in the Pages application.
First, create your advertisement as normal. For the "Show the advertisement" setting, select "Define your own location" and enter a key into the box (it can be whatever you like). You can then later use the same key for other advertisements that you want to show in this location.
Now you will need to insert a special tag in the HTML code where you want the advertisement to show. The code to insert is:
{advertisement="KEY"}
Replace "KEY" with whatever key you used.
In your theme
Go to Themes and click the "Edit HTML and CSS" button for your default theme. The specific template you need to edit and where to make the change depends on where you want the advertisement to show. For this example, if you wanted the advertisement to show in the profile under the header, go to the core -> front -> profile -> profileHeader template and insert the code at the very bottom.
Since each theme has its own HTML templates, you will now need to repeat this for each theme.
In pages or blocks
The tag can be inserted in a page, block or template within the Pages application. Simply insert the tag wherever you want the advertisement to show.
Control when Ads Show
Using the responsive CSS classes available in IPS4, it is possible to set your ads up so that different content displays depending on the device size.
This only applies to ads you create yourself. If you use an ad service (such as Google Adsense), you should find out how that service supports responsive ads.
For example:
<div class='ipsResponsive_showDesktop ipsResponsive_showTablet ipsResponsive_block'>
This ad shows on desktop and tablets, but *not* phones
</div>
<div class='ipsResponsive_showPhone ipsResponsive_block'>
This ad shows on phones, but *not* desktop and tablets
</div>
Ads in email
Introducts in version 4.4 of the Invision Community platform, is the ability to show your ads within your community emails, as well as on your site. Within the same email section, you will see an Email Advertisements tab, where you can ad advertisements which will only show within emails.
Ads within Emails can be restricted to only show within specific email types. As you can see in the image below, I have changed this ad only to be sent when the email is from a Topic, such as a topic reply notification.