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 category name if ($this->item) { $this->page->title = $this->item->title; } } ?> == {% if not item %} <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
.
-
Youssef Seghir
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 |