Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(gatsby-remark-images): captions do not show fallback based on filename #14219

Merged
merged 5 commits into from
May 23, 2019
Merged

fix(gatsby-remark-images): captions do not show fallback based on filename #14219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0f27a40
Fixed an issue where captions would show filename in case of no caption
FrederikBolding May 21, 2019
96cae9c
Fixed linting issues
FrederikBolding May 21, 2019
d5b212a
Added test for no caption in case of no alt or title
FrederikBolding May 21, 2019
7445f3b
Reverted weird change to snapshot
FrederikBolding May 21, 2019
13cd093
Removed snapshot test
FrederikBolding May 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/gatsby-remark-images/src/__tests__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,4 +369,18 @@ describe(`showCaptions`, () => {
expect($(`figcaption`).text()).toEqual(`some alt`)
expect(node.value).toMatchSnapshot()
})

it(`display nothing as caption if no title or alt`, async () => {
const imagePath = `images/my-image.jpeg`
const content = `![](./${imagePath})`

const nodes = await plugin(createPluginOptions(content, imagePath), {
showCaptions: true,
})
expect(nodes.length).toBe(1)

const node = nodes.pop()
const $ = cheerio.load(node.value)
expect($(`figcaption`).length).toBe(0)
})
})
10 changes: 6 additions & 4 deletions packages/gatsby-remark-images/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@ module.exports = (
}
}

const getNodeTitle = (node, alt) => {
const getNodeTitle = (node, alt, defaultAlt) => {
if (node.title) {
return node.title
} else if (alt && alt.length > 0) {
} else if (alt && alt.length > 0 && alt !== defaultAlt) {
return alt
}
return ``
Expand Down Expand Up @@ -250,7 +250,8 @@ module.exports = (
: options.wrapperStyle

// Construct new image node w/ aspect ratio placeholder
const showCaptions = options.showCaptions && getNodeTitle(node, alt)
const showCaptions =
options.showCaptions && getNodeTitle(node, alt, defaultAlt)
let rawHTML = `
<span
class="${imageWrapperClass}"
Expand Down Expand Up @@ -288,7 +289,8 @@ module.exports = (
${rawHTML}
<figcaption class="gatsby-resp-image-figcaption">${getNodeTitle(
node,
alt
alt,
defaultAlt
)}</figcaption>
</figure>
`.trim()
Expand Down