#17

Product support

Visit this product's website for support.

Categories

  • Marketing

Create and manage portfolios, or can be used for feature showcases, marketing your products and/or services using useful fields. Useful for portfolio items and business services.

Creating items

This is a very simple plugin, after installation you should see a Showcase link appear in your menu. Click this to create new items and view existing items. Categories can also be managed by clicking Manage categories.

Included fields

The fields included for each showcase item are:

Field Description
hero_image single impactful image
images multiple images related to the item
title name or title for the item
slug URL code for the item
tagline short one-liner description
description long elaborated description
content longer rich text (WYSIWYG) area
name contact person's name
avatar photo or avatar for the person
company business or company name
logo branding logo for the company
quote short quote or testimonial about the item
website website URL address
meta_title SEO title
meta_description SEO description
completed_at date the item was completed

Note: All fields are optional and you are free to use as many or as little as you want!

Implementing front-end pages

The plugin provides several components for building the item list page, category page, item details page and category list for the sidebar.

Item list page

Use the showcaseItems component to display a list of latest showcase items on a page. The component has the following properties:

  • pageNumber - this value is used to determine what page the user is on, it should be a routing parameter for the default markup. The default value is {{ :page }} to obtain the value from the route parameter :page.
  • categoryFilter - a category slug or URL parameter (:slug) to filter the items by. If left blank, all items are displayed.
  • itemsPerPage - how many items to display on a single page (the pagination is supported automatically). The default value is 10.
  • noItemsMessage - message to display in the empty item list.
  • sortOrder - the column name and direction used for the sort order of the items. The default value is sort_order asc.
  • categoryPage - path to the category page. The default value is showcase/category - it matches the pages/showcase/category.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase categories.
  • itemPage - path to the item details page. The default value is showcase/item - it matches the pages/showcase/item.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase items.

The showcaseItems component injects the following variables to the page where it's used:

  • items - a list of showcase items loaded from the database.
  • itemPage - contains the value of the itemPage component's property.
  • category - the showcase category object loaded from the database. If the category is not found, the variable value is null.
  • categoryPage - contains the value of the categoryPage component's property.
  • noItemsMessage - contains the value of the noItemsMessage component's property.

The component supports pagination and reads the current page index from the :page URL parameter. The next example shows the basic component usage on the showcase home page:

title = "Showcase"
url = "/showcase/:page?"

[showcaseItems]
itemsPerPage = "5"
==
{% component 'showcaseItems' %}

The next example shows the basic component usage with the category filter:

title = "Showcase Category"
url = "/showcase/category/:slug/:page?"

[showcaseItems]
categoryFilter = "{{ :slug }}"
==
function onEnd()
{
    // Optional - set the page title to the category name
    if ($this['category'])
        $this->page->title = $this['category']->name;
}
==
{% if not category %}
    <h2>Category not found</h2>
{% else %}
    <h2>{{ category.name }}</h2>

    {% component 'showcaseItems' %}
{% endif %}

The item list and the pagination are coded in the default component partial plugins/responsiv/showcase/components/items/default.htm. If the default markup is not suitable for your website, feel free to copy it from the default partial and replace the {% component %} call in the example above with the partial contents.

Item page

Use the showcaseItem component to display a showcase item on a page. The component has the following properties:

  • slug - the value used for looking up the item by its slug. The default value is {{ :slug }} to obtain the value from the route parameter :slug.
  • categoryPage - path to the category page. The default value is showcase/category - it matches the pages/showcase/category.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase categories.

The component injects the following variables to the page where it's used:

  • item - the showcase item object loaded from the database. If the item is not found, the variable value is null.

The next example shows the basic component usage on the showcase page:

title = "Showcase Item"
url = "/showcase/item/:slug"

[showcaseItem]
==
<?php
function onEnd()
{
    // Optional - set the page title to the item title
    if (isset($this['showcaseItem']))
        $this->page->title = $this['showcaseItem']->title;
}
?>
==
{% if not showcaseItem %}
    <h2>Item not found</h2>
{% else %}
    <h2>{{ item.title }}</h2>

    {% component 'showcaseItem' %}
{% endif %}

The item details is coded in the default component partial plugins/responsiv/showcase/components/item/default.htm.

Category list

Use the showcaseCategories component to display a list of showcase item categories with links. The component has the following properties:

  • slug - the value used for looking up the current category by its slug. The default value is {{ :slug }} to obtain the value from the route parameter :slug.
  • displayEmpty - determines if empty categories should be displayed. The default value is false.
  • categoryPage - path to the category page. The default value is showcase/category - it matches the pages/showcase/category.htm file in the theme directory. This property is used in the default component partial for creating links to the showcase categories.

The component injects the following variables to the page where it's used:

  • categoryPage - contains the value of the categoryPage component's property.
  • categories - a list of showcase categories loaded from the database.
  • currentCategorySlug - slug of the current category. This property is used for marking the current category in the category list.

The component can be used on any page. The next example shows the basic component usage on the showcase home page:

title = "Showcase"
url = "/showcase/:page?"

[showcaseCategories]
==
...
<div class="sidebar">
    {% component 'showcaseCategories' %}
</div>
...

The category list is coded in the default component partial plugins/responsiv/showcase/components/categories/default.htm.

  • Found the plugin useful on 10 May, 2015

    Hey ! Nice plugin, could you update it so that if you don't have anything on a field it won't show the field ? The blockquote is especially anoying haha !

    Nice plugin anyway :)

1.0.5

Add detailed icon to navigation.

Jul 04, 2016

1.0.4

Update item reorder page to new system reordering feature.

Jul 04, 2016

1.0.3

Added support for multilingual fields, compatible with RainLab.Translate.

May 15, 2015

1.0.2

Fixes bug where Showcase menu item is hidden even with correct permissions.

May 15, 2015

1.0.1

First version of Showcase

Feb 27, 2015