Adding images to your Jive instance via a custom theme

    A common requirement for Jive site Administrators and Community Managers is to be able to upload images to the site that can be referenced in theme headers, widgets, and content. If your instance is Hosted with Jive or you do not have direct access to the Jive servers at your company, uploading the images to a static repository may not be an option. And if you have an SSL-enabled site you run the risk of annoying your users with Internet Explorer's infamous mixed content warnings if you try to reference images hosted on non-SSL-enabled sites.

     

    Here's a quick process for making images accessible to your Jive instance with quick updates and no customization:

     

    1. Create a bare-bones custom theme.

    I executed these steps on my Macbook, but you can easily adapt the same steps using your OS of choice.


    First, create a new directory with a name that describes your theme.

    Screen shot 2012-01-31 at 12.53.50 PM.png

    Next add a file named theme.xml to the new directory and populate it with the following content:

    <theme>
      <name>images_theme</name>
      <description>Theme to deploy pics</description>
      <resource-bundle-rules/>
    </theme>
    
    
    

     

    The theme name needs to match the directory that the theme.xml resides in. It is recommended that the name is short, descriptive, and does not contain any spaces or special characters.

     

    Then add an images directory and add your images to this directory:

    Screen shot 2012-01-31 at 12.51.44 PM.png

     

    Finally, zip up the file:

    Screen shot 2012-01-31 at 12.52.05 PM.png

     

    2. Upload the theme to your site.

    There are three distinct ways to copy your theme to your site.


    Method 1: Use the Admin Console (5.0+)

    In Jive 5 we added the ability to upload a theme dynamically from the admin console. This is the quickest and easiest option to get the theme added to your instance. Go to System > Settings > Themes and use the Choose File dialog to select your theme for upload.

    Screen shot 2012-01-31 at 12.52.32 PM.png

    Method 2: Use the Jive Cloud Admin (Hosted customers only)

    If you are a Jive Hosted customer, you may use the Jive Cloud Admin tool to deploy a theme. More information on this tool can be found in the JCA Documentation. Please be aware that deploying a theme using the JCA does require a site restart.

     

    If you do not have access to the JCA, please file a new Support case to request access.

     

    Method 3: Copy the files to the file system

    If neither of the prior options is available, you can always copy the theme directly to the web application nodes. To do this, you will need to unzip the theme in the /usr/local/jive/applications/<sbs>/home/themes/ directory and ensure it is owned by the jive user. This process needs to be repeated on all nodes and will not take effect until the nodes have been restarted. Obviously, this is the least flexible method and is not an option if you don't have direct access to the Jive application servers, but it is good to know just in case you need it.


    Screen shot 2012-01-31 at 12.42.35 PM.png


    3. Reference the images

    Now you're ready to reference the images added to your new theme. If you navigate to http://<jiveurl>/themes/<theme_name>/images/<image_name> you should now see your image. Best practice is to reference the image with a relative link instead of an absolute one, to ensure that the links do not break if the jiveURL changes:

     

    <img src="themes/images_theme/images/powered_by_Jive.png" />

     

    Use these relative links in other themes, formatted text/HTML widgets, and content items. If you maintain a standardized naming structure for the themes and images, you should be able to regularly swap out the image files without ever needing to modify the links in your application.