Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud Version 5.3.13
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Fruity
==================
Hello,

I was wondering if is possible to add an image to the survey title section?

I have tried to use: 
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}

but this did not work.

Any help would be appreciated!

 

Define "did not work". Where did you place that code. Did the image show with an incorrect path? Where is the image on the server?

Hello,

Did not work as in no image appeared in/next to/around the survey title.

I placed the code in welcome.twig

The image on my server is just in my "pictures" folder. I replaced the ./files/myfile.png with the image name but did not change the 'alt-text for my file' or the "class". I am sure I am doing something wrong here.

{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}

Thank you.

With this line below the survey name <h1></h1>
{{ image('./files/Google_logo.png', 'This is my alternative text', {"class": "logo  img-responsive center-block"}) }}       

I got this


If you see something like this
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
it is obvious that "myfile" and "myclass" are placeholders for your real filename and the class(es) you want to use

The classes I used here "img-responsive", "center-block" are standard classes of the bootstrap library.
Read here
[url] getbootstrap.com/docs/3.4/css/#images [/url]

Joffm


 

If using that path, the image file must reside in the upload/themes/survey/yourThemeName/assets/files/ directory.

Yes, in this  case the image was uploaded with the upload option in the theme editor.

Hello,

Thank you both for your help.

Weirdly, when I enter:

{{ image('./files/myfile.png', 'This is my alternative text', {"class": ".img-responsive left-block"}) }} 

The image goes directly below the description of my welcome page and not the survey title. 

Also, how would I modify the size of the logo. I tried a few things but ik I am doing it wrong and was unsucessful.

Thank you!

Also, how would I modify the size of the logo.

By uploading the logo in the correct size in the first place?

The image goes directly below the description of my welcome page and not the survey title. 

Show where and how you inserted it.
 

I have fixed the positioning however I am wondering if there is a way to have the logo right next to the title (as indicated on the image attached).

What I have currently:
  <!-- Survey Name -->
    {{ image('./files/logo3.png', 'This is my alternative text', {"class": ".img-responsive left-block"}) }} 
<h1 class="{{ aSurveyInfo.class.surveyname }} text-center" {{ aSurveyInfo.attr.surveyname }} >
        {{ processString(aSurveyInfo.name,1) }}
    </h1>

Thank you so much. 

 

I inserted a bootstrap "row" with two columns "col-md-3" and "col-md-9" (depends on the dimensions of your logo)
row with some styling to improve the vertical alignment
<div class="row" style="display: flex;  align-items: center;  height: 100px;">

Left column to display the image
{{ image('./files/Google_logo.png', 'This is my alternative text', {"class": "logo  img-responsive pull-left"}) }}       

Right to display the title
<h1 class=" {{ aSurveyInfo.class.surveyname }} text-left" {{ aSurveyInfo.attr.surveyname }} > {{ processString(aSurveyInfo.name,1) }}  </h1>

 

You may adapt to your needs.

Joffm
 

Thank you!

And if I wanted to have in the following order:
Logo
Title
Description

How would I, specifically, have the logo BEFORE the survey title?

Currently I have:
<!-- Welcome Message -->
<div id="{{ aSurveyInfo.id.welcomecontainer }}" class="{{ aSurveyInfo.class.welcomecontainer }}" {{ aSurveyInfo.attr.welcomecontainer }}>

    <!-- Survey Name -->
    <h1 class="{{ aSurveyInfo.class.surveyname }} text-left" {{ aSurveyInfo.attr.surveyname }} >
        {{ processString(aSurveyInfo.name,1) }}
        <div class="row" style="display: flex;  align-items: center;  height: 150px;">

    </h1>

    <!-- Survey description -->
    <div class="{{ aSurveyInfo.class.description }} text-info text-center" {{ aSurveyInfo.attr.description }}>
        {{ processString(aSurveyInfo.description,1) }}
    </div>

Thank you!