- Posts: 102
- Thank you received: 2
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Add image to survey title
- boshra.m
- Topic Author
- Offline
- Premium Member
Less
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!
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
1 year 10 months ago #228453
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 102
- Thank you received: 2
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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 10 months ago #228459
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
{{ 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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
1 year 10 months ago #228468
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 10 months ago #228473
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 102
- Thank you received: 2
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!
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11756
- Thank you received: 2753
1 year 10 months ago #228490
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Add image to survey title
By uploading the logo in the correct size in the first place?Also, how would I modify the size of the logo.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 10 months ago #228492
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Add image to survey title
Show where and how you inserted it.The image goes directly below the description of my welcome page and not the survey title.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- boshra.m
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 102
- Thank you received: 2
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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 10 months ago - 1 year 10 months ago #228511
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 102
- Thank you received: 2
1 year 10 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!
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.