Adding Content

From VYRE

Jump to: navigation, search
Adding Content
Unify Tutorial
Unify Tutorial Series
Series Beginner
Unify Tutorial - Adding Content
Position in series 4
Next in Series Tagging With Taxonomy
Previous in Series Introducing Users and Permissions
Prerequisites Building a Basic Site
Introducing Users and Permissions


Contents

Adding Content

Objective

In this chapter, we’re going to expand on our news data by adding more specific attributes, we’ll also create another content store to hold images and create a relationship between the two stores to represent the images for news articles. Finally we’ll look at creating saved searches to define dynamic data sets.


Adding Custom News Attributes

Currently in our news data store we are only using the default name and description fields which aren't really suitable for storing real news content. So in this section we’re going to look at adding custom attributes that are more specific to news articles such as headline, body and publish date. Custom attributes may be added to both Data and File stores. Unify offers two separate areas to add custom attributes known as Content and Metadata.

Content is defined as data that constitutes the entity being desribed. In data stores this would be textual content such as the name of a hotel or the headline of a news article. In file stores the content is the binary file such as an image or video clip.

Metadata is defined as data that can be regarded as information about the entity, such as a publish date or a status flag and is applicable for both data and file stores.

  1. Open the Content module and select the News Article data store.
  2. From the top navigation, select Edit. You will be presented with the edit form for this store.
  3. Hover over the Edit... menu and select Content Structure.
  4. Now we’re going to create two content attributes: headline and body to better represent our news data.

  5. To create our headline attribute, click the 'Add Attribute' green plus icon and give it a suitable name and description.
  6. For a news headline we want to use the short text attribute type. This will give us an HTML input box when used in a form and will hold a maximum of 255 characters. There is no type checking – ie you can add any legal UTF-8 character.
  7. For a full list of Attribute types see Attribute type

  8. Set this attribute to have a cardinality of "exactly one" as it wouldn’t make any sense for a news article not to have a headline.
  9. For the XML name, use "headline". This will be the node name when this news article is rendered in XML.
  10. Save
  11. Return to the Content structure list by clicking the "Content structure" link in the crumb trail at the top of the page.
  12. Create a new attribute using the same method for the body, but instead of using short text as the attribute type, use long text. This will print an HTML textarea when used in a form and will be suitable for large amounts of text.



News based sites often have some element of work flow, so that items can be created as a draft and not published until they are signed off by some other user. To implement this, we will create an attribute presentation rule which defines a set of possible options, usually as an HTML select box, to be used in an attribute or attributes. We’ll then create an attribute and set it to use our attribute presentation rule. So to create the attribute presentation rule:

  1. Open the Content module, expand the Settings menu and select Attribute Presentation Rules. You’ll be presented with a list of the default presentation rules.
  2. Click "Create" to create a new rule.
  3. This presentation rule will be used to display the status of a news article: either published or draft. Give it a suitable name and description and click Save.
  4. There is now a large textarea for Parameters into which you add a list of name value pairs, with an entry per line. The syntax for this is: name;value where name will be the text presented to the user, and value will be that which is saved.
  5. Our rule is going to contain two options: Published and Draft so enter the following as parameters and save.


Published;published
Draft;draft


Now to create the News Status attribute:

  1. Edit the News Data store in the same fashion as above and from the "Edit..." menu select Metadata Structure.
  2. Create the attribute in the usual way, setting the attribute type as "Short Text", the cardinality to exactly one, the XML name as status and save.
  3. Now in the Presentation Rule select box choose the newly created Attribute Presentation Rule and save.


Now we’ve created a better structure for our news data, we need to modify both our edit, list and display pages to handle these new attributes.

  1. First, go back to the news create page and edit the Item Edit using template portlet. You will need to add in vyre-item:attribute tags for the new fields (see content templates)
  2. Once you've added all of these, save the template and view the page. Note how the Status attribute only offers the options created in the Attribute Presentation Rule.

  3. Login to the front end as the Web Admin user and edit your news items, adding a headline, body and status flag.
  4. Next we need to modify the XSLs of our list and view pages to display the new content.

  5. Open the public home page and open up the advanced search result portlet to edit the XSL and follow the instructions below:

Open the XSL being used in this portlet and make the following modifications to output the headline attribute appropriately and the first 50 characters of the body text. Don’t output the status attribute here as this is the public listing.

These are the things you’ll need to do:

  1. Change the XPath expression which are currently outputting the name and description fields to output the headline and body instead.
  2. Set the body so it only outputs the first 50 characters of text. To output only a part of an XML node, use the following substring function:
<xsl:value-of select = "substring(string, start_index, end_index)"/>

See W3Schools for more information on XSL functions. When creating the XPath expressions, check what node the template you are working in is matching. XPath expressions are relative to that node. Remember, the XML can be inspected by editing the portlet and selecting the XML mode.

  1. Now modify the Public news detail and the admin news list XSLs to use our new attributes.
  2. Deploy all changes and view them in the front end.

Adding Images and linking

In this section we’re going to create a way of linking images to news articles and display them on the public site. First we’re going to want to create a new File Store to hold the images.

  1. From the content module, click the File Stores link and click Create New from the top contextual navigation.
  2. Complete the form by giving it an appropriate name and description and English as the primary language.

Next we need to create a link definition between our two stores.

  1. Select and edit the images file store.
  2. From the edit menu, select "Link Definitions"
  3. Click Create
  4. Select the News Articles store to link to, fill in the names and description and save


Uploading and importing images into our image store

We now need to add some images to work with.

  1. From within the content module, select Upload Files.
  2. Click the add file Image:File_add.png icon to start the JUpload applet which allows uploading to the server.
  3. When the applet has loaded, click the Add Files button, browse to the tutorial folder and select some of the images in the images folder.
  4. Click the Upload Files button to begin uploading.
  5. Unify will now upload the files to a personal storage area for the current user. To get them into the Images store we now need import them.

  6. Select the green plus Image:Add.png icon for one of the images
  7. In the top select box, select the store we want to import into and click Save.
  8. Complete the form giving a suitable name and description and save.
  9. The item has now been created but as explained in the orange alert box, it is currently checked out and inactive. Unify uses the concept of active and inactive items to control workflow. For more information see Item workflow

  10. From the "Edit..." menu, select Check In, and then select "Activate this version"
  11. Repeat these steps for the rest of the images

Marchena should now start generating thumbnails and previews for the uploaded images. If you load the News Images store, each image will have a "No Thumbnail Available" if Marchena hasn’t processed the image; or a thumbnail of the image if it has.

Linking items

Now that we’ve got our images in the system, we want to create a way for admin users to be able to link the images to news articles. To do this we’re going to modify our item edit portlet on the news create / edit page to allow linking.

  1. Navigate to the news edit page and edit the Item Edit portlet
  2. Select the Item Links menu at the bottom and click the add Image:Add.gif icon for your item link.
  3. At the bottom of the page under "Available display attributes" double click the "Name" element to move it into the "Selected display attributes" window and save. This defines what attribute from the Images store will be used to identify the image to link to.
  4. Move the newly added Item Link section upwards so it’s above the submit button, save and view your changes.

You should now be able to create news items and link them to images in the system.

  • Deploy your changes, log in to the front end and edit some of your news articles so that they are linked to an image.



Displaying the linked items

The next task is to modify our news list and display pages to show the associated image.

  1. Navigate to the public news list page and edit the Search Results portlet. As with the lightweight search in the Search Results portlet, we have to enable the portlets to return linked data. Doing so requires the server to do more work so should only be enabled when needed.
  2. Tick the "Retrieve linked items" checkbox and save.

We now need to modify our display XSL to output the linked image. Here is a snippet of the link XML.

With links enabled, there is now an <item-links> node which is a child of the <data-item> node. This then has one - many <item-link> nodes, each defining a particular link definition. The <item-link> node then has metadata about the link definition, and a child node called <items> which holds one - many <item> nodes each representing a linked item.


All file items contain nodes which contain URLs to access the item data. The <original-file> node gives access to the original file and the <derived-files> node contains child nodes to access the file transformations generated by the system. By default the system executes two transformations, a preview which is 450 x 450 pixels and a smaller thumbnail which is 150 x 150 pixels.

Modify the public news list XSL and make the following changes:

  1. From within the template that matches data-item, add the following line under <div> with class "module".
  2. <xsl:apply-templates select = "item-links/item-link[@id = x]/items/item"/>
  3. Note the predicate [@id = x]. Often an item is linked across multiple link definitions. This forces the traversal of only the link definition with id = x. Replace x with the id of your link definition
  4. Next, create a new template that matches the <item> node and within that template add the following line that will output the preview version of the file.
  5. <img src = "{derived-files/thumbnail}"/>

    Note the use of the {} notation. This is used to output a node value when used within HTML tags.

  6. Finally, wrap the <img> tag with an <a> tag which links to the news detail page, so the image is clickable.
  7. Now repeat this for the News Detail XSL, outputting the image under the <div> with a class of "articlecontent", but change the XPath so instead of displaying the thumbnail it displays the preview.

Defining Data Sets with Saved Searches

Currently, our list pages are listing all items from the news store. Whilst this was satisfactory before, we now have a status flag defining whether our news is published or draft and we don’t want the general public to see draft news items. To prevent this, we can create a saved search which defines a specific set of data depending on attribute values and other criteria. We can then apply this saved search to a search results portlet.

Creating a saved search

This saved search is going return only published news articles.

  1. Open the Content module and select the News store.
  2. On the right hand side select the advanced tab. This will now display form fields for entering dates and links for attributes.
  3. Expand the Metadata folder and select the Status attribute. In the input box below, type "published".
  4. Then, in the top left of the the window, click the Search button which will perform your search and display only the published articles.
  5. If you’re satisfied that the data set is correct, click the "Save this search" button and complete the form giving a suitable name and description.
  6. You’ll notice that the saved search displays a query which should look similar to the following:

    +active:true +(att32:published)

    This is Lucene query syntax and translates to:

    "All items which are active and have the value "published" for attribute 32"

    Now the saved search has been created we can apply it to the search result portlet.

  7. Navigate to the home page listing the news items and edit the Search Results portlet.
  8. In the "Search mode" section, change the search mode to "Use a saved search" and select your newly created saved search and save. The portlet should now only list published items.
  9. Deploy your changes and using the front end, test changing the status of your news articles and note how the items listed on the home page change.


Searching with the Search Portlet ************UPDATE TO SEARCH TEMPLATE PORTLET ****************

We’ve seen how Saved Searches can be used to display predefined sets of data. Now we’re going to see how to offer the user the ability to manually search within a data set. To do this we’re going to use the search portlet.

  1. Open the publishing module and navigate to the admin news listing page
  2. Click the dark blue portlet bar and add an Item - Search Portlet which is in the Content portlets group.
  3. As this search portlet is going to reside on the same page as the search results, leave the redirect field blank.
  4. We only want to search the news article store so set the Search mode to "Search single store" and select the News Article store.
  5. Expand the General group, select "Default search input" and save. The default search input prints an HTML input field, allows searching across all attributes in the chosen store.
  6. Next, expand the Metadata Attributes group; select the Status field and save. As we have defined the attribute presentation rule for this attribute, the Search portlet will display an HTML select box with our values as options.
  7. From the General group, add a Submit button and save.
  8. Save and view the portlet
  9. The last thing we need to do before this will work is modify the Search Results portlet to listen to the search portlet. To do this, open the Search Results portlet and change the search mode to "Use incoming search query" and save. Using this mode, the search results portlet won't display any information until you perform a search. It would probably be better if we could display all the items and then further reduce this with the Search portlet. To enable this, complete the following steps:

  10. Using the same method as above, create a saved search that returns all active items. This can be done by loading the News Article store and clicking "Save this search" without having first defined the search.
  11. The Lucene query should just be: +active:true

  12. Configure the search results portlet to use this saved search and tick the check box "Use incoming search parameters" and save.

Summary

This tutorial focused on content structure and file items.

Personal tools