From 199e99160a655e9661856903d33cc1c3304198fa Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 8 Jun 2023 16:40:22 +0200
Subject: [PATCH] Enable alternative text manipulation for image elements
#386
---
.../common/components/media-elements/image.component.ts | 2 +-
projects/common/models/elements/media-elements/image.ts | 2 ++
.../element-model-properties.component.html | 7 +++++++
3 files changed, 10 insertions(+), 1 deletion(-)
diff --git a/projects/common/components/media-elements/image.component.ts b/projects/common/components/media-elements/image.component.ts
index 027af8987..59a9a079f 100644
--- a/projects/common/components/media-elements/image.component.ts
+++ b/projects/common/components/media-elements/image.component.ts
@@ -18,7 +18,7 @@ import { ValueChangeElement } from 'common/models/elements/element';
<img #image
draggable="false"
[src]="elementModel.src | safeResourceUrl"
- [alt]="'imageNotFound' | translate"
+ [alt]="elementModel.alt"
[class]="elementModel.scale ? 'fit-image' : 'max-size-image'">
<aspect-image-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
[imageId]="elementModel.id"
diff --git a/projects/common/models/elements/media-elements/image.ts b/projects/common/models/elements/media-elements/image.ts
index 716990871..a6284b192 100644
--- a/projects/common/models/elements/media-elements/image.ts
+++ b/projects/common/models/elements/media-elements/image.ts
@@ -7,6 +7,7 @@ import { ImageComponent } from 'common/components/media-elements/image.component
export class ImageElement extends UIElement implements PositionedUIElement {
src: string | null = null;
+ alt: string = 'Bild nicht gefunden';
scale: boolean = false;
magnifier: boolean = false;
magnifierSize: number = 100;
@@ -17,6 +18,7 @@ export class ImageElement extends UIElement implements PositionedUIElement {
constructor(element: Partial<ImageElement>) {
super({ height: 100, ...element });
if (element.src) this.src = element.src;
+ if (element.alt) this.alt = element.alt;
if (element.scale) this.scale = element.scale;
if (element.magnifier) this.magnifier = element.magnifier;
if (element.magnifierSize) this.magnifierSize = element.magnifierSize;
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
index 9ef43d179..aa695c7fb 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
@@ -54,6 +54,13 @@
(click)="changeMediaSrc(combinedProperties.type)">
<mat-icon>upload_file</mat-icon>
</button>
+
+ <mat-form-field *ngIf="combinedProperties.alt !== undefined">
+ <mat-label>Alternativtext</mat-label>
+ <input matInput type="text" [value]="$any(combinedProperties.alt)"
+ (input)="updateModel.emit({property: 'alt', value: $any($event.target).value })">
+ </mat-form-field>
+
<button *ngIf="combinedProperties.player"
class="fx-align-self-center"
mat-raised-button
--
GitLab