Content Image
So… what is TikTok?
When founded in 2016 by two former employees from ByteDance (previously known as Musical.ly), TikTok was a platform for short-form video content only. Since then TikTok has now developed into a search engine-like platform for short and long-form video content, as well as images.
TikTok is a platform for user-generated content. This means that each user creates a different kind of content, making TikTok very personal. However, this also means that there is no pre-existing audience that the creator has to appeal to. Instead, they need to build up a following based on quality content and engagement.
Users can upload a video up to 10 minutes long which will then be fed onto other people’s ‘For You Pages’- a totally unique feed for each user built by TikTok’s algorithm. The platform itself is incredibly addictive and fun to use. This is because it focuses heavily on content rather than text. Users don’t write long posts, instead, they create videos containing only audio clips, pictures, stickers and filters. Once uploaded, these videos are then shared across the TikTok community and viewed by thousands of people within just hours.
TikTok has become a gold mine for advertisers, with in-feed ads allowing them to get their products in front of a highly engaged audience and TikTok Shop making the purchase journey simple.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-content-image {
padding-top: rem-calc(10);
padding-bottom: rem-calc(10);
.col-left,
.col-right {
display: flex;
flex-direction: column;
align-items: center;
}
.content-col {
max-width: rem-calc(530);
margin: 0 auto;
@include padding-top(rem-calc(100));
padding-bottom: 0;
@include bp($lg) {
@include padding-bottom(rem-calc(100));
}
.accordion {
margin-top: 2rem;
}
}
picture {
height: 100%;
display: flex;
flex-direction: column;
border-radius: rem-calc(13);
overflow: hidden;
aspect-ratio: 1/1;
width: 100%;
img {
height: 100%;
object-fit: cover;
width: 100%;
aspect-ratio: 1/1;
}
}
.accordion{
&-content{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
.content-container{
padding-top: 0.5rem;
}
}
&-item{
padding-bottom: 1rem;
margin-bottom: 1rem;
}
&-trigger{
border: 0;
padding-top: 0;
padding-bottom: 0;
background: transparent;
&.is-open{
opacity: 1;
transition: opacity 0.3s ease-in-out;
&::after{
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
}
.h3{
margin-bottom: 0;
}
}
}
}
class ContentImage {
constructor(block) {
this.block = block;
this.init(block);
}
init(block) {
const contentCols = block.querySelectorAll('.content-col');
contentCols.forEach(col => {
const accordionItems = col.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const trigger = item.querySelector('.accordion-trigger');
const content = item.querySelector('.accordion-content');
if(!trigger || !content) {
console.log('No trigger or content found');
return;
}
if (trigger && trigger.classList.contains('is-open')) {
content.style.maxHeight = content.scrollHeight + 'px';
} else {
if(content) {
content.style.maxHeight = null;
}
}
trigger.addEventListener('click', () => {
const isCurrentlyOpen = trigger.classList.contains('is-open');
if (isCurrentlyOpen) {
trigger.classList.remove('is-open');
content.style.maxHeight = null;
} else {
accordionItems.forEach(otherItem => {
const otherTrigger = otherItem.querySelector('.accordion-trigger');
const otherContent = otherItem.querySelector('.accordion-content');
if(!otherTrigger || !otherContent) {
return;
}
otherTrigger.classList.remove('is-open');
otherContent.style.maxHeight = null;
});
trigger.classList.add('is-open');
content.style.maxHeight = content.scrollHeight + 'px';
}
});
});
});
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-content-image').forEach(block => new ContentImage(block));
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/content-image",
"title": "Content & image",
"description": "Content & image block",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-content-image.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": true
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/content-image/block-content-image.css"
}