Only when previewing the page, the title of this page is being inserted as an H1. This does not happen in my local preview, and nowhere in my code does that H1 exist. It does not show on the published page.
Hi @andrew.levy, thanks for reaching out about this. Can you provide us with more information?
- The url for your Prismic repository (you can DM this to me if you aren’t comfortable sharing it publicly here)
- What framework/technology are you using for your website?
- How you have your Custom Type setup in Prismic
- The code for how this page is templated/rendered
With this we will be able to take a closer look and try to figure out what is going on for you. Thanks!
- https://urban-electric.prismic.io/
- Ream (Vue Framework)
-
"title" : { "type" : "StructuredText", "config" : { "single" : "heading1, heading2, heading3, heading4, heading5, heading6,em", "label" : "Title" } },
Do you need the whole custom type?
-
<div :class="$style.content"> <h2 class="h2" :class="$style.title" v-html="title" /> <SliceList :slices="slices" /> </div>
“title” in v-html is the return of an asHtml function.
Let me know if you need more.
@andrew.levy Yeah, the full component would be helpful as well as the SliceList component if that’s where the H1 element is coming from. Also, what is the name of this Custom Type?
The name of the Custom Type is ‘Blog Post’. The H1 isn’t coming from any component. That’s the weird part. It specifically has something to do with the preview. Here is a screenshot of the rendered DOM from the preview page where the H1 is being inserted. The ‘random’ H1 is being inserted above where the SliceList component starts.
<template lang="html">
<BlogLayout v-bind="layoutProps">
<div>
<div :class="$style.front_image">
<div :class="$style.front_image_spacer" />
<div :class="$style.front_image_image"><PrismicImage :data="featuredImage" variants="desktop_retina" /></div>
<div :class="$style.front_image_spacer" />
</div>
<div :class="$style.content">
<h2 class="h2" :class="$style.title" v-html="title" />
<SliceList :slices="slices" />
</div>
<div v-if="relatedBlogPosts.length > 0" :class="$style.latest_posts">
<div :class="$style.latest_posts_header">
<h3>Latest Posts</h3>
</div>
<RelatedPosts :posts="relatedBlogPosts.slice(0, 3)" />
</div>
</div>
<Lightbox ref="lightbox">
<PrismicImage v-for="(data, idx) in images" :key="idx" :data="data.image" full wrapper="none">
<template slot="lightbox-info">
<div>
<div>
<p v-text="data.image.alt" />
<p v-text="data.image.copyright" />
</div>
<div v-if="hasImageFixture(data)">
<p><PrismicLink :to="`/${data.image_fixture.uid}`">View Details</PrismicLink></p>
</div>
</div>
</template>
</PrismicImage>
</Lightbox>
</BlogLayout>
</template>
<style module lang="scss">
@import "~@/assets/front/scss/setup";
.title {
margin: 0 24px;
text-align: center;
margin-bottom: 40px;
@include tablet {
margin-bottom: 28px;
}
@include mobile {
margin-bottom: 25px;
em {
white-space: nowrap;
}
}
}
.front_image {
display: flex;
max-width: 1600px;
padding: 0 24px;
margin: 0 auto 57px;
&_spacer {
min-width: 0;
max-width: 132px - 24px; // Note: can't just set min/max to 24/132, this leads to horizontal scrolling in between 1048 and 1066 px.
flex: 1 1;
@include tablet {
display: none;
}
}
&_image {
min-width: 1000px;
flex: 1 0;
@include tablet {
min-width: 0;
}
}
@include tablet {
margin-bottom: 40px; // @checkme
}
}
.content {
margin-bottom: 86px; // @checkme
@include tablet {
margin-bottom: 38px; //@checkme
}
}
.latest_posts {
&_header {
// This is copied from ImageAndText slice .text class.
// If it's copied elsewhere else, consider unification.
width: 300px*2 + 48px;
@include mobile {
width: 100%;
padding: 0 24px;
}
margin: 0 auto 65px; // @checkme
@include tablet {
margin-bottom: 36px;
}
@include mobile {
margin-bottom: 24px;
}
}
h3 {
font-size: 16px;
line-height: 32px;
letter-spacing: 3.3px;
text-transform: uppercase;
text-align: center;
padding-bottom: 14px;
border-bottom: 1px solid $grey-3;
}
}
</style>
<script>
import Prismic from 'prismic-javascript'
import prismic from '@/services/prismic'
import { flatten, pluck, has, reject, isEmpty, findIndex, pathEq, propEq, pipe } from 'ramda'
import { uniqueById } from '@/helpers/prismic'
import { EventBus } from '@/helpers/eventbus'
import {
getBlogPostFeaturedImage,
findMatchingCategoryUsingId,
getBlogPostFromCategory,
PRISMIC_BLOG_CATEGORY_FETCH_LINKS,
PRISMIC_BLOG_ORDER_BY_DATE_DESC,
PRISMIC_BLOG_POST_MAX_RELATED_POST,
PRISMIC_BLOG_POST_TYPE
} from '@/helpers/prismic/type/blog'
import Lightbox from '@/components/front/helpers/Lightbox'
import BlogPageMixin from './blog/BlogPageMixin'
import RelatedPosts from './blog/RelatedPosts'
export default {
mixins: [ BlogPageMixin ],
components: { RelatedPosts, Lightbox },
props: {
relatedBlogPosts: Array
},
async getInitialProps (context, data) {
const mixinProps = await BlogPageMixin.getInitialProps(context, data)
const matchingCategory = findMatchingCategoryUsingId(mixinProps.postAssociations, data.id)
const relatedBlogPosts = await fetchMatchingCategory(matchingCategory, data.id)
return { ...mixinProps, relatedBlogPosts }
},
created () {
EventBus.$on('open-lightbox', url => {
const hasUrl = pathEq(['image', 'url'], url)
this.$refs.lightbox.showIndex(findIndex(hasUrl, this.images))
})
},
computed: {
title () {
return this.asHtml(this.getTitle(this.data))
},
featuredImage () {
return getBlogPostFeaturedImage(this.data)
},
slices () {
return this.getSlices(this.data)
},
images () {
/// do not want to include the junk drawer images in the list of other images on the page.
return pipe(
reject(propEq('slice_type', 'blog_junk_drawer')),
pluck('items'),
flatten(),
reject(isEmpty())
)(this.data.data.body)
}
},
methods: {
hasImageFixture (data) {
return has('uid', data.image_fixture)
}
}
}
async function fetchMatchingCategory ([postCategory] = [false], currentPostId = false) {
const api = await prismic.getApi()
const posts = postCategory ? await api.getByID(postCategory, { // @todo: Filter out current post
orderings: PRISMIC_BLOG_ORDER_BY_DATE_DESC,
pageSize: PRISMIC_BLOG_POST_MAX_RELATED_POST,
fetchLinks: PRISMIC_BLOG_CATEGORY_FETCH_LINKS
}) : []
const relatedPosts = posts.length > 0 ? getBlogPostFromCategory(posts) : []
if (relatedPosts.length < PRISMIC_BLOG_POST_MAX_RELATED_POST) {
const { results = [] } = await api.query(
Prismic.Predicates.at('document.type', PRISMIC_BLOG_POST_TYPE),
{
orderings: PRISMIC_BLOG_ORDER_BY_DATE_DESC,
pageSize: PRISMIC_BLOG_POST_MAX_RELATED_POST
}
)
relatedPosts.push(...results)
}
return uniqueById(relatedPosts.filter(post => post.id !== currentPostId))
}
</script>Weird. This is only showing up when you do a preview on your live production site? The only thing I can think would be that something is wrong in your production code that needs to be updated.
Otherwise I think that I’ll need to take a loot at your full project code to try to reproduce this here. You can send me either a zip of your project files or a link to Github.
Correct it only shows up when doing a Prismic preview of the page on both our production and staging sites. The same exact page when being viewed live does not show this. It does not however show up when viewing the preview locally (on any branch that we have… master or otherwise). It seems like it would have to be something happening with Prismic.
Prismic should be serving the same content to your local preview as it does to your production preview, so something weird is happening. I would like to try to reproduce this issue locally, so can you send me your full project code? You can send me either a zip of your project files or a link to Github.
Unfortunately I’m not comfortable with sharing the project. I have discovered it is some sort of server side error when previewing data and can at least replicate it locally now. I’ll report back any findings.
The problem was with v-html being on an H2 element (which is weird anyway). Making it a div solved the issue 
. Not sure of the exact technical reason or why it only happened when previewing.
Yeah that’s strange, but I’m glad that you were able to figure out the issue 