Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding images (background and img tag)? #89

Open
ajmas opened this issue Apr 23, 2024 · 2 comments
Open

Adding images (background and img tag)? #89

ajmas opened this issue Apr 23, 2024 · 2 comments

Comments

@ajmas
Copy link

ajmas commented Apr 23, 2024 •
edited
Loading

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
Copy link

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 paulwer mentioned this issue Jun 19, 2024
Open
@paulwer
Copy link
Contributor

paulwer commented Jun 19, 2024

I've added this already, please check :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ajmas @misaka0508 @paulwer