- Posts: 153
- Thank you received: 5
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Custom Template: New image at end of each group
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
10 years 10 months ago #95856
by dweisser
Custom Template: New image at end of each group was created by dweisser
Hi all,
I'm trying to customize a template in which we add an image at the end of each group. We're running V2+.
I'm modifying the endgroup.pstpl in order to accomplish this.
However, as you know, when you edit the template in this way, you will be limited to adding THE SAME IMAGE to the base of each group. This is not our objective.
I implemented a javascript (that I found on the Interweb; I have no clue how to write it) in the endgoup.pstpl in which one of a random set of images is loaded as the group loads in the survey. And it works nicely.
<div align=right>
<script language="JavaScript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r1.jpg'>"
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r2.jpg'>"
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r3.jpg'>"
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r4.jpg'>"
i=Math.floor(Math.random() * n) ;
document.write( b )
</script>
</div>
MY QUESTION is...does any one know of a way i can load a specific image at the end of group 1, another specific image at the end of group two USING THE TEMPLATE EDITOR, not a sequence of questions/expressions or the like?
I though perhaps there may be a way to identify whether the group seen by the respondent is the FIRST group, or it is they are on the THIRD page of the survey, or something.
Any thoughts appreciated - as always.
-Nebraska David
I'm trying to customize a template in which we add an image at the end of each group. We're running V2+.
I'm modifying the endgroup.pstpl in order to accomplish this.
However, as you know, when you edit the template in this way, you will be limited to adding THE SAME IMAGE to the base of each group. This is not our objective.
I implemented a javascript (that I found on the Interweb; I have no clue how to write it) in the endgoup.pstpl in which one of a random set of images is loaded as the group loads in the survey. And it works nicely.
<div align=right>
<script language="JavaScript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r1.jpg'>"
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r2.jpg'>"
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r3.jpg'>"
b[n++]= "<img name=randimg src='/survey/upload/templates/EagleGroupStandard/r4.jpg'>"
i=Math.floor(Math.random() * n) ;
document.write( b )
</script>
</div>
MY QUESTION is...does any one know of a way i can load a specific image at the end of group 1, another specific image at the end of group two USING THE TEMPLATE EDITOR, not a sequence of questions/expressions or the like?
I though perhaps there may be a way to identify whether the group seen by the respondent is the FIRST group, or it is they are on the THIRD page of the survey, or something.
Any thoughts appreciated - as always.
-Nebraska David
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10632
- Thank you received: 3697
10 years 10 months ago #95860
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 Custom Template: New image at end of each group
In LS 2, each group is wrapped in a <div id="group-n"> element, where "n" is the group index starting a 0.
So, I see a couple of approaches...
CSS BACKGROUND IMAGES
1) Add a <div> element to the end of endgroup.pstpl:
2) Upload your images to your template directory as group_0.png, group_1.png, group_2.png...
3) Add something like this to the end of template.css:
DYNAMIC IMAGES WITH JAVASCRIPT
1) Add a placeholder image to the end of endgroup.pstpl:
2) Upload your images as group_0.png, group_1.png, group_2.png...
3) Add something like this to the end of template.js:
So, I see a couple of approaches...
CSS BACKGROUND IMAGES
1) Add a <div> element to the end of endgroup.pstpl:
Code:
<div class="groupImage"></div>
3) Add something like this to the end of template.css:
Code:
.groupImage { width: 300px; height: 100px; border: 1px solid #666; } #group-0 .groupImage { background: transparent url(group_0.png) 0 0 no-repeat; } #group-1 .groupImage { background: transparent url(group_1.png) 0 0 no-repeat; } #group-2 .groupImage { background: transparent url(group_2.png) 0 0 no-repeat; }
DYNAMIC IMAGES WITH JAVASCRIPT
1) Add a placeholder image to the end of endgroup.pstpl:
Code:
<div class="groupImage"> <img src="path/to/your/images/placeholder.png" /> </div>
3) Add something like this to the end of template.js:
Code:
$(document).ready(function(){ // Find the group index var groupIndex = $('div[id^="group-"]').attr('id').split('group-')[1]; // Modify the image filename $('.groupImage img').attr('src', 'path/to/your/images/group_'+groupIndex+'.png') });
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: dweisser
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 5
10 years 10 months ago #95899
by dweisser
Replied by dweisser on topic Custom Template: New image at end of each group
Thank you for the detailed reply. This is more than I could have hoped for. I'll have a go at implementation and reply with difficulties and/or adjustments.
David
David
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13935
- Thank you received: 2551
10 years 10 months ago #95900
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Custom Template: New image at end of each group
Hello,
Think you can do somethink like that too:
in endgroup.pstpl:
<img src="{TEMPLATEURL}img-grp-{GID}.png />
{GID} must be replaced by the group number (the group id)
Denis
Think you can do somethink like that too:
in endgroup.pstpl:
<img src="{TEMPLATEURL}img-grp-{GID}.png />
{GID} must be replaced by the group number (the group id)
Denis
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10632
- Thank you received: 3697
10 years 10 months ago #95907
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 Custom Template: New image at end of each group
Yes, also a valid approach but I like to have a placeholder image in case "<img src="{TEMPLATEURL}img-grp-{GID}.png />" doesn't exist.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 5
10 years 10 months ago - 10 years 10 months ago #95910
by dweisser
Replied by dweisser on topic Custom Template: New image at end of each group
Thank you both tremendously for your advice. Both approaches work very well...in the template editor.
That is, all works as intended in the template editor environment. Starting with the premise that Group names in the survey environment start at 0 and proceed continuously, I thought I could name the images myimage0.png, myimage1.png, etc.
So, in the template editor, the image I want to show for GID=0 is shown. But when I execute the live survey, the image doesn't show up, as though it is unavailable on the server.
When I copy the image's url, this is what I get: www.mydoman.com/survey/upload/templates/...templatename/b98.png .
It looks like that in the live survey environment, the URL references that ACTUAL GID versus the group's literal order - which is a bummer.
I'll simply rename and reload the graphics for each survey, but it's not the exquisitely elegant solution I was aiming for. What do you think?
David
That is, all works as intended in the template editor environment. Starting with the premise that Group names in the survey environment start at 0 and proceed continuously, I thought I could name the images myimage0.png, myimage1.png, etc.
So, in the template editor, the image I want to show for GID=0 is shown. But when I execute the live survey, the image doesn't show up, as though it is unavailable on the server.
When I copy the image's url, this is what I get: www.mydoman.com/survey/upload/templates/...templatename/b98.png .
It looks like that in the live survey environment, the URL references that ACTUAL GID versus the group's literal order - which is a bummer.
I'll simply rename and reload the graphics for each survey, but it's not the exquisitely elegant solution I was aiming for. What do you think?
David
Last edit: 10 years 10 months ago by dweisser. Reason: adding info
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10632
- Thank you received: 3697
10 years 10 months ago #95912
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 Custom Template: New image at end of each group
Can you activate a test for us to see?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 5
10 years 10 months ago - 10 years 10 months ago #95913
by dweisser
Replied by dweisser on topic Custom Template: New image at end of each group
If you mean, send a link to the survey, her eit is:
www.springboltconsulting.com/survey/index.php/785237/lang-en
www.springboltconsulting.com/survey/index.php/785237/lang-en
Last edit: 10 years 10 months ago by dweisser.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10632
- Thank you received: 3697
10 years 10 months ago #95917
by tpartner
My solutions should work because they do reference the sequential numbers assigned by LimeSurvey.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Custom Template: New image at end of each group
Yes, that is the case if you use the {GID} placeholder.It looks like that in the live survey environment, the URL references that ACTUAL GID versus the group's literal order...
My solutions should work because they do reference the sequential numbers assigned by LimeSurvey.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13935
- Thank you received: 2551
10 years 10 months ago #95918
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Custom Template: New image at end of each group
Yes: GID replaced by Group ID, not by group number.
tpartner : what if you have some confition in group ? Not sure the number is the same ? (but maybe it's OK )
Denis
tpartner : what if you have some confition in group ? Not sure the number is the same ? (but maybe it's OK )
Denis
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10632
- Thank you received: 3697
10 years 10 months ago #95925
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 Custom Template: New image at end of each group
I think the groups are assigned sequential numbers even if they are hidden by conditions.what if you have some confition in group ? Not sure the number is the same ?
Code:
$_gseq = -1; foreach ($_SESSION[$LEMsessid]['grouplist'] as $gl) { $gid = $gl['gid']; ++$_gseq;
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13935
- Thank you received: 2551
10 years 10 months ago #95929
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Custom Template: New image at end of each group
\o/ Great then !
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.