ArticleGrid no preview fallback (wip)
This commit is contained in:
1 parent
f540f5be06
commit
c8fd2907ca
1 file changed
+42
-4
@@ -1,4 +1,4 @@
|
||||
import { IArticle } from 'src/types'
|
||||
import { IArticle, ImageDefinition } from 'src/types'
|
||||
import { Pager } from '../Pager'
|
||||
import { CardGrid } from '../CardGrid'
|
||||
import { Card, CardLayout } from '../Card'
|
||||
@@ -6,6 +6,46 @@ import { Date } from './Date'
|
||||
import { Block } from '../Block'
|
||||
import { Spacer } from '../Spacer'
|
||||
|
||||
export interface IResizeImage {
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
|
||||
export function resizeImage(src: string, options: IResizeImage): string {
|
||||
return src
|
||||
// return `https://images.weserv.nl/?url=${src}&w=${options.w}&h=${options.h}&n=-1`
|
||||
}
|
||||
|
||||
function getImage(image?: ImageDefinition) {
|
||||
if (!image) {
|
||||
const defaultSrc = '/static/img/HudozkaMain2014.jpg'
|
||||
const src = resizeImage(defaultSrc, { w: 400, h: 400 })
|
||||
const set = [
|
||||
{
|
||||
density: 2,
|
||||
href: resizeImage(defaultSrc, { w: 800, h: 800 }),
|
||||
}
|
||||
]
|
||||
const srcSet = set
|
||||
.map(({ href, density }) => `${href} ${density}x`)
|
||||
.join(' ')
|
||||
|
||||
return {
|
||||
src,
|
||||
srcSet,
|
||||
}
|
||||
}
|
||||
|
||||
const preview = image.artifacts.medium
|
||||
const src = preview.src
|
||||
const srcSet = preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ')
|
||||
|
||||
return {
|
||||
src,
|
||||
srcSet,
|
||||
}
|
||||
}
|
||||
|
||||
export type ArticleGridProps = {
|
||||
articles: IArticle[]
|
||||
nextPage: number | null
|
||||
@@ -29,9 +69,7 @@ export const ArticleGrid: React.FC<ArticleGridProps> = ({ articles, nextPage, pr
|
||||
{articles.map((article, i) => {
|
||||
const gridColumn = article.featured ? 'span 2' : 'auto'
|
||||
const layout: CardLayout = article.featured ? 'featured' : 'simple'
|
||||
const preview = article.preview.artifacts.medium
|
||||
const src = preview.src
|
||||
const srcSet = preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ')
|
||||
const { src, srcSet } = getImage(article.preview)
|
||||
|
||||
const content = !article.featured
|
||||
? (
|
||||
|
||||
Reference in new issue
Block a user