Custom Template: New image at end of each group

More
4 years 4 months ago #95856 by dweisser
dweisser created the topic: Custom Template: New image at end of each group
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

Please Log in to join the conversation.

More
4 years 4 months ago #95860 by tpartner
tpartner replied the 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:
<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.
The following user(s) said Thank You: dweisser

Please Log in to join the conversation.

More
4 years 4 months ago #95899 by dweisser
dweisser replied the 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

Please Log in to join the conversation.

More
4 years 4 months ago #95900 by DenisChenu
DenisChenu replied the 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

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 4 months ago #95907 by tpartner
tpartner replied the 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.

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #95910 by dweisser
dweisser replied the 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
Last Edit: 4 years 4 months ago by dweisser. Reason: adding info

Please Log in to join the conversation.

More
4 years 4 months ago #95912 by tpartner
tpartner replied the 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.

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #95913 by dweisser
dweisser replied the 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
Last Edit: 4 years 4 months ago by dweisser.

Please Log in to join the conversation.

More
4 years 4 months ago #95917 by tpartner
tpartner replied the topic: Custom Template: New image at end of each group

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.

Please Log in to join the conversation.

More
4 years 4 months ago #95918 by DenisChenu
DenisChenu replied the 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

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 4 months ago #95925 by tpartner
tpartner replied the topic: Custom Template: New image at end of each group

what if you have some confition in group ? Not sure the number is the same ?

I think the groups are assigned sequential numbers even if they are hidden by conditions.
        $_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.

Please Log in to join the conversation.

More
4 years 4 months ago #95929 by DenisChenu
DenisChenu replied the 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 4 months ago #95937 by dweisser
dweisser replied the topic: Custom Template: New image at end of each group
I implemented the CSS version and all works swimmingly. You guys rock.
There is one issue that I can't seem to resolve.

I want to use a placeholder image as described above, because...well...that makes sense. But, the placeholder image always shows...even when the group specific image loads. It seems to be "above" the group specific image, in Chrome anyway.

Any thoughts?

Please Log in to join the conversation.

More
4 years 4 months ago #95954 by DenisChenu
DenisChenu replied the topic: Custom Template: New image at end of each group
If you use the css method
( CSS BACKGROUND IMAGES in first post of Tony)

There are no placeholder

No ?

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 4 months ago #95986 by dweisser
dweisser replied the topic: Custom Template: New image at end of each group
Of course. Now all is well.
Thank you both.
David

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now