Thank you so much for the time and effort you’ve put into this guide!
Do you happen to know where the 21:9 Wide cover image (under Metadata > Promo images) ends up being used?
I couldn’t see it in use on any of the featured releases on the itch homepage, and the background for those seems to be a blurred version of the project’s first screenshot.
I don't know for certain how it's used. There's nothing directly stated in Itch's documentation about it, and I've never seen anywhere it's clearly put to use.
There are random comments (reddit, the forums, github, etc.) that suggest it is supposed to be used for featuring the game on the homepage (https://github.com/itchio/itch.io/issues/614) and Lemon Cosmos's guide (https://lemoncosmos.itch.io/easy-releasy) says that it's the blurred out background image the video and screenshots are displayed over, but I haven't seen anything confirm that.
If you inspect the background image on the homepage it does indeed look like there is sometimes a separate image used for that background. If it's true that the Wide Cover image you upload is for that blurry background image, I suspect there's some kind of fallback where it'll use the Wide Cover if you upload one, but it'll use one of your screenshots if you don't. Note that it is possible for a game featured on the homepage to not have a background image on the homepage banner; there's a game called dasOS_ that's been featured recently that has no images uploaded to it, and the homepage featured banner for it doesn't include a background image.
I believe if you add a gif to your description field it SHOULD play automatically. As for the screenshots (the images in the right-hand column of the game page,) I'm not seeing those play automatically in the example you linked to when I use Firefox, Chrome, or Edge. For me, the screenshots only play when I click on them and view them at their original size. What browser are you using that is showing them as playing even when you haven't clicked on them.
Looking at the example you shared, it looks like itch may now be using a CDN to dynamically re-scale and compress the screenshots on upload. While this helps with the page load performance, it may be having the unintended side effect of removing the gif animation because it's just taking the first frame of the gif when it cuts the scaled down version.
This IS different behavior from how itch handled screenshots back when I first wrote my guide. Originally, itch just reduced the screenshot's height and width, but still loaded the original image.
It's possible itch only has the CDN step in if the image exceeds a certain size, which would explain why you might see animated gifs showing up as screenshots on some game pages. I'll have to do more digging to confirm that though.
Hey there! "Edit theme" is accessed from viewing your game's page while signed into your account (rather than by editing your game from the Dashboard.)
If you are potentially interested in adding it to a resource website https://verzatiledevorg.github.io/Itchio_HandBook/docs/GettingStarted do let me know, trying to add knowledgable people together in one place and section. :) and your article would be a good fit if of course you would like to.
Question: Has the "banner replaces the title" part changed since this was published? On this very page, I believe I'm seeing both the banner and the title.
Absolutely did! I spent most of yesterday setting up my game's page to release it that evening, and I had this tab open the whole time, haha. It was very useful!
This is a phenomenal guide! I appreciate it SO SO MUCH! I was wondering, though— could you possibly tell me what kind of CSS you used to get the collections on your profile page to have their own separate containers? It looks really nice, and I'd like to set it up on my own profile.
The profile sections each have a div with the assigned class .inner_column. These sections are profile_header, profile_content, purchased_games, and collections. Collections is further divided into a separate row (class="collection_row") for each collection you display, and there is a child div with class .inner_column within each row.
I meant to do a styling guide at one point, but it ended up on the back-burner, and I just haven't had the time to get back to it.
Here's the custom CSS I'm using on my profile page at the moment:
I think Itch may have changed something about it's banner sizing. The 960px is resulting in blurry banners for me now. It seems like the default banner size on my desktop seems to be 1200px, in case you want to update this very helpful guide!
← Return to tool
Comments
Log in with itch.io to leave a comment.
Thank you so much for the time and effort you’ve put into this guide!
Do you happen to know where the 21:9 Wide cover image (under Metadata > Promo images) ends up being used?
I couldn’t see it in use on any of the featured releases on the itch homepage, and the background for those seems to be a blurred version of the project’s first screenshot.
I don't know for certain how it's used. There's nothing directly stated in Itch's documentation about it, and I've never seen anywhere it's clearly put to use.
There are random comments (reddit, the forums, github, etc.) that suggest it is supposed to be used for featuring the game on the homepage (https://github.com/itchio/itch.io/issues/614) and Lemon Cosmos's guide (https://lemoncosmos.itch.io/easy-releasy) says that it's the blurred out background image the video and screenshots are displayed over, but I haven't seen anything confirm that.
If you inspect the background image on the homepage it does indeed look like there is sometimes a separate image used for that background. If it's true that the Wide Cover image you upload is for that blurry background image, I suspect there's some kind of fallback where it'll use the Wide Cover if you upload one, but it'll use one of your screenshots if you don't. Note that it is possible for a game featured on the homepage to not have a background image on the homepage banner; there's a game called dasOS_ that's been featured recently that has no images uploaded to it, and the homepage featured banner for it doesn't include a background image.
Thanks so much for the info!
Sure thing! Sorry I wasn't able to give you a more definitive answer.
Haha nice!
Really helpful! Thanks!
Thanks!
merci
Awesome. Thanks!
I tend to forget. Thanks!
Some pages seem to include GIF screenshots where the GIF is automatically playing even without opening it (example).
Do you know how that is done?
Hi, you can upload gif files as screenshots or in the description panel, they will play out !
I believe if you add a gif to your description field it SHOULD play automatically. As for the screenshots (the images in the right-hand column of the game page,) I'm not seeing those play automatically in the example you linked to when I use Firefox, Chrome, or Edge. For me, the screenshots only play when I click on them and view them at their original size. What browser are you using that is showing them as playing even when you haven't clicked on them.
Based on this forum post from a couple months ago (https://itch.io/t/5369196/gifs-suddenly-not-animating?after=40#post-15034429) it's likely there was a change in how the Screenshots are handled.
Looking at the example you shared, it looks like itch may now be using a CDN to dynamically re-scale and compress the screenshots on upload. While this helps with the page load performance, it may be having the unintended side effect of removing the gif animation because it's just taking the first frame of the gif when it cuts the scaled down version.
For example, the first screenshot (the one with the stairs) is using this version of the image when viewing the game page, and despite having the filename ending in .gif it's actually detected as being a PNG: https://img.itch.zone/aW1hZ2UvNzk2Njc3LzQ3MzYzNTYuZ2lm/347x500/JG2P1K.gif
But it's using a different file flagged as "original" when you click on it: https://img.itch.zone/aW1hZ2UvNzk2Njc3LzQ3MzYzNTYuZ2lm/original/Bx6UEF.gif
This IS different behavior from how itch handled screenshots back when I first wrote my guide. Originally, itch just reduced the screenshot's height and width, but still loaded the original image.
It's possible itch only has the CDN step in if the image exceeds a certain size, which would explain why you might see animated gifs showing up as screenshots on some game pages. I'll have to do more digging to confirm that though.
how do I replace the left side cover img which automatically show up? I can't find the option that can edit it.
and that cover is not belong to my game.
Hey. Sorry for the delay in getting back to you on this. What page is that screenshot from? Is it a ranking page for a game jam?
This is the cover I'm currently seeing for your game when viewing it ion your creator page:
How do I use "edit theme"? It doesn't appear on mine.
Hey there! "Edit theme" is accessed from viewing your game's page while signed into your account (rather than by editing your game from the Dashboard.)
Oh, I see. Thank you very much!
The limits for the background image on itch.io are 3840x2160px
If you are potentially interested in adding it to a resource website https://verzatiledevorg.github.io/Itchio_HandBook/docs/GettingStarted do let me know, trying to add knowledgable people together in one place and section. :) and your article would be a good fit if of course you would like to.
Thank you for this!!
Question: Has the "banner replaces the title" part changed since this was published? On this very page, I believe I'm seeing both the banner and the title.
Hey there! Good question!
No, that has not changed; the title you are seeing on this page is text I have entered directly into the Description field.
Ah, I see! Thanks for the clarification :)
Sure thing! Hope you found the guide useful. I do need to go through and give it a refresh sometime soon.
Absolutely did! I spent most of yesterday setting up my game's page to release it that evening, and I had this tab open the whole time, haha. It was very useful!
SO helpful for new creators, thank you so much for this guide!!
Thank you for the templates + explanations!
Absolutely appreciate these templates! I'm not making my items in photoshop or affinity, so I'm lying my way to victory through CSP. You're a gem! <3
Nice stuff
Excellent reference template.
This was extremely useful in publishing my own story, thank you so much!
Perfect!! So so useful thanks!
Thank you so much for this! Fantastic resource!
This is a phenomenal guide! I appreciate it SO SO MUCH!
I was wondering, though— could you possibly tell me what kind of CSS you used to get the collections on your profile page to have their own separate containers? It looks really nice, and I'd like to set it up on my own profile.
It's been a while since I've messed with it.
The class you're looking for is .inner_column.
The profile sections each have a div with the assigned class .inner_column. These sections are profile_header, profile_content, purchased_games, and collections. Collections is further divided into a separate row (class="collection_row") for each collection you display, and there is a child div with class .inner_column within each row.
I meant to do a styling guide at one point, but it ended up on the back-burner, and I just haven't had the time to get back to it.
Here's the custom CSS I'm using on my profile page at the moment:
.game_grid_widget {
text-align: left; !IMPORTANT!
}
.game_thumb {
border: solid #000 1px;
}
.inner_column {
background: #EDD5BE;
border: #271C14 solid;
padding: 50px 50px 30px 50px;
border-radius: 25px;
}
.footer {
background: #333;
border-top: #271C14 solid;
color: #fff;
}
.game_column::before {
content: "My Games";
font-size: 1.5em;
font-family: '04b_03',Lato,LatoExtended,sans-serif;
margin: 0 0 10px 0;
font-weight: bold;
display: block;
}
Really useful! Thanks for putting this together!
Very useful page! Thank you!
I think Itch may have changed something about it's banner sizing. The 960px is resulting in blurry banners for me now. It seems like the default banner size on my desktop seems to be 1200px, in case you want to update this very helpful guide!
Thanks for the heads up, I haven't fiddled with itch styling for a while. I'll take a look!