Hippo

The Maven pom.xml

If you want to use this plugin in your CMS 7 document type, you will need to make sure that you add this plugin as a dependency to your CMS project descriptor (pom.xml). An example is given below.

<dependencies>
  <dependency>
    <groupId>org.onehippo.addon.frontend.gallerypicker</groupId>
    <artifactId>gallerypicker</artifactId>
    <version>1.01.10</version>
  </dependency>
  </dependencies>

Adding the field definition for your document type

After adding the dependency, there are two ways of adding the plugin to your project.

1. Adding it to a running system through the CMS console
2. Adding it to the 'content' jar of your project.

Both options work in a similar way. Here I will describe how to add it to a running system, but you can find the same configuration described below in your projects 'content' jar.
First let's start the CMS and Repository with the maven jetty run plugin.

Once the CMS is started, you can add the imagepicker to your template through the CMS console. First you will need to find the 'document type' which will get the gallery picker.

If you created your own namespace called 'myproject' (might be different in your case), you should be able to find your document types through the console in the following location: /hippo:namespaces/myproject.

Let's say we have a document type called 'textpage'. The actual configuration for this document type can then be found at: /hippo:namespaces/myproject/textpage

The first thing which will need to do is add the actual field to the nodetype definition, which can be found at: /hippo:namespaces/myproject/textpage/hippo:nodetype/hippo:nodetype. Manually add a new field or copy paste the following configuration into an XML file and use the 'Import Node' button from the CMS console to add the field to the nodetype.

<?xml version="1.0" encoding="UTF-8"?>
<sv:node sv:name="hippo:field" xmlns:sv="http://www.jcp.org/jcr/sv/1.0">
  <sv:property sv:name="jcr:primaryType" sv:type="Name">
    <sv:value>hippo:field</sv:value>
  </sv:property>
  <sv:property sv:name="hippo:name" sv:type="String">
    <sv:value>image</sv:value>
  </sv:property>
  <sv:property sv:name="hippo:path" sv:type="String">
    <sv:value>myproject:image</sv:value>
  </sv:property>
  <sv:property sv:name="hippo:type" sv:type="String">
    <sv:value>hippogallery:imagelink</sv:value>
  </sv:property>
</sv:node>
                                
              

Adding the template definition for your document type

Once you added the field to your document type, you will need to add the template part for your document type to be able to use the plugin. You should be able to add the template definition for this field by adding the following configuration to: /hippo:namespaces/myproject/textpage/hippo:template/hippo:template

<?xml version="1.0" encoding="UTF-8"?>
<sv:node sv:name="image" xmlns:sv="http://www.jcp.org/jcr/sv/1.0">
  <sv:property sv:name="jcr:primaryType" sv:type="Name">
    <sv:value>frontend:plugin</sv:value>
  </sv:property>
  <sv:property sv:name="caption" sv:type="String">
    <sv:value>Image</sv:value>
  </sv:property>
  <sv:property sv:name="engine" sv:type="String">
    <sv:value>${engine}</sv:value>
  </sv:property>
  <sv:property sv:name="field" sv:type="String">
    <sv:value>image</sv:value>
  </sv:property>
  <sv:property sv:name="mode" sv:type="String">
    <sv:value>${mode}</sv:value>
  </sv:property>
  <sv:property sv:name="plugin.class" sv:type="String">
    <sv:value>org.hippoecm.frontend.editor.plugins.field.NodeFieldPlugin</sv:value>
  </sv:property>
  <sv:property sv:name="wicket.id" sv:type="String">
    <sv:value>${cluster.id}.field</sv:value>
  </sv:property>
  <sv:property sv:name="wicket.model" sv:type="String">
    <sv:value>${wicket.model}</sv:value>
  </sv:property>
</sv:node>

If you look closely, you will notice that the 'hippo:name' property of the field is equal to the 'field' property of the template part of your plugin.

Now everything should be setup correctly.

If all is well, you should now have an extra field in your template. Below you can find a screenshot of what it should look like.