search

lukin / keywind

Keywind is a component-based Keycloak Login Theme built with Tailwind CSS
Apache License 2.0
734 stars 259 forks source link

Adding images (background and img tag)? #89

Open ajmas opened 2 months ago

ajmas commented 2 months ago

What is the right way to add images, whether to be referenced as an image tag or in CSS? For example, as a background image in the case of CSS or a logo in the page.

For the background I am looking at the documentation, but I am still a little confused, being a tailwind newbie. I suspect the path would be ../images/myimage.png if the image is in a sister folder to the CSS, but I am still not sure on the right entry.

For an img tag I've worked around it by putting the image on another server as accessing by an absolute URL, but ideally I'd like the image to be local to the theme. I've looked at the Keycloak documentation, I am still confused.

Edit: for the last one, it would seem to be (see here), but will need to test later:

<img src="${url.resourcesPath}/img/sample.png" />
misaka0508 commented 2 months ago

I am not a tailwind expert. Here's what I am done, but may not the best way. First put your image to theme/mytheme/login/resources/imgs/myimage.png Just edit theme/mytheme/login/components/atoms/body.ftl Add a style in the body. style="background-image: url('${url.resourcesPath}/imgs/myimage.png')" Here is the body.ftl file may looks like:

<#macro kw>
  <body class="bg-cover bg-center bg-no-repeat flex flex-col items-center justify-center min-h-screen sm:py-16" style="background-image: url('${url.resourcesPath}/imgs/myimage.png')">
    <#nested>
  </body>
</#macro>

You can change the body class to change size or attachment if you want, just check the tailwind document After saving the file, just run the build command. pnpm build And replace the themes. Done. Hope this helps

paulwer commented 2 weeks ago

I've added this already, please check :)