diff --git a/quartz/components/scripts/linkcard.inline.ts b/quartz/components/scripts/linkcard.inline.ts index 5b6ff0758..c5ff8024b 100644 --- a/quartz/components/scripts/linkcard.inline.ts +++ b/quartz/components/scripts/linkcard.inline.ts @@ -1,29 +1,29 @@ // Handle link card image failures function handleLinkCardImages() { - const linkCardImages = document.querySelectorAll('.rlc-image') - - linkCardImages.forEach((img: Element) => { - const imgElement = img as HTMLImageElement - const container = imgElement.closest('.rlc-image-container') - - if (!container) return - - // 画像が既に読み込みエラーの場合(complete=true かつ naturalWidth=0) - if (imgElement.complete && imgElement.naturalWidth === 0) { - container.classList.add('image-failed') - return - } - - // 画像読み込みエラー時のイベントリスナー - const handleError = () => { - container.classList.add('image-failed') - } - - imgElement.addEventListener('error', handleError) - window.addCleanup(() => imgElement.removeEventListener('error', handleError)) - }) - } + const linkCardImages = document.querySelectorAll('.rlc-image') - // ページ読み込み時とナビゲーション時に実行 - document.addEventListener('nav', handleLinkCardImages) - document.addEventListener('DOMContentLoaded', handleLinkCardImages) \ No newline at end of file + linkCardImages.forEach((img: Element) => { + const imgElement = img as HTMLImageElement + const container = imgElement.closest('.rlc-image-container') + + if (!container) return + + // If the image has already failed to load (complete=true and naturalWidth=0) + if (imgElement.complete && imgElement.naturalWidth === 0) { + container.classList.add('image-failed') + return + } + + // Event listener for image load errors + const handleError = () => { + container.classList.add('image-failed') + } + + imgElement.addEventListener('error', handleError) + window.addCleanup(() => imgElement.removeEventListener('error', handleError)) + }) +} + +// Execute on page load and navigation events +document.addEventListener('nav', handleLinkCardImages) +document.addEventListener('DOMContentLoaded', handleLinkCardImages) \ No newline at end of file diff --git a/quartz/components/styles/linkcard.scss b/quartz/components/styles/linkcard.scss index 29608dce4..aaa4bfdb3 100644 --- a/quartz/components/styles/linkcard.scss +++ b/quartz/components/styles/linkcard.scss @@ -76,10 +76,10 @@ background: var(--lightgray); position: relative; overflow: hidden; - min-width: 120px; // 最小幅を設定 - max-width: 300px; // 最大幅を設定 - height: 120px; // 高さは固定 - width: auto; // 幅は画像に応じて自動調整 + min-width: 120px; // set minimum width + max-width: 300px; // set maximum width + height: 120px; // fixed height + width: auto; // width adjusts automatically to image &.image-failed { display: none; @@ -109,7 +109,7 @@ width: 100%; height: 160px; order: -1; - max-width: none; // モバイルでは最大幅制限を解除 + max-width: none; // remove max-width restriction on mobile &.image-failed { display: none; diff --git a/quartz/styles/linkcard.scss b/quartz/styles/linkcard.scss index 29608dce4..62f2ca391 100644 --- a/quartz/styles/linkcard.scss +++ b/quartz/styles/linkcard.scss @@ -76,10 +76,10 @@ background: var(--lightgray); position: relative; overflow: hidden; - min-width: 120px; // 最小幅を設定 - max-width: 300px; // 最大幅を設定 - height: 120px; // 高さは固定 - width: auto; // 幅は画像に応じて自動調整 + min-width: 120px; // set minimum width + max-width: 300px; // set maximum width + height: 120px; // fixed height + width: auto; // width adjusts automatically to image &.image-failed { display: none; @@ -91,7 +91,7 @@ height: 100%; object-fit: cover; object-position: center; - min-width: 100%; // コンテナの幅は最低限埋める + min-width: 100%; // ensure container is at least filled } } @@ -109,7 +109,7 @@ width: 100%; height: 160px; order: -1; - max-width: none; // モバイルでは最大幅制限を解除 + max-width: none; // remove max-width restriction on mobile &.image-failed { display: none;