44:["$","title",null,{"children":"Tailwind CSS Photo + Card | UMNI.design | Observable"}] 4c:[] 48:{"id":"f150ffba604046fb","slug":"tailwind-css-photo-card","title":"Tailwind CSS Photo + Card","thumbnail":"d9e78027c3ef41b6d87412f115b92a407a0b55b880c54df8b67a72f05dbbf487","access_level":"public","create_time":"$D2022-10-21T03:20:31.445Z","update_time":"$D2026-03-04T08:58:43.832Z","view_time":null,"first_public_time":"$D2022-10-21T03:20:31.445Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"eceee348d9a55ccd","login":"design","name":"UMNI.design","avatar_url":"https://avatars-next.observableusercontent.com/da616e8c8af7bc2118b13ab7e705c06985896777ed897b48242d3f052b3dccec","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":112,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"},{"type":"team","id":"eceee348d9a55ccd","login":"design","name":"UMNI.design","avatar_url":"https://avatars-next.observableusercontent.com/da616e8c8af7bc2118b13ab7e705c06985896777ed897b48242d3f052b3dccec","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tailwind CSS Photo + Card","cells":[{"id":0,"value":"# Tailwind CSS Photo + Card","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"Import `initializeTWind` from [@saneef](https://observablehq.com/@saneef/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"import {initializeTWind} from \"837753b2cca435c5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"tw = initializeTWind({ invalidation })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"Some helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"import { getImageUrl, getRandomImageUrl } from \"@saneef/lorem-picsum\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof image_number = Inputs.number({label: \"Adjust Number\", value :\"1024\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function photoTile({ imgUrl, altText}) {\n return htl.html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"htl.html`

\n ${photoTile({\n imgUrl: getImageUrl(image_number,{width: 900, height: 600}),\n altText: \"This is a placeholder image.\"\n})}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"htl.html`

\n ${d3.range(0,9).map(i => photoTile({\n imgUrl: getRandomImageUrl({width: 900, height: 600}),\n}))}\n

${title}

${desc}

\n ${photoCard({\n imgUrl: getImageUrl(image_number,{width: 900, height: 600}),\n altText: \"This is a placeholder image.\",\n title: \"A title for the above random image.\",\n desc: \"It calls for a meaningless description. One more sentence to make it longer. \"\n})}\n

\n ${d3.range(0,6).map(i => photoCard({\n imgUrl: getRandomImageUrl({width: 900, height: 600}),\n altText: \"This is a placeholder image.\",\n title: `A title for the above random image ${i}`,\n desc: \"It calls for a meaningless description. One more sentence to make it longer. \"\n}))}\n