You will need to customize the options for your theme which involves two steps.
1) Modify the survey theme options screen to include your second image option.
2) Modify the survey layout TWIG file to display that image if the option is enabled.
For example, if extending vanilla...
Options TWIG File
Copy the
themes/vanilla/options/options.js and
themes/vanilla/options/options.twig files to
upload/themes/survey/yourThemeName/options/.
Edit
upload/themes/survey/yourThemeName/options/option.twig to insert something like this after the existing Brand Logo section:
Code:
<!-- Brand Logo 2 -->
<div class='row action_hide_on_inherit'>
<div class='col-sm-12 col-md-4'>
{# Brandlogo #}
<div class='form-group row'>
<label for='simple_edit_options_brandlogo' class='control-label'>Brandlogo 2</label>
<div class='col-sm-12'>
<div class="btn-group" data-bs-toggle="buttons">
<label class="btn btn-default">
<input type='radio' name='brandlogo2' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_brandlogo'/>
{{gT("Yes" )}}
</label>
<label class="btn btn-default">
<input type='radio' name='brandlogo2' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_brandlogo'/>
{{ gT("No") }}
</label>
</div>
</div>
</div>
</div>
<div class='col-sm-8 col-md-6'>
{# Brandlogo file selector #}
<div class='form-group row'>
<label for='simple_edit_options_brandlogofile2' class='control-label'>Brandlogo 2 file</label>
<div class='col-sm-12'>
<select class='form-control selector_option_value_field selector_radio_childfield selector_image_selector' data-parent="brandlogo2" id='simple_edit_options_brandlogofile2' name='brandlogofile2'>
{% set optgroup = '' %}
{% for image in templateConfiguration.imageFileList %}
{% if image.group != optgroup %}
{% if optgroup != '' %}
</optgroup>
{% endif %}
<optgroup label="{{image.group}}">
{% set optgroup = image.group %}
{% endif %}
<option data-lightbox-src="{{image.preview}}" value="{{image.filepath}}">{{image.filename}}</option>
{% endfor %}
</optgroup>
</select>
</div>
</div>
</div>
<div class='col-sm-4 col-md-2'>
<br/>
<button class="btn btn-default selector__open_lightbox" data-bs-target="#simple_edit_options_brandlogofile2"> {{ gT('Preview image')}}</button>
</div>
</div>
You will end up with something like this in the backend:
Nav Bar TWIG File
Edit the Logo option section in
\upload\themes\survey\yourThemeName\views\subviews\header\nav_bar.twig so it looks something like this:
Code:
{# Logo option #}
{% if( aSurveyInfo.options.brandlogo == "on" or aSurveyInfo.options.brandlogo2 == "on") %}
{% if( aSurveyInfo.options.brandlogo == "on") %}
<div class="{{ aSurveyInfo.class.navbarbrand }} logo-container hidden-xs" {{ aSurveyInfo.attr.navbarbrand }} >
{{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
</div>
{% endif %}
{% if( aSurveyInfo.options.brandlogo2 == "on") %}
<div class="{{ aSurveyInfo.class.navbarbrand }} logo-container hidden-xs" {{ aSurveyInfo.attr.navbarbrand }} >
{{ image(aSurveyInfo.options.brandlogofile2, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
</div>
{% endif %}
{% else %}
<div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} >
{{ aSurveyInfo.name }}
</div>
{% endif %}
The result is something like this:
