mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Added kg-card-hascaption
class to image/gallery/embed cards with captions
refs https://github.com/TryGhost/Ghost/issues/10445 - adds class to card renderers - class will only be present on new or re-saved posts
This commit is contained in:
parent
0665c72dda
commit
792c2608c5
7 changed files with 8 additions and 5 deletions
|
@ -18,6 +18,7 @@ module.exports = {
|
|||
let figcaption = dom.createElement('figcaption');
|
||||
figcaption.appendChild(dom.createRawHTMLSection(payload.caption));
|
||||
figure.appendChild(figcaption);
|
||||
figure.setAttribute('class', `${figure.getAttribute('class')} kg-card-hascaption`);
|
||||
}
|
||||
|
||||
return figure;
|
||||
|
|
|
@ -102,6 +102,7 @@ module.exports = {
|
|||
let figcaption = dom.createElement('figcaption');
|
||||
figcaption.appendChild(dom.createRawHTMLSection(payload.caption));
|
||||
figure.appendChild(figcaption);
|
||||
figure.setAttribute('class', `${figure.getAttribute('class')} kg-card-hascaption`);
|
||||
}
|
||||
|
||||
return figure;
|
||||
|
|
|
@ -33,6 +33,7 @@ module.exports = {
|
|||
let figcaption = dom.createElement('figcaption');
|
||||
figcaption.appendChild(dom.createRawHTMLSection(payload.caption));
|
||||
figure.appendChild(figcaption);
|
||||
figure.setAttribute('class', `${figure.getAttribute('class')} kg-card-hascaption`);
|
||||
}
|
||||
|
||||
return figure;
|
||||
|
|
|
@ -67,6 +67,6 @@ describe('Embed card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-card kg-embed-card">Testing<figcaption><strong>Caption</strong></figcaption></figure>');
|
||||
serializer.serialize(card.render(opts)).should.match('<figure class="kg-card kg-embed-card kg-card-hascaption">Testing<figcaption><strong>Caption</strong></figcaption></figure>');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -74,7 +74,7 @@ describe('Gallery card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo01-9.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo02-10.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo03-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo04-7.jpg" width="3200" height="1600" alt="Alt test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo05-4.jpg" width="3200" height="1600" title="Title test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo06-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo07-5.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo09-8.jpg" width="3200" height="1600"></div></div></div><figcaption>Test caption</figcaption></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo01-9.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo02-10.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo03-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo04-7.jpg" width="3200" height="1600" alt="Alt test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo05-4.jpg" width="3200" height="1600" title="Title test"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo06-6.jpg" width="3200" height="1600"></div></div><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo07-5.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo09-8.jpg" width="3200" height="1600"></div></div></div><figcaption>Test caption</figcaption></figure>');
|
||||
});
|
||||
|
||||
it('renders nothing with no images', function () {
|
||||
|
@ -136,6 +136,6 @@ describe('Gallery card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo01-9.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo03-6.jpg" width="3200" height="1600"></div></div></div><figcaption>Test caption</figcaption></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo01-9.jpg" width="3200" height="1600"></div><div class="kg-gallery-image"><img src="/content/images/2018/08/NatGeo03-6.jpg" width="3200" height="1600"></div></div></div><figcaption>Test caption</figcaption></figure>');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -28,7 +28,7 @@ describe('Image card', function () {
|
|||
}
|
||||
};
|
||||
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card"><img src="https://www.ghost.org/image.png" class="kg-image"><figcaption><b>Test caption</b></figcaption></figure>');
|
||||
serializer.serialize(card.render(opts)).should.eql('<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.ghost.org/image.png" class="kg-image"><figcaption><b>Test caption</b></figcaption></figure>');
|
||||
});
|
||||
|
||||
it('renders an image with alt text', function () {
|
||||
|
|
|
@ -57,7 +57,7 @@ describe('Mobiledoc converter', function () {
|
|||
]
|
||||
};
|
||||
|
||||
converter.render(mobiledoc, 2).should.eql('<p>One<br>Two</p><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<p>Three</p><hr><figure class="kg-card kg-image-card kg-width-wide"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image"><figcaption>Birdies</figcaption></figure><p>Four</p><h2>HTML card</h2>\n<div><p>Some HTML</p></div><figure class="kg-card kg-embed-card"><h2>Embed card</h2></figure><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"></div></figure>');
|
||||
converter.render(mobiledoc, 2).should.eql('<p>One<br>Two</p><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<p>Three</p><hr><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image"><figcaption>Birdies</figcaption></figure><p>Four</p><h2>HTML card</h2>\n<div><p>Some HTML</p></div><figure class="kg-card kg-embed-card"><h2>Embed card</h2></figure><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"></div></figure>');
|
||||
});
|
||||
|
||||
it('removes final blank paragraph', function () {
|
||||
|
|
Loading…
Add table
Reference in a new issue