✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Updating the IframePreview to append a subdirectory to a slug for a specific Document type.

23 replies
Last updated: Apr 2, 2020
Is there anyway to update the
IframePreview
to 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
Apr 2, 2020, 12:46 AM
user T
Thank you, but I am trying to use/set this up for the iframe preview.
Apr 2, 2020, 12:47 AM
Could you explain a bit more about your use case?
Apr 2, 2020, 1:07 AM
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
I use exactly this method.
Apr 2, 2020, 1:12 AM
I guess I am unclear how & where to add this?
Apr 2, 2020, 1:14 AM
Follow steps 2-3 of the link I posted
Apr 2, 2020, 1:15 AM
It's within your sanity directory
Apr 2, 2020, 1:16 AM
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
so this would just show the domain.com + slug.current, but I need domain.com + /directory/ + slug.current
Apr 2, 2020, 1:18 AM
Have you tried it?
Apr 2, 2020, 1:22 AM
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
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
Just write the conditional in resolveProductionUrl
Apr 2, 2020, 1:26 AM
A document is passed in. So you can inspect its type before returning the URL
Apr 2, 2020, 1:26 AM
Here’s the
iframePreview.js
function 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
I don’t think the document is avail here
Apr 2, 2020, 1:28 AM
that is
displayed
Apr 2, 2020, 1:29 AM
you are currently only using slug
Apr 2, 2020, 1:30 AM
Ahh that helps! cool yea I can use that and add the dir conditionally
Apr 2, 2020, 1:30 AM
Thanks
user T
!
Apr 2, 2020, 1:36 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?