Imageshop.Optimizely.Plugin 1.0.34

Imageshop.Optimizely.Plugin

Imageshop is an online-based Digital Asset Management (DAM) software. This module integrates Imageshop in the Optimizely 12 CMS User Interface. It contains a custom property and a TinyMCE plugin that launches the Imageshop image selection interface in a dialogue.

How to get started - Installation

Summary

The installation process currently requires some manual work. We are working to improve this process.

1. Installing Nuget Package:

Start by installing NuGet package (use Nuget.org feed)

Install-Package Imageshop.Optimizely.Plugin

Files needed for the project will be copied from the nuget package once the project is built. If files already exists, they will be overwritten on each build, except for the view files: ImageshopImage.cshtml and ImageshopVideo.cshtml. If you want the newest versions of these files, delete these two and rebuild the project.

2. Adding two lines to your Startup.cs:

Add the following lines to your startup.cs file.

First line to be added at the top (before the CMS is added):

services.AddImageShopRegistration()

Second line can be added later on:

services.AddImageshopTinyMceConfiguration()

3. Add to module.config:

Edit your Module.config file by adding the details from ModifyTheseFiles/module.config. If you don't have a module.config file, copy paste the file into the root directory of your project.

4. Configure access token:

After the package is successfully installed you need to add your access token to configuration section GetaEpiImageshop in your appsettings.json located in root directory:

    "GetaEpiImageshop": {
        "Settings": {
            "token": "<Token here>",
            "interfaceName": "",
            "documentPrefix": "Warning",
            "culture": "nb-NO",
            "profileId": "",
            "showSizeDialog": "true",
            "showCropDialog": "true",
            "freeCrop": "true",
            "initializeTinyMCEPlugin": "true"
        }
    }

Basics

Add an Imageshop image property to your content model:

[BackingType(typeof(PropertyImageshopImage))]
[UIHint(ImageshopSettings.UIHint.ImageshopImage)]
[ImageshopSettings(InterfaceName = "", DocumentPrefix = "", ProfileID = "", Culture = "nb-NO")]
[ImageshopSizePreset("Main image (1280x720)", 1280, 720)]
[ImageshopSizePreset("Thumbnail image (400x300)", 400, 300)]
public virtual ImageshopImage MainImage { get; set; }

Minimal Imageshop image property example:

[BackingType(typeof(PropertyImageshopImage))]
public virtual ImageshopImage MainImage { get; set; }

Render the image property in a view:

@Html.PropertyFor(m => m.CurrentPage.MainImage)

Image collection property:

[Display(Name = "Bilder")]
[BackingType(typeof(PropertyImageshopImageCollection))]
[UIHint(ImageshopSettings.UIHint.ImageshopImageCollection)]
[ImageshopSettings(ProfileID = "CAROUSEL", ShowCropDialog = false, ShowSizeDialog = false)]
public virtual IEnumerable<ImageshopImage> Images { get; set; }

Imageshop video property:

[BackingType(typeof(PropertyImageshopVideo))]
public virtual ImageshopVideo MainVideo { get; set; }

Render the video property in a view:

@Html.PropertyFor(m => m.CurrentPage.MainVideo)

Imageshop video collection property:

[BackingType(typeof(PropertyImageshopVideoCollection))]
[UIHint(ImageshopSettings.UIHint.ImageshopVideoCollection)]
public virtual IEnumerable<ImageshopVideo> Videos { get; set; }

TinyMCE

A TinyMCE plugin is included for browsing Imageshop images to add to your XhtmlString properties. It's located in the "media" group.

Configuration

See configuration section GetaEpiImageshop in appSettings.json for examples.

Screenshots

Changelog