Welcome page image

Hello, can anyone help with an accessible solution? - I would like to place an image on my welcome page inside the div class .contents.clearfix.body-page under the welcome text but before the bottom buttons.
Thanks!


something like this

At the moment you can only add content above the text… but I just pushed an update that will allow you to add content below because that seems like a reasonable thing to allow. (https://github.com/discourse/discourse/commit/e4ebc303bb8cfaa5e39c22f49cd4419d3ee3f33e).

If you update Discourse in a few hours (via yoursite.com/admin/upgrade) you should get that change and able to add content where you need it.

Screen Shot 2020-09-03 at 11.12.19 PM

Here’s how you do it. In your theme you’ll need to add this to your header.html file:

<script type="text/x-handlebars" data-template-name="/connectors/below-static/custom-login">
  {{#if showLoginButton}} 
    <div class="custom-login-content">
       <!-- Your custom HTML here -->
    </div>
  {{/if}}
</script>

Note that this template is used in multiple places (FAQ page, about page, etc) so if you only want your content visible on the Welcome login page you need to keep the wrapping {{#if showLoginButton}} {{/if}} there.

You can learn more about using plugin outlets to add content to our handlebars templates here: Developer’s guide to Discourse Themes

6 Likes

Hi Kris, I’m using a local discourse instance in Docker for these design changes before I apply them to the live forum - but I can’t access a page called 'example.com/admin/upgrade` as that page doesn’t exist. It also does not exist on our live site either? Am I doing something wrong or is there another upgrade method? I also cant see a way to upgrade from admin/dashboard on the live site?

Hi again Kris. The page you mention above is not available in my test discourse on docker or my live discourse. Can you help?
Cheers

Are you running in a subfolder? How were these instances installed?

Every discourse instance should have an /admin/upgrade URL, but if you aren’t an administrator it won’t be accessible to you.

2 Likes

Hi Stephen,
I am admin, trust level 4 moderator on both instances.
The local instance was installed using docker in the directory: Users/my-local-user-account(admin)/documents/discourse-test. I need to update discourse here first so I can build the login test page.
I am not sure how the live site was installed (it predates me) but it can be found at https://lifeevents.digital.gov.au

Sorry, are you admin and TL4?

Is docker-manager enabled in your app.yml as a plugin?

Are you sure the local install isn’t a development install?

1 Like

yep admin and TL4 on both
no plug-ins installed on local instance
not sure about dev install - it was done like this:# Running discourse locally for testing

The quickest way is to use docker.

Step1: Install Docker

You can install docker directly from the website

You can install from here: Docker Hub

Check if downloaded successfully

To see if docker downloaded successfully, you can type in docker -v in your terminal and it will tell you which version you are running.

Step 2: Make discourse folder

I recommend making a folder in your Documents or wherever else you prefer. Use the following to do so.

cd ~/Documents
mkdir discourse-test
cd discourse-test
curl -sSL https://raw.githubusercontent.com/bitnami/bitnami-docker-discourse/master/docker-compose.yml > docker-compose.yml
docker-compose up -d

Step 3: Update /etc/hosts file

We need to add the following line of text to the bottom of /etc/hosts file.
127.0.0.1 www.example.com

First open up the file using nano editor, you will be prompted for your password

sudo nano /etc/hosts

Then add this text to the bottom of the file: 127.0.0.1 www.example.com

Then to save this setting, press ctrl+x then y then return key

Step 4: Opening locally

You should now be able to open up a browser and go to www.example.com for a test instance of discourse.

Username: user

password: bitnami123

Useful commands for docker

Stop discourse (make sure you are in the ~/Documents/discourse-test directory):

docker-compose stop

Start discourse (make sure you are in the ~/Documents/discourse-test directory):

docker-compose up -d

Remove containers (make sure you are in the ~/Documents/discourse-test directory):

docker-compose down -v

Remove images (containers will need to be removed first):

docker rmi $(docker images -q)

Ok, so you’re using the Bitnami install, which is a third-party package. I’m afraid we can’t offer any support for that here. I’m tagging this topic as an #unsupported-install

The only supported installations are the official standard install or for developers running locally the #dev-install.

You will need to reach out to Bitnami if you want help with that install, or take a backup and restore it to an officially supported installation.

ok so that’s the local install… I will investigate a standard install. I agree that install isnt standard.
As for the live site - the admin/upgrade page isn’t available on the live site either? I wouldnt tag this as unsupported install as the enquiry was for both instances?

Then it’s possible it’s also Bitnami, and the same will apply there. If it isn’t then that means docker-manager has been disabled, which is also really pretty necessary. I’ll leave it to you to investigate that installation - you can always update us at a later date.

Your problems illustrate why we can’t offer support for third party packages. If they don’t behave in an intended way and lack important functions such as the web updater, then the package maintainer has to be the one to provide support.

Honestly there aren’t really any good reasons to use that package. You’re nearly always going to be better off using the official installation.

2 Likes

I understand your frustration with third party packages but I’m just a designer looking to get something done and it was the option provided to me by the Dev who I have had limited access to - I’m not a developer.

I will look into the live discourse instance and post back later - thanks for your assistance and apologies for confusing the request by bundling to install instances into one thread

It’s not a problem, and it’s not a frustration for us - but I can understand that it might confuse or frustrate users who are asking for help.

We provide a lot of free support here, so have to do something to keep the scope of said support reasonably focused. There are some very creative people doing :sparkles: awesome :sparkles: things with Discourse, and helping facilitate that can be pretty rewarding. Having to support unofficial images would increase the burden of said support exponentially, to the detriment of everything else.

1 Like

this is great! if I wanted to add content to the left or the right of the login text div, would that mean a new plugin-outlet needed to be created or is it best achieved by adding CSS attributes?

secondly im assuming this is also possible to add in header.html of a theme component but just wanted to double check

Thanks!

1 Like

I’ve been trying to get this solution to work, but for some reason the showLoginButton is never seen as true. My test site is set to private, and when I hit /login the button is on the page. I tried logging the value of showLoginButton and it’s returning as undefined.

If I swap if for unless it seems to work fine. Any ideas on what the issue is would be appreciated.

<script type="text/x-handlebars" data-template-name="/connectors/below-static/custom-login">
  {{#unless showLoginButton}} 
    <div class="custom-login-content">
       <h1>test</h1>
    </div>
  {{/unless}}
</script>
1 Like