✨Added Koenig gallery card support (#475)
no issue - Update CSS and JS for new gallery card - Updates CSS to support new gallery card - Adds JS to support grid layout for gallery view - Fix gallery breakout size - Refining styles for gallery card
This commit is contained in:
parent
a0e42e0599
commit
7a88c88ea2
4 changed files with 46 additions and 4 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1855,11 +1855,13 @@ Usage (In Ghost editor):
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-image-card {
|
.kg-image-card,
|
||||||
|
.kg-gallery-card {
|
||||||
margin: 0 0 1.5em;
|
margin: 0 0 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-image-card figcaption {
|
.kg-image-card figcaption,
|
||||||
|
.kg-gallery-card figcaption {
|
||||||
margin: -1.0em 0 1.5em;
|
margin: -1.0em 0 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1891,6 +1893,34 @@ Usage (In Ghost editor):
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.kg-gallery-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 1.5em auto;
|
||||||
|
max-width: 1040px;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-gallery-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-gallery-image img {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-gallery-row:not(:first-of-type) {
|
||||||
|
margin: 0.75em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kg-gallery-image:not(:first-of-type) {
|
||||||
|
margin: 0 0 0 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
/* 8. Author Template
|
/* 8. Author Template
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
12
default.hbs
12
default.hbs
|
@ -55,6 +55,18 @@
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var images = document.querySelectorAll('.kg-gallery-image img');
|
||||||
|
images.forEach(function (image) {
|
||||||
|
var container = image.closest('.kg-gallery-image');
|
||||||
|
var width = image.attributes.width.value;
|
||||||
|
var height = image.attributes.height.value;
|
||||||
|
var ratio = width / height;
|
||||||
|
container.style.flex = ratio + ' 1 0%';
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
|
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
|
||||||
<script
|
<script
|
||||||
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||||
|
|
Loading…
Reference in a new issue