For the past few years I have used gifs on my anime & manga lists both in the Cover Image & Background Image, like this one for example. About a week or so ago, I noticed that they were no longer animated (as you can see here on my list's cover image). I've tried reuploading them and stuff, but even though the "preview" button will show them animating correctly, they are static upon saving the changes.
I hope this feature hasn't been removed since I really liked having an animated cover image, but if there is a workaround or fix or something then I would like to know. However if it's been purposely removed, I think it should warn you on uploading a gif that it won't be supported.
I'm currently editing my anime list and the GIF on my banner also became static. It was working before. All my other GIFs like on the background and linked to tags are all working. It's just the banner that isn't. That same GIF is working just fine in my profile page's Classic About Me Design (I'm currently using the Modern About Me Design but I checked the Classic one for a while).
I've yet to edit my manga list again... All the GIFs are working there for now since I haven't touched the code again.
I checked OP's list and their GIF banner is indeed not animating.
I'm currently editing my anime list and the GIF on my banner also became static. It was working before. All my other GIFs like on the background and linked to tags are all working. It's just the banner that isn't. That same GIF is working just fine in my profile page's Classic About Me Design (I'm currently using the Modern About Me Design but I checked the Classic one for a while).
I've yet to edit my manga list again... All the GIFs are working there for now since I haven't touched the code again.
I checked OP's list and their GIF banner is indeed not animating.
Also looking for a fix...
@IridescentJaune Maybe its only uploaded GIFs, I havent tested this tho
This should be a temporary fix to the GIFs not loading for Cover Image and Wallpaper uploads!
1. Go to page where you uploaded your cover image and/or wallpaper GIFs
2. Paste the Replace Cover Image/Banner codes below into the "add custom CSS" box outlined in the pic linked below. You may have to refresh the page to get the box and open it. https://imgur.com/jQACt1P
If you need to replace the wallpaaper GIFs, use this wallpaper code, but only if you are trying to use an animated GIF on the wallpaper. Otherwise you can ignore it
3. Now go to this site https://imgbb.com/
Upload your Cover Image GIF, and then copy the Direct Link. Paste that into the parenthesis under .cover-block .image-container {
this should replace https://imgur.com/U23F3Kc.gif
4. Save and it should let you customize your Cover Image this way with a working GIF. In the video below you can see an example.
You can do the same replacing the wallpaper GIF, replace the Imgur link in parenthesis under body{
with a direct link from your imgbb upload
You may also need to adjust the background size and no repeat depending on the GIF, ask if needing help. I did an example in the video. Less background size reduces the size of the GIF, 100% has it fill its entire container. Changing no-repeat
to repeat
causes the GIF to repeat all over. Adjusting the Wallpaper GIF's background-size and changing the repeat setting may be needed if you have wallpaper GIFs. See video or code pasted below for example.
@Shishio-kun Thanks! It worked. My GIF banner is dynamic again.
I tried to reupload my GIF. I had already removed it in my local files, good thing I saved it in my Drive. π It's animating properly on the edit screen but not after uploading. Anyways, your fix worked.
@Shishio-kun Thanks! It worked. My GIF banner is dynamic again.
I tried to reupload my GIF. I had already removed it in my local files, good thing I saved it in my Drive. π It's animating properly on the edit screen but not after uploading. Anyways, your fix worked.
This should be a temporary fix to the GIFs not loading for Cover Image and Wallpaper uploads!
1. Go to page where you uploaded your cover image and/or wallpaper GIFs
2. Paste the Replace Cover Image/Banner codes below into the "add custom CSS" box outlined in the pic linked below. You may have to refresh the page to get the box and open it. https://imgur.com/jQACt1P
If you need to replace the wallpaaper GIFs, use this wallpaper code, but only if you are trying to use an animated GIF on the wallpaper. Otherwise you can ignore it
3. Now go to this site https://imgbb.com/
Upload your Cover Image GIF, and then copy the Direct Link. Paste that into the parenthesis under .cover-block .image-container {
this should replace https://imgur.com/U23F3Kc.gif
4. Save and it should let you customize your Cover Image this way with a working GIF. In the video below you can see an example.
You can do the same replacing the wallpaper GIF, replace the Imgur link in parenthesis under body{
with a direct link from your imgbb upload
You may also need to adjust the background size and no repeat depending on the GIF, ask if needing help. I did an example in the video. Less background size reduces the size of the GIF, 100% has it fill its entire container. Changing no-repeat
to repeat
causes the GIF to repeat all over. Adjusting the Wallpaper GIF's background-size and changing the repeat setting may be needed if you have wallpaper GIFs. See video or code pasted below for example.
This should be a temporary fix to the GIFs not loading for Cover Image and Wallpaper uploads!
1. Go to page where you uploaded your cover image and/or wallpaper GIFs
2. Paste the Replace Cover Image/Banner codes below into the "add custom CSS" box outlined in the pic linked below. You may have to refresh the page to get the box and open it. https://imgur.com/jQACt1P
If you need to replace the wallpaaper GIFs, use this wallpaper code, but only if you are trying to use an animated GIF on the wallpaper. Otherwise you can ignore it
3. Now go to this site https://imgbb.com/
Upload your Cover Image GIF, and then copy the Direct Link. Paste that into the parenthesis under .cover-block .image-container {
this should replace https://imgur.com/U23F3Kc.gif
4. Save and it should let you customize your Cover Image this way with a working GIF. In the video below you can see an example.
You can do the same replacing the wallpaper GIF, replace the Imgur link in parenthesis under body{
with a direct link from your imgbb upload
You may also need to adjust the background size and no repeat depending on the GIF, ask if needing help. I did an example in the video. Less background size reduces the size of the GIF, 100% has it fill its entire container. Changing no-repeat
to repeat
causes the GIF to repeat all over. Adjusting the Wallpaper GIF's background-size and changing the repeat setting may be needed if you have wallpaper GIFs. See video or code pasted below for example.
@Shishio-kun My GIF banner doesn't cover the entire cover block. I don't like to resize/enlarge the GIF as the resolution won't look that good when enlarged; I'm thinking of just making the white background/container transparent instead. How can I make the white container a bit transparent? I tried changing the opacity to 0.5 on the code/fix previously provided but I can't seem to make it work properly as the GIF becomes jittery or also turns transparent. I want the GIF to animate on top of a white transparent container (like background-color: rgba(255, 255, 255, 0.5);)
@Shishio-kun My GIF banner doesn't cover the entire cover block. I don't like to resize/enlarge the GIF as the resolution won't look that good when enlarged; I'm thinking of just making the white background/container transparent instead. How can I make the white container a bit transparent? I tried changing the opacity to 0.5 on the code/fix previously provided but I can't seem to make it work properly as the GIF becomes jittery or also turns transparent. I want the GIF to animate on top of a white transparent container (like background-color: rgba(255, 255, 255, 0.5);)
you could install them with the desired color I think that would work, or open the list in Firefox and right click Inspect Element the container, change colors, copy the code, and continue on other parts until its the color/transparency you want. There's multiple containers there I think that need to be adjusted. You can temporarily display: none a container to move it out of the way and see whats behind it
you could install them with the desired color I think that would work, or open the list in Firefox and right click Inspect Element the container, change colors, copy the code, and continue on other parts until its the color/transparency you want. There's multiple containers there I think that need to be adjusted. You can temporarily display: none a container to move it out of the way and see whats behind it
I tried to change the rgba in my current layout but I can't seem to achieve a white transparent container. I tested before asking but I couldn't make it work so here I am... π Not sure if it conflicts with the fix/code for the GIF banner.
I might just edit the GIF to have something on both sides to completely cover the entire width of the container so I wouldn't have to be bothered looking at the white container like how it is right now...
I'll try to play around with the codes from https://pastebin.com/raw/c3rQE9R7 but I can't edit my list for now since I'm stuck on "Polishing inside of screen..." I tried with the other templates but I'm still stuck.
---
Hope there's gonna be a tutorial about opacity in the future. Hehe.
@Shishio-kun I could edit again... Been stuck on "Polishing inside of screen..." yesterday so I gave it a rest. Anyhow, I injected that in my layout and it worked! Thank you so much! I really appreciate your help. Now, I don't have to edit the GIF. Hehe.
I also changed the padding a bit on your previous code for my GIF. I'm pretty much content with how it looks.
BTW, I checked if my uploaded GIF banner could animate normally again without your fix/code and it seems it's still broken for MAL. So I'm thankful for your code. MAL should fix that for everyone, though.
@Shishio-kun I could edit again... Been stuck on "Polishing inside of screen..." yesterday so I gave it a rest. Anyhow, I injected that in my layout and it worked! Thank you so much! I really appreciate your help. Now, I don't have to edit the GIF. Hehe.
I also changed the padding a bit on your previous code for my GIF. I'm pretty much content with how it looks.
BTW, I checked if my uploaded GIF banner could animate normally again without your fix/code and it seems it's still broken for MAL. So I'm thankful for your code. MAL should fix that for everyone, though.
This should be a temporary fix to the GIFs not loading for Cover Image and Wallpaper uploads!
1. Go to page where you uploaded your cover image and/or wallpaper GIFs
2. Paste the Replace Cover Image/Banner codes below into the "add custom CSS" box outlined in the pic linked below. You may have to refresh the page to get the box and open it. https://imgur.com/jQACt1P
If you need to replace the wallpaaper GIFs, use this wallpaper code, but only if you are trying to use an animated GIF on the wallpaper. Otherwise you can ignore it
3. Now go to this site https://imgbb.com/
Upload your Cover Image GIF, and then copy the Direct Link. Paste that into the parenthesis under .cover-block .image-container {
this should replace https://imgur.com/U23F3Kc.gif
4. Save and it should let you customize your Cover Image this way with a working GIF. In the video below you can see an example.
You can do the same replacing the wallpaper GIF, replace the Imgur link in parenthesis under body{
with a direct link from your imgbb upload
You may also need to adjust the background size and no repeat depending on the GIF, ask if needing help. I did an example in the video. Less background size reduces the size of the GIF, 100% has it fill its entire container. Changing no-repeat
to repeat
causes the GIF to repeat all over. Adjusting the Wallpaper GIF's background-size and changing the repeat setting may be needed if you have wallpaper GIFs. See video or code pasted below for example.
@Shishio-kun Didn't know I was tagged, but I chose to just use backgrounds from Google since I don't really mess with the code things in the anime/manga list on here.
Shishio-kun said: I dont even know what was going on here anymore, but if there's no issues then, good! π
Basically what the title of the forum says plus your reply on November 12th, 2023 had me tagged in it, which I didn't know since I don't have notifications on for forum stuff, (that and I also don't ever bother checking to see if anyone replies to me on here), so I was just replying back saying that I just chose to use backgrounds from Google instead of trying to figure out how to make GIFs work on my anime & manga lists. So yep, that's pretty much all I was saying.
This should be a temporary fix to the GIFs not loading for Cover Image and Wallpaper uploads!
1. Go to page where you uploaded your cover image and/or wallpaper GIFs
2. Paste the Replace Cover Image/Banner codes below into the "add custom CSS" box outlined in the pic linked below. You may have to refresh the page to get the box and open it. https://imgur.com/jQACt1P
If you need to replace the wallpaaper GIFs, use this wallpaper code, but only if you are trying to use an animated GIF on the wallpaper. Otherwise you can ignore it
3. Now go to this site https://imgbb.com/
Upload your Cover Image GIF, and then copy the Direct Link. Paste that into the parenthesis under .cover-block .image-container {
this should replace https://imgur.com/U23F3Kc.gif
4. Save and it should let you customize your Cover Image this way with a working GIF. In the video below you can see an example.
You can do the same replacing the wallpaper GIF, replace the Imgur link in parenthesis under body{
with a direct link from your imgbb upload
You may also need to adjust the background size and no repeat depending on the GIF, ask if needing help. I did an example in the video. Less background size reduces the size of the GIF, 100% has it fill its entire container. Changing no-repeat
to repeat
causes the GIF to repeat all over. Adjusting the Wallpaper GIF's background-size and changing the repeat setting may be needed if you have wallpaper GIFs. See video or code pasted below for example.