pigallery2/frontend/app/ui/settings/thumbnail/thumbanil.settings.component.html

<form #settingsForm="ngForm" class="form-horizontal">
  <div class="card mb-4">
    <h5 class="card-header" i18n>
      <ng-container i18n>Thumbnail settings</ng-container><ng-container *ngIf="changed">*</ng-container>
    </h5>
    <div class="card-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
      <div [hidden]="settings.server.processingLibrary!=ThumbnailProcessingLib.Jimp"
           class="alert alert-warning"
           role="alert" i18n>It is highly recommended to use hardware accelerated (sharp or gm) lib for thumbnail
        generation
      </div>

      <fieldset>
        <div class="form-group row">
          <label class="col-md-2 control-label" for="lib" i18n>Thumbnail generation library</label>
          <div class="col-md-10">
            <select id="lib" class="form-control" [(ngModel)]="settings.server.processingLibrary"
                    name="type" required>
              <option *ngFor="let type of types" [ngValue]="type.key">{{type.value}}
              </option>
            </select>
            <small *ngIf="settings.server.processingLibrary==ThumbnailProcessingLib.sharp"
                   class="form-text text-muted" i18n>Make sure that sharp node module is installed (npm install sharp).
            </small>
            <small *ngIf="settings.server.processingLibrary==ThumbnailProcessingLib.gm"
                   class="form-text text-muted">
              <ng-container i18n>Make sure that gm node module and</ng-container>
              <a
                href="http://www.graphicsmagick.org/" i18n>GraphicsMagick</a>
              <ng-container i18n>are installed (npm install sharp).</ng-container>
            </small>

          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-2 control-label" for="th_folder" i18n>Thumbnail folder</label>
          <div class="col-md-10">
            <input type="text" class="form-control" placeholder="path"
                   id="th_folder"
                   [(ngModel)]="settings.server.folder"
                   name="path" required>
            <small class="form-text text-muted" i18n>Thumbnails will be saved in this folder. Write access is required
            </small>

          </div>
        </div>
        <div class="form-group row" [hidden]="simplifiedMode">
          <label class="col-md-2 control-label" for="quality" i18n>Thumbnail Quality</label>
          <div class="col-md-10">
            <bSwitch
              id="quality"
              class="switch"
              name="enabled"
              [switch-on-color]="'primary'"
              [switch-inverse]="true"
              [switch-off-text]="text.Low"
              [switch-on-text]="text.High"
              [switch-handle-width]="100"
              [switch-label-width]="20"
              [(ngModel)]="settings.server.qualityPriority">
            </bSwitch>
            <small class="form-text text-muted" i18n>High quality may be slow. Especially with Jimp.</small>

          </div>
        </div>

        <div class="form-group row" [hidden]="simplifiedMode">
          <label class="col-md-2 control-label" for="icon">Icon size</label>
          <div class="col-md-10">
            <input type="number" class="form-control" placeholder="30"
                   id="icon"
                   [(ngModel)]="settings.client.iconSize"
                   min="1"
                   max="100"
                   step="1"
                   name="icon" required>
            <small class="form-text text-muted" i18n>Icon size (used on maps)</small>

          </div>
        </div>

        <div class="form-group row" [hidden]="simplifiedMode">
          <label class="col-md-2 control-label" for="thumbnailSizes" i18n>Thumbnail sizes</label>
          <div class="col-md-10">
            <input type="text" class="form-control" placeholder="200; 400"
                   id="thumbnailSizes"
                   [(ngModel)]="ThumbnailSizes"
                   name="thumbnailSizes" required>
            <small class="form-text text-muted">
              <ng-container i18n>Size of the thumbnails.</ng-container><br/>
              <ng-container i18n>The best matching size will be generated. (More size gives better quality, but use storage to store and CPU to render.)</ng-container><br/>
              <ng-container
                i18n>';' separated integers. If size is 200, that thumbnail will have 200^2 pixels.</ng-container>
            </small>

          </div>
        </div>
      </fieldset>

      <button class="btn btn-success float-right"
              [disabled]="!settingsForm.form.valid || !changed || inProgress"
              (click)="save()" i18n>Save
      </button>
      <button class="btn btn-secondary float-right"
              [disabled]=" !changed || inProgress"
              (click)="reset()" i18n>Reset
      </button>
    </div>
  </div>


</form>