Imageshop.Optimizely.Plugin 1.1.1

Imageshop.Optimizely.Plugin

Github repository: https://github.com/screentek/Optimizely

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 the Nuget.org feed or the Optimizely feed)

Install-Package Imageshop.Optimizely.Plugin

Note: Files needed for the project will be copied from the nuget package once the project is built. Files will only be copied if they are modified (unchanged files are skipped).

Note: Exception: On build: ImageshopImage.cshtml and ImageshopVideo.cshtml will only be overwritten if their modified dates from the nuget package are newer than the modified dates of these two files in your project. If you wish to keep your own ImageshopImage.cshtml and ImageshopVideo.cshtml files, modify the files before updating the plugin.

Note: Different projects may store view files in different directories, we are working for a solution for this.

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()

If you have problems with routes that causes the client to not load, you can add this to your Configure method, app.UseEndpoints, in startup.cs:

endpoints.MapControllers();

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"
        }
    }

Note: The plugin will first look for settings based on your current environment. If it's set to "Development" it will first look into appSettings.Development.json, if still not found it will look for settings inside appSettings.json (settings for your current environment will override settings in appSettings.json). The settings file can also be called appsettings.json (with a lowercase s).

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

• v1.1.1: Solved bug where the files from the plugin were not being copied over if the EPiServer.Forms.UI package was also installed.
• v1.1.0: Images inserted to TinyMCE now contains additional data. Popup window for TinyMCE no longer automatically closing after a few seconds.
• v1.0.41: Bugfixes: Settings can now be read from appsettings.<environment>.json files with fallback on appsettings.json, In tinymce we have added increased support for linux systems (case sensitivity for files), added additional close button to tinymce popup window, fixed bug where the source of the popup window sometimes was undefined.
• v1.0.40: Bugfixes: Images now display alt-text correctly and added some useful comments on view files for models.
• v1.0.39: Updated plugin to support TinyMCE v5 and newer. Bugfix: Missing images are now included when building your project.
• v1.0.38: ImageshopImage model has now been updated to contain InterfaceList for the selected image.
• v1.0.37: ImageshopImage model has now been updated to contain profiles for the selected image.
• v1.0.36: On install: Files will be copied if modified (date + filesize), viewfiles will be copied if newer modified date (filesize ignored). + Bugfixes