Files
sori.studio/lib/content-image-urls.js

59 lines
1.9 KiB
JavaScript

import {
getPostBodyPreviewThumbnailUrl,
getPostBodyThumbnailUrl,
getPostLightboxThumbnailUrl,
withGeneratedImageCacheVersion
} from './post-card-thumbnail-url.js'
/**
* 게시물 본문 표시용 이미지 URL을 조회한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
* @returns {string} 표시용 이미지 URL
*/
export const getContentDisplayImageUrl = (imageUrl) => {
const bodyThumbnailUrl = getPostBodyThumbnailUrl(imageUrl)
return bodyThumbnailUrl
? withGeneratedImageCacheVersion(bodyThumbnailUrl)
: imageUrl || ''
}
/**
* 게시물 라이트박스용 이미지 URL을 조회한다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
* @returns {string} 라이트박스용 이미지 URL
*/
export const getContentLightboxImageUrl = (imageUrl) => {
const lightboxThumbnailUrl = getPostLightboxThumbnailUrl(imageUrl)
return lightboxThumbnailUrl
? withGeneratedImageCacheVersion(lightboxThumbnailUrl)
: imageUrl || ''
}
/**
* 게시물 본문 이미지의 반응형 srcset을 만든다.
* @param {string|null|undefined} imageUrl - 원본 이미지 URL
* @returns {string} srcset 문자열
*/
export const getContentDisplayImageSrcset = (imageUrl) => {
const previewUrl = getPostBodyPreviewThumbnailUrl(imageUrl)
const bodyUrl = getPostBodyThumbnailUrl(imageUrl)
return [
previewUrl ? `${withGeneratedImageCacheVersion(previewUrl)} 720w` : '',
bodyUrl ? `${withGeneratedImageCacheVersion(bodyUrl)} 1600w` : ''
].filter(Boolean).join(', ')
}
/**
* 갤러리 표시용 이미지 sizes 값을 만든다.
* @param {number} rowLength - 갤러리 행 이미지 개수
* @returns {string} sizes 속성
*/
export const getGalleryImageSizes = (rowLength) => {
const columnWidth = rowLength >= 3 ? '33vw' : rowLength === 2 ? '50vw' : '100vw'
return `(max-width: 768px) 100vw, ${columnWidth}`
}