only use details background image when provided (#4515)

This commit is contained in:
CJ
2024-01-29 01:04:41 -06:00
committed by GitHub
parent d82c526ada
commit 11cafe933a
4 changed files with 64 additions and 48 deletions

View File

@@ -362,18 +362,22 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
function maybeRenderHeaderBackgroundImage() { function maybeRenderHeaderBackgroundImage() {
let image = movie.front_image_path; let image = movie.front_image_path;
if (enableBackgroundImage && !isEditing && image) { if (enableBackgroundImage && !isEditing && image) {
return ( const imageURL = new URL(image);
<div className="background-image-container"> let isDefaultImage = imageURL.searchParams.get("default");
<picture> if (!isDefaultImage) {
<source src={image} /> return (
<img <div className="background-image-container">
className="background-image" <picture>
src={image} <source src={image} />
alt={`${movie.name} background`} <img
/> className="background-image"
</picture> src={image}
</div> alt={`${movie.name} background`}
); />
</picture>
</div>
);
}
} }
} }

View File

@@ -336,18 +336,22 @@ const PerformerPage: React.FC<IProps> = ({ performer, tabKey }) => {
function maybeRenderHeaderBackgroundImage() { function maybeRenderHeaderBackgroundImage() {
if (enableBackgroundImage && !isEditing && activeImage) { if (enableBackgroundImage && !isEditing && activeImage) {
return ( const activeImageURL = new URL(activeImage);
<div className="background-image-container"> let isDefaultImage = activeImageURL.searchParams.get("default");
<picture> if (!isDefaultImage) {
<source src={activeImage} /> return (
<img <div className="background-image-container">
className="background-image" <picture>
src={activeImage} <source src={activeImage} />
alt={`${performer.name} background`} <img
/> className="background-image"
</picture> src={activeImage}
</div> alt={`${performer.name} background`}
); />
</picture>
</div>
);
}
} }
} }

View File

@@ -455,18 +455,22 @@ const StudioPage: React.FC<IProps> = ({ studio, tabKey }) => {
function maybeRenderHeaderBackgroundImage() { function maybeRenderHeaderBackgroundImage() {
let studioImage = studio.image_path; let studioImage = studio.image_path;
if (enableBackgroundImage && !isEditing && studioImage) { if (enableBackgroundImage && !isEditing && studioImage) {
return ( const studioImageURL = new URL(studioImage);
<div className="background-image-container"> let isDefaultImage = studioImageURL.searchParams.get("default");
<picture> if (!isDefaultImage) {
<source src={studioImage} /> return (
<img <div className="background-image-container">
className="background-image" <picture>
src={studioImage} <source src={studioImage} />
alt={`${studio.name} background`} <img
/> className="background-image"
</picture> src={studioImage}
</div> alt={`${studio.name} background`}
); />
</picture>
</div>
);
}
} }
} }

View File

@@ -471,18 +471,22 @@ const TagPage: React.FC<IProps> = ({ tag, tabKey }) => {
function maybeRenderHeaderBackgroundImage() { function maybeRenderHeaderBackgroundImage() {
let tagImage = tag.image_path; let tagImage = tag.image_path;
if (enableBackgroundImage && !isEditing && tagImage) { if (enableBackgroundImage && !isEditing && tagImage) {
return ( const tagImageURL = new URL(tagImage);
<div className="background-image-container"> let isDefaultImage = tagImageURL.searchParams.get("default");
<picture> if (!isDefaultImage) {
<source src={tagImage} /> return (
<img <div className="background-image-container">
className="background-image" <picture>
src={tagImage} <source src={tagImage} />
alt={`${tag.name} background`} <img
/> className="background-image"
</picture> src={tagImage}
</div> alt={`${tag.name} background`}
); />
</picture>
</div>
);
}
} }
} }