Skip to main content

Showcase / Portfolio (showcase)

This extension provides a showcase/portfolio with categorized projects and various layout options. Each project contains a title, a teaser, a main text, and any number of links and media files like images, videos or audio. This can be used to create portfolios for a freelancer or an advertising agency, for example.

Features

  • Project list or grid with Masonry effect
  • Project slider plugin powered by Glide.js
  • Project detail view with Bootstrap Modal window or detail page
  • Supports different layouts for project records, or one layout for all
  • Works fine as a simple gallery
  • Projects can be categorized
  • Projects have various fields and media options
  • Displays an optional category menu to sort the project list
  • Works seamlessly with the Bootstrap Package for TYPO3

Note: The extension is based on Bootstrap 4 and was created with the Bootstrap Package for TYPO3. Currently NO CSS for other frameworks or standalone versions is integrated. But this is in progress.

Installation

You can install the extension the classical way via Extension Manager, or use Composer:

composer req simonkoehler/showcase

 

Make sure to include both, Showcase and Showcase: Bootstrap 4 Templates unless you have implemented your own custom HTML templates.

Configure your plugins (List and Detail). See also the section Plugin Configuration.

Plugin Configuration

The extension provides 3 different frontend plugins: List, Details und Slider. Each plugin can be configured via the tab "Plugin", section "Plugin Options". See detailed information about the different plugin settings below:

List Plugin Configuration

Name Title Category Type
recordsource Record Source General string
recordlist Record List General string
recordstorage Record Storage General int
listlayout List Layout General int
teaserlength Teaser Length General string
detailmode Detail Mode General int
detailpage Detail Page General int
columns Columns per row General int
gridlayout Grid Layout General int
previewimagemaxwidth Max width of preview image General int

Details Plugin Configuration

Name Title Category Type
singlerecord Record of single project General int
mediacolumns Media columns per row General int

Readable URLs

From version 1.2.0 showcase has a Default.yaml file that contains a default URL Routing for project detail pages. In order to use this default configuration you have to import it into your site's config.yaml like shown in the code below.

imports:
  - { resource: "EXT:showcase/Configuration/Routes/Default.yaml" }

Note: If you want to use the paramteter "limitToPages", you can add it to the configuration by adding it right after the import command.

imports:
  - { resource: "EXT:showcase/Configuration/Routes/Default.yaml" }
routeEnhancers:
  ProjectDetails:
    limitToPages: [459]

Content of the Default.yaml Routing Configuration

routeEnhancers:
  ProjectDetails:
    type: Extbase
    extension: Showcase
    plugin: Show
    routes:
      - { routePath: '{project_title}', _controller: 'Project::show', _arguments: {'project_title': 'project'} }
    defaultController: 'Project::show'
    defaults:
      page: '0'
    requirements:
      project_title: '[a-zA-Z0-9].*'
    aspects:
      project_title:
        type: PersistedAliasMapper
        tableName: 'tx_showcase_domain_model_project'
        routeFieldName: 'slug'

Demos

Showcase for TYPO3 is up and running right here:

FAQ & Help

When you get the following message in the frontend:

Sorry, the requested view was not found

The technical reason is: No template was found. View could not be resolved for action "show" in class "SIMONKOEHLER\Showcase\Controller\ProjectController".

In this case, you probably didn't include the static TypoScript for your plugin in your root template. You must include both, the TypoScript "Showcase" and "Showcase: Bootstrap 4 Templates". Only when you create your own HTML templates, you can leave the Bootstrap 4 entry unselected and choose your own.