Add Image to Login Page

Please how can i add an image to the right alignment of the page

Solution:

```php <x-filament-panels::page.simple> @if (filament()->hasRegistration()) <x-slot name="subheading"> {{ __('filament-panels::pages/auth/login.actions.register.before') }}...

Jump to solution

11 Replies

Matthew•11mo ago

custom css via theme or make your own view and cutomize it however you want

sadiqgoni13OP•11mo ago

this is my custome theme

.fi-simple-main {
    display: flex;
    justify-content: space-between;
}

.fi-simple-main .image-container img {
    max-width: 100%; 
}

.auth-nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 12px !important;
    margin-top: 9px !important;
    margin-right: 20px !important;
    margin-bottom: 2px !important;
    gap: 9px !important;
}

.auth-nav-menu .links {
    margin-right: 4px !important;
}

.fi-simple-layout .fi-simple-main {
    margin-top: 8px !important;
}

.fi-simple-layout .fi-simple-main-ctn {
    display: flex;
    align-items: center; 
    justify-content: center;
}

.fi-simple-main .image-container {
    width: 75%;
    background-image: url('/public/images/zamfaralogo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.fi-simple-main .login-form {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fi-simple-main {
    display: flex;
    justify-content: space-between;
}

.fi-simple-main .image-container img {
    max-width: 100%; 
}

.auth-nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 12px !important;
    margin-top: 9px !important;
    margin-right: 20px !important;
    margin-bottom: 2px !important;
    gap: 9px !important;
}

.auth-nav-menu .links {
    margin-right: 4px !important;
}

.fi-simple-layout .fi-simple-main {
    margin-top: 8px !important;
}

.fi-simple-layout .fi-simple-main-ctn {
    display: flex;
    align-items: center; 
    justify-content: center;
}

.fi-simple-main .image-container {
    width: 75%;
    background-image: url('/public/images/zamfaralogo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.fi-simple-main .login-form {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

how do you customize the view

Matthew•11mo ago

Extend the Login class, and then override the $view vairable to point to your new view

sadiqgoni13OP•11mo ago

great ,now this is my Login Custom

<?php

namespace App\Filament\Pages\Auth;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Toggle;
use Filament\Pages\Auth\Login as BaseLogin;
use Filament\Pages\Page;

 class Login extends BaseLogin
{

    protected static string $view = 'filament.pages.auth.login';

    protected function getRememberFormComponent(): Component
    {
        return Toggle::make('remember')
            ->label(__('filament-panels::pages/auth/login.form.remember.label'));
    }
}

<?php

namespace App\Filament\Pages\Auth;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Toggle;
use Filament\Pages\Auth\Login as BaseLogin;
use Filament\Pages\Page;

 class Login extends BaseLogin
{

    protected static string $view = 'filament.pages.auth.login';

    protected function getRememberFormComponent(): Component
    {
        return Toggle::make('remember')
            ->label(__('filament-panels::pages/auth/login.form.remember.label'));
    }
}

The view

<x-filament-panels::page>

</x-filament-panels::page>

<x-filament-panels::page>

</x-filament-panels::page>

Matthew•11mo ago

nice, from now, you jsut build the page however you want

sadiqgoni13OP•11mo ago

sorry just curious i dont know what to add inside the view

<x-filament-panels::page>

</x-filament-panels::page>

<x-filament-panels::page>

</x-filament-panels::page>

sadiqgoni13OP•11mo ago

Solution

Matthew•11mo ago

<x-filament-panels::page.simple>
    @if (filament()->hasRegistration())
        <x-slot name="subheading">
            {{ __('filament-panels::pages/auth/login.actions.register.before') }}

            {{ $this->registerAction }}
        </x-slot>
    @endif

    {{ \Filament\Support\Facades\FilamentView::renderHook('panels::auth.login.form.before') }}

    <x-filament-panels::form wire:submit="authenticate">
        {{ $this->form }}

        <x-filament-panels::form.actions
            :actions="$this->getCachedFormActions()"
            :full-width="$this->hasFullWidthFormActions()"
        />
    </x-filament-panels::form>

    {{ \Filament\Support\Facades\FilamentView::renderHook('panels::auth.login.form.after') }}
</x-filament-panels::page.simple>

<x-filament-panels::page.simple>
    @if (filament()->hasRegistration())
        <x-slot name="subheading">
            {{ __('filament-panels::pages/auth/login.actions.register.before') }}

            {{ $this->registerAction }}
        </x-slot>
    @endif

    {{ \Filament\Support\Facades\FilamentView::renderHook('panels::auth.login.form.before') }}

    <x-filament-panels::form wire:submit="authenticate">
        {{ $this->form }}

        <x-filament-panels::form.actions
            :actions="$this->getCachedFormActions()"
            :full-width="$this->hasFullWidthFormActions()"
        />
    </x-filament-panels::form>

    {{ \Filament\Support\Facades\FilamentView::renderHook('panels::auth.login.form.after') }}
</x-filament-panels::page.simple>

Matthew•11mo ago

This will give you the original login form From there you can customize however you want

sadiqgoni13OP•11mo ago

Yesss let me customize it by adding the image

sadiqgoni13OP•11mo ago

It works Thankyou

Gaming

Programming

Add Image to Login Page