diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index c79d19e267c..52df841d3b6 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -32,6 +32,18 @@
+
+
-
+
@@ -23,6 +23,17 @@
+
+
+
+ ![]()
+ {{value}}
+
+
+
{{value}}
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.ts b/src/app/item-page/field-components/metadata-values/metadata-values.component.ts
index cbbae9006da..29c20c6e2ac 100644
--- a/src/app/item-page/field-components/metadata-values/metadata-values.component.ts
+++ b/src/app/item-page/field-components/metadata-values/metadata-values.component.ts
@@ -4,6 +4,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
import { BrowseDefinition } from '../../../core/shared/browse-definition.model';
import { hasValue } from '../../../shared/empty.util';
import { VALUE_LIST_BROWSE_DEFINITION } from '../../../core/shared/value-list-browse-definition.resource-type';
+import { ImageField } from '../../simple/field-components/specific-field/item-page-field.component';
/**
* This component renders the configured 'values' into the ds-metadata-field-wrapper component.
@@ -55,6 +56,11 @@ export class MetadataValuesComponent implements OnChanges {
@Input() browseDefinition?: BrowseDefinition;
+ /**
+ * Optional {@code ImageField} reference that represents an image to be displayed inline.
+ */
+ @Input() img?: ImageField;
+
ngOnChanges(changes: SimpleChanges): void {
this.renderMarkdown = !!this.appConfig.markdown.enabled && this.enableMarkdown;
}
diff --git a/src/app/item-page/item-shared.module.ts b/src/app/item-page/item-shared.module.ts
index 9c2bbba6194..8b7243acde0 100644
--- a/src/app/item-page/item-shared.module.ts
+++ b/src/app/item-page/item-shared.module.ts
@@ -1,21 +1,36 @@
-import { RelatedEntitiesSearchComponent } from './simple/related-entities/related-entities-search/related-entities-search.component';
+import {
+ RelatedEntitiesSearchComponent
+} from './simple/related-entities/related-entities-search/related-entities-search.component';
import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
import { SearchModule } from '../shared/search/search.module';
import { SharedModule } from '../shared/shared.module';
import { TranslateModule } from '@ngx-translate/core';
import { DYNAMIC_FORM_CONTROL_MAP_FN } from '@ng-dynamic-forms/core';
-import { dsDynamicFormControlMapFn } from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
-import { TabbedRelatedEntitiesSearchComponent } from './simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component';
-import { ItemVersionsDeleteModalComponent } from './versions/item-versions-delete-modal/item-versions-delete-modal.component';
-import { ItemVersionsSummaryModalComponent } from './versions/item-versions-summary-modal/item-versions-summary-modal.component';
+import {
+ dsDynamicFormControlMapFn
+} from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
+import {
+ TabbedRelatedEntitiesSearchComponent
+} from './simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component';
+import {
+ ItemVersionsDeleteModalComponent
+} from './versions/item-versions-delete-modal/item-versions-delete-modal.component';
+import {
+ ItemVersionsSummaryModalComponent
+} from './versions/item-versions-summary-modal/item-versions-summary-modal.component';
import { MetadataValuesComponent } from './field-components/metadata-values/metadata-values.component';
-import { GenericItemPageFieldComponent } from './simple/field-components/specific-field/generic/generic-item-page-field.component';
-import { MetadataRepresentationListComponent } from './simple/metadata-representation-list/metadata-representation-list.component';
+import {
+ GenericItemPageFieldComponent
+} from './simple/field-components/specific-field/generic/generic-item-page-field.component';
+import {
+ MetadataRepresentationListComponent
+} from './simple/metadata-representation-list/metadata-representation-list.component';
import { RelatedItemsComponent } from './simple/related-items/related-items-component';
import {
ThemedMetadataRepresentationListComponent
} from './simple/metadata-representation-list/themed-metadata-representation-list.component';
+import { ItemPageImgFieldComponent } from './simple/field-components/specific-field/img/item-page-img-field.component';
const ENTRY_COMPONENTS = [
ItemVersionsDeleteModalComponent,
@@ -32,6 +47,7 @@ const COMPONENTS = [
MetadataRepresentationListComponent,
ThemedMetadataRepresentationListComponent,
RelatedItemsComponent,
+ ItemPageImgFieldComponent,
];
@NgModule({
@@ -42,7 +58,8 @@ const COMPONENTS = [
CommonModule,
SearchModule,
SharedModule,
- TranslateModule
+ TranslateModule,
+ NgOptimizedImage
],
exports: [
...COMPONENTS
diff --git a/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts
new file mode 100644
index 00000000000..b96daa47ad6
--- /dev/null
+++ b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts
@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemPageImgFieldComponent } from './item-page-img-field.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loader.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
+import { BrowseDefinitionDataService } from '../../../../../core/browse/browse-definition-data.service';
+import { BrowseDefinitionDataServiceStub } from '../../../../../shared/testing/browse-definition-data-service.stub';
+import { GenericItemPageFieldComponent } from '../generic/generic-item-page-field.component';
+import { MetadataValuesComponent } from '../../../../field-components/metadata-values/metadata-values.component';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { mockItemWithMetadataFieldsAndValue } from '../item-page-field.component.spec';
+import { By } from '@angular/platform-browser';
+import { ImageField } from '../item-page-field.component';
+
+let component: ItemPageImgFieldComponent;
+let fixture: ComponentFixture;
+
+const mockField = 'organization.identifier.ror';
+const mockValue = 'http://ror.org/awesome-identifier';
+const mockLabel = 'ROR label';
+const mockUrlRegex = '(.*)ror.org';
+const mockImg = {
+ URI: './assets/images/ror-icon.svg',
+ alt: 'item.page.image.alt.ROR',
+ heightVar: '--ds-item-page-img-field-ror-inline-height'
+} as ImageField;
+
+describe('ItemPageImgFieldComponent', () => {
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: TranslateLoaderMock
+ }
+ })],
+ providers: [
+ { provide: APP_CONFIG, useValue: environment },
+ { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub }
+ ],
+ declarations: [ItemPageImgFieldComponent, GenericItemPageFieldComponent, MetadataValuesComponent],
+ schemas: [NO_ERRORS_SCHEMA]
+ })
+ .overrideComponent(GenericItemPageFieldComponent, {
+ set: { changeDetection: ChangeDetectionStrategy.Default }
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ItemPageImgFieldComponent);
+ component = fixture.componentInstance;
+ component.item = mockItemWithMetadataFieldsAndValue([mockField], mockValue);
+ component.fields = [mockField];
+ component.label = mockLabel;
+ component.urlRegex = mockUrlRegex;
+ component.img = mockImg;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should display display img tag', () => {
+ const image = fixture.debugElement.query(By.css('img.link-logo'));
+ expect(image).not.toBeNull();
+ });
+
+ it('should have right attributes', () => {
+ const image = fixture.debugElement.query(By.css('img.link-logo'));
+ expect(image.attributes.src).toEqual(mockImg.URI);
+ expect(image.attributes.alt).toEqual(mockImg.alt);
+
+ const imageEl = image.nativeElement;
+ expect(imageEl.style.height).toContain(mockImg.heightVar);
+ });
+
+ it('should have the right value', () => {
+ const imageAnchor = fixture.debugElement.query(By.css('a.link-anchor'));
+ const anchorEl = imageAnchor.nativeElement;
+ expect(anchorEl.innerHTML).toContain(mockValue);
+ });
+});
diff --git a/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts
new file mode 100644
index 00000000000..d442323b53b
--- /dev/null
+++ b/src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { ImageField, ItemPageFieldComponent } from '../item-page-field.component';
+import { Item } from '../../../../../core/shared/item.model';
+
+@Component({
+ selector: 'ds-item-page-img-field',
+ templateUrl: '../item-page-field.component.html'
+})
+/**
+ * Component that renders an inline image for a given field.
+ * This component uses a given {@code ImageField} configuration to correctly render the img.
+ */
+export class ItemPageImgFieldComponent extends ItemPageFieldComponent {
+
+ /**
+ * The item to display metadata for
+ */
+ @Input() item: Item;
+
+ /**
+ * Separator string between multiple values of the metadata fields defined
+ * @type {string}
+ */
+ @Input() separator: string;
+
+ /**
+ * Fields (schema.element.qualifier) used to render their values.
+ */
+ @Input() fields: string[];
+
+ /**
+ * Label i18n key for the rendered metadata
+ */
+ @Input() label: string;
+
+ /**
+ * Image Configuration
+ */
+ @Input() img: ImageField;
+
+ /**
+ * Whether any valid HTTP(S) URL should be rendered as a link
+ */
+ @Input() urlRegex?: string;
+
+}
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html
index 91d40b0ad70..f45d4657a46 100644
--- a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html
+++ b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html
@@ -6,5 +6,6 @@
[enableMarkdown]="enableMarkdown"
[urlRegex]="urlRegex"
[browseDefinition]="browseDefinition|async"
+ [img]="img"
>