Updating the IframePreview to append a subdirectory to a slug for a specific Document type.
23 replies
Last updated: Apr 2, 2020
H
Is there anyway to update the
IframePreviewto append a specific sub directory to a slug for a specific Document type. For example I have a directory and I need to add
/directory/so that needs to be added to the previewURL + sub directory + slug.current
Apr 2, 2020, 12:34 AM
H
Apr 2, 2020, 12:46 AM
H
user T
Thank you, but I am trying to use/set this up for the iframe preview.Apr 2, 2020, 12:47 AM
H
Could you explain a bit more about your use case?
Apr 2, 2020, 1:07 AM
H
I am using this setup https://www.sanity.io/blog/evolve-authoring-experiences-with-views-and-split-panes
Apr 2, 2020, 1:10 AM
H
Apr 2, 2020, 1:10 AM
H
Try doing what I suggested, but only the instructions for the resolve*.js, and adding that part to your sanity.json
Apr 2, 2020, 1:12 AM
H
I use exactly this method.
Apr 2, 2020, 1:12 AM
H
I guess I am unclear how & where to add this?
Apr 2, 2020, 1:14 AM
H
Follow steps 2-3 of the link I posted
Apr 2, 2020, 1:15 AM
H
It's within your sanity directory
Apr 2, 2020, 1:16 AM
H
Right I got that, but how is it going to update this in the deskStructure.js file? Here’s what I currently have for adding a Business
S.listItem()
.title('Businesses')
.schemaType('business')
.child(
S.documentTypeList('business')
.title('Businesses')
.child(documentId =>
S.document()
.documentId(documentId)
.schemaType('business')
.views([
S.view.form().icon(EditIcon),
S.view.component(IframePreview)
.options({previewURL})
.title('Web Preview')
.icon(EyeIcon)
])
)
),Apr 2, 2020, 1:16 AM
H
so this would just show the domain.com + slug.current, but I need domain.com + /directory/ + slug.current
Apr 2, 2020, 1:18 AM
H
Have you tried it?
Apr 2, 2020, 1:22 AM
H
import resolveProductionUrl from './resolveProductionUrl'
const WebPreview = ({ document }) => {
const { displayed } = document
return (
<iframe
src={resolveProductionUrl(displayed)}
frameBorder={0}
height="100%"
width="100%"
/>
)
}Apr 2, 2020, 1:24 AM
H
My iframe preview works fine. What I am trying to do is pass a sub dir to a specific document type
Apr 2, 2020, 1:24 AM
H
Just write the conditional in resolveProductionUrl
Apr 2, 2020, 1:26 AM
H
A document is passed in. So you can inspect its type before returning the URL
Apr 2, 2020, 1:26 AM
H
Here’s the
iframePreview.jsfunction that generates the url
const assembleProjectUrl = ({displayed, options}) => {
const {slug} = displayed
const {previewURL} = options
if (!slug || !previewURL) {
console.warn('Missing slug or previewURL', {slug, previewURL})
return ''
}
return `${previewURL}/${slug.current}`
}Apr 2, 2020, 1:27 AM
H
I don’t think the document is avail here
Apr 2, 2020, 1:28 AM
H
that is
displayed
Apr 2, 2020, 1:29 AM
H
you are currently only using slug
Apr 2, 2020, 1:30 AM
H
Ahh that helps! cool yea I can use that and add the dir conditionally
Apr 2, 2020, 1:30 AM
H
Thanks
user T
!Apr 2, 2020, 1:36 AM
Sanity– build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.