I am trying to set the header section background of blog post depending on the size of the cover image. I am using the following code:
async function initPage() {
const currentPost = await $w("#post1").getPost();
if (currentPost.coverImage.width >= 980 && currentPost.coverImage.height >= 550 && currentPost.coverImage.width/currentPost.coverImage.height > 1) {
$w('#postHeaderSection').expand();
$w('#postHeaderSection').background.src = currentPost.coverImage.replace(/#[\s\S]*/, "");
$w("#postTitle").text = currentPost.title;
} else if (currentPost.coverImage.width >= 491 && currentPost.coverImage.height >= 660 && currentPost.coverImage.width/currentPost.coverImage.height <= 1) {
$w('#secondPostHeaderSection').expand();
$w('#postHeaderSquare').background.src = currentPost.coverImage.replace(/#[\s\S]*/, "");
$w('#secondPostTitle').text = currentPost.title;
} else {
$w("#titleBox").expand();
}
}
However, the code doesn't seem to work and I'm not sure what could be causing the issue. I noticed that when I log currentPost.coverImage, it returns a string that starts with ("wix:image://v1/nsplsh_d0b1c2e1e12e4eeba81adec5c8605175~mv2.jpg/nsplsh_d0b1c2e1e12e4eeba81adec5c8605175~mv2.jpg#originWidth=4000&originHeight=6000" ) instead of an actual image object. Could this be the reason why the image size check is not working as expected? I've also tried using a simpler version of the code, which works:
async function initPage() {
const currentPost = await $w("#post1").getPost();
$w("#postTitle").text = currentPost.title;
$w("#postHeaderSection").background.src = currentPost.coverImage;
}
If so, how can I properly access the image object to check its size? Any help would be greatly appreciated. Thank you!