Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Add image to survey title

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 10 months ago #228447 by boshra.m
Add image to survey title was created by boshra.m
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!

 

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228453 by tpartner
Replied by tpartner on topic Add image to survey title
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?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 10 months ago #228454 by boshra.m
Replied by boshra.m on topic Add image to survey title
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.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228459 by Joffm
Replied by Joffm on topic Add image to survey title
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


 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228468 by tpartner
Replied by tpartner on topic Add image to survey title
If using that path, the image file must reside in the upload/themes/survey/yourThemeName/assets/files/ directory.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228473 by Joffm
Replied by Joffm on topic Add image to survey title
Yes, in this  case the image was uploaded with the upload option in the theme editor.

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 10 months ago #228488 by boshra.m
Replied by boshra.m on topic Add image to survey title
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!

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228490 by holch
Replied by holch on topic Add image to survey title

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

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

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228492 by Joffm
Replied by Joffm on topic Add image to survey title

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

Show where and how you inserted it.
 

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 10 months ago #228506 by boshra.m
Replied by boshra.m on topic Add image to survey title
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. 

 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago - 1 year 10 months ago #228511 by Joffm
Replied by Joffm on topic Add image to survey title
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
 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 year 10 months ago by Joffm.
The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

  • boshra.m
  • boshra.m's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 9 months ago #228630 by boshra.m
Replied by boshra.m on topic Add image to survey title
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! 
 

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose