Adjust the OMERO login logo size

Hi,

I want to add a university logo to OMERO login page using:
Name: CONFIG_omero_web_login__logo
Value: ‘https://www.slu.edu/marcom/tools-downloads/imgs/slu-primary-blue-rgb.png
The image itself if 3000 pixel high, and the login page only took part of the image

Is there a way, we can adjust the banner height to allow a bigger logo image to be inserted?

Thx a lot!

Best,
Gang

Hi Gang,

I’m afraid the layout of the page doesn’t dynamically change with the size of the image. And if it were to move the login form down below a 3000-pixel image then most users wouldn’t see the login page at-all without scrolling.
You’ll need to find an image that is a more suitable size. You could simply resize the image you’re using (e.g. this is with it resized to 200 pixels high) or try and find an image that is wider (like some of the logos on the slu.edu site)?

Regards,

Will

If you wish to have complete control over the appearance of the login page, you could take a copy of the current login page template at omero-web/login.html at 90dd8ad0e2d6b5ed83b9f76fde6c0d07a8b7e688 · ome/omero-web · GitHub, customise it as you wish, then save this in a location that your webserver can access. Then you can configure:
omero.web.index_template to set the path to where you’ve saved the template. If you’re interested in trying this, let me know and I can give you more details.

Regards,
Will.

This sounds great to me, thx so much, Will! I will discuss with the owner of this project and see which one he would like to go :slight_smile:

Hi Will,

We would like to customize login index page, could you share some examples? Anything in addition to this document: OMERO.web UI customization — OMERO 5.6.3 documentation

Thx a lot,
Steve

Hi Gang,

OK, I had to remind myself of this set-up as we haven’t documented it anywhere (I think it’s just used internally for idr.openmicroscopy.org).

You need to create a custom html login page. You could start with the html sample below.
Save that to a file e.g. called custom_login.html in a directory that your OMERO.web server can access. Then configure the name of the template, and add the directory to the template_dirs and tell it to use the custom login page:

$ omero config set omero.web.index_template "custom_login.html"
$ omero config append omero.web.template_dirs '"/full/path/to/your/directory"'
$ omero config set omero.web.login_view "webindex_custom"

Then, (after restarting your OMERO.web server) when you go to your OMERO.web index page, you should see the custom login page (the sample below should give you this):

NB: as you can see from the code below, I’ve hidden the select input for choosing the servers. If you want your users to be able to choose a different server than the default, you can show this select but you’ll need to manually add the servers.

If your login fails, you’ll still be redirected to /webclient/login/ and see the original login page with errors etc.

Hope that works,

Will.

{% extends "webgateway/core_html.html" %}
{% load i18n %}

{% block link %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "webclient/css/layout.css"|add:url_suffix %}" type="text/css" />
    <link rel="stylesheet" href="{% static "webgateway/css/ome.login.css"|add:url_suffix %}" type="text/css" />
{% endblock %}

{% block title %}
    {% trans "OMERO.web - Login" %}
{% endblock %}

{% block head %}
    {{ block.super }}
    {% include "webgateway/base/includes/shortcut_icon.html" %}
{% endblock %}

{% block body %}

<div style="margin: auto">
<div class="login-logos">
    <img style="width:300px; height: 400px;"
        src="https://www.slu.edu/marcom/tools-downloads/imgs/slu-primary-blue-rgb.png" />
    <br/>
    <img src="{% static "webclient/image/logo_login_web.png" %}" />
</div>

<div id="login">
    {% block login %}
    <form class="standard_form inlined" action="{% url 'weblogin' %}{% if url %}?{{url}}{% endif %}" method="post">{% csrf_token %}
			
            <select name="server" id="id_server" style="visibility: hidden;">
                <option value="1">default server</option>
            </select>
            <div>
                <label for="id_username" style="visibility: hidden;">Username</label>
                <input placeholder="Username" type="text" name="username" size="22" autofocus="autofocus" maxlength="50" required id="id_username" />
            </div>
            
            <div>
                <label for="id_username" style="visibility: hidden;">Password</label>
                <input placeholder="Password" type="password" name="password" size="22" autocomplete="off" maxlength="50" required id="id_password" />
            </div>


        	<input type="submit" value="Login" />

            <div>
                <p><a href="{% url 'waforgottenpassword' %}">Forgot your password?</a></p>
            </div>
            </div>

    </form>

    {% endblock %}
</div>

<div id="login-footer">
	<p>
		OMERO.web {{ version }}<br/>
		&copy; 2007-{{ build_year }} University of Dundee &amp; Open Microscopy Environment<br/>
		OMERO is distributed under the terms of the GNU GPL.
		For more information, visit <a href="https://www.openmicroscopy.org">openmicroscopy.org</a><br/>

        <img src="{% static 'webgateway/img/OME_logo_grey_110.png' %}"/>
    </p>
</div>
{% endblock %}
1 Like