Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Custom Template: New image at end of each group

Custom Template: New image at end of each group 11 Monate 1 Woche her #95856

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Silver Donor
  • Beiträge: 182
  • Dank erhalten: 5
  • Karma: 5
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 1 Woche her #95860

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
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:
<div class="groupImage"></div>
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:
.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:
<div class="groupImage">
	<img src="path/to/your/images/placeholder.png" />
</div>
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:
$(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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: dweisser

Custom Template: New image at end of each group 11 Monate 6 Tage her #95899

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Silver Donor
  • Beiträge: 182
  • Dank erhalten: 5
  • Karma: 5
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 6 Tage her #95900

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 5850
  • Dank erhalten: 716
  • Karma: 222
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 6 Tage her #95907

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 6 Tage her #95910

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Silver Donor
  • Beiträge: 182
  • Dank erhalten: 5
  • Karma: 5
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
Letzte Änderung: 11 Monate 6 Tage her von dweisser. Begründung: adding info
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 6 Tage her #95912

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 6 Tage her #95913

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Silver Donor
  • Beiträge: 182
  • Dank erhalten: 5
  • Karma: 5
If you mean, send a link to the survey, her eit is:
www.springboltconsulting.com/survey/index.php/785237/lang-en
Letzte Änderung: 11 Monate 6 Tage her von dweisser.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 6 Tage her #95917

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
It looks like that in the live survey environment, the URL references that ACTUAL GID versus the group's literal order...
Yes, that is the case if you use the {GID} placeholder.

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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Custom Template: New image at end of each group 11 Monate 6 Tage her #95918

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 5850
  • Dank erhalten: 716
  • Karma: 222
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.161 Sekunden
Donation Image