Archived topic
translatepress cover image change
6 replies · Started by Jusung on February 8, 2023
Hello. I am trying to trnaslate my site now, but a problem is that I can't change the cover image.
What I know is that I have to change the cover image by adding CSS.
So, I tried to give different class and used this code
class: custom-cover1 custom-cover2 custom-cover3 custom-cover4
body.translatepress-en_US, body.custom-cover {url("aaa");}
Like this. I used right url instead of aaa.
On the link, you can see 4 images in line and it has hover effect. that is why I used cover image.
CAn you help with this?
Hi Jusung,
The 4 images inline are actual images not background image, so you can not simply use CSS to replace them.
But you can add the translated version of the image below the Korean version, then use CSS to hide one of them depending on the language.
Once the new images are added, we can take another look and write CSS :)
Oh I get it. So you are saying make the samething and hide it depending on the language.
I have given class
for korean, custom-kr
for engish, custom-en
Hi Jusung,
Yes, that's what Ying is suggesting. Add another Image Block, and then hide or show it depending on the language.
Your initial idea of using a background image would be good as well but you'll need to change your structure for this.
There must be 2 images for hover effect. but I can't use 2 image block cuz it can't be used in the same place. So, one image must be on the background for hover effect as far as I know.. I don't get how I can use another image block.
I gave class to the container. In this way, I can't use hide or show using the container class..?
It seems to work now!
I just gave class to container and used display: none; in differetn languages.
Thank you!!
Glad you've made it work :)