diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts index 31cda98ecff4..913ea9cf4677 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts @@ -1,4 +1,4 @@ -import { Observable, forkJoin, from, of, throwError } from 'rxjs'; +import { Observable, forkJoin, from, of } from 'rxjs'; import { Injectable } from '@angular/core'; @@ -767,8 +767,11 @@ export class DotSeoMetaTagsService { getImageFileSize(imageUrl: string): Observable { return from(fetch(imageUrl)).pipe( mergeMap((response) => { - if (response.status === 404) { - throwError('Image not found'); + if (response.status == 404) { + return of({ + size: 0, + url: IMG_NOT_FOUND_KEY + }); } return response.blob(); @@ -779,14 +782,7 @@ export class DotSeoMetaTagsService { url: imageUrl }); }), - catchError((error) => { - if (error.message === 'Failed to fetch') { - return of({ - length: 0, - url: IMG_NOT_FOUND_KEY - }); - } - + catchError(() => { return from(this.dotUploadService.uploadFile({ file: imageUrl })).pipe( mergeMap((uploadedFile) => { if (uploadedFile) { @@ -795,7 +791,6 @@ export class DotSeoMetaTagsService { }), catchError((uploadError) => { console.warn('Error while uploading:', uploadError); - // You can handle the error from the upload service here return of({ length: 0, diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html index b4580f44078f..a2757bdae6f2 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html @@ -36,6 +36,7 @@ preview image
{{ mainPreview.hostName }} @@ -44,10 +45,17 @@
{{ mainPreview.twitterTitle }}
+
+ +
Social Media Preview Image Not Defined!
+
preview image +
{{ mainPreview.hostName }}
{{ mainPreview.title }}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss index cf40d2110ac3..3c555c0ecc0b 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss @@ -180,4 +180,20 @@ border-top-left-radius: $border-radius-xl; } } + + .default-image { + width: 45.61706rem; + height: 23.875rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + color: $black; + background-color: $color-palette-gray-100; + + .pi { + font-size: 2.5rem; + color: $color-alert-red; + } + } } diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts index 977a991a91f5..42b3c4646031 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts @@ -65,6 +65,7 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges { allPreview: MetaTagsPreview[]; mainPreview: MetaTagsPreview; seoMediaTypes = SEO_MEDIA_TYPES; + defaultPreview = false; ngOnInit() { const title = @@ -117,4 +118,8 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges { }) ); } + + onImageError() { + this.defaultPreview = true; + } }