Hi All,

I have some code which changes the logo at the top of the screen via the use of an embedded field in the survey flow.  This has worked great for whilst we’ve been using a static theme but doesn’t want to work in a dynamic theme.  I’ve posed some of the code and some of the errors.  Please can you help me understand if this is an issue with the code and or a change in some sort of element that differs between the two theme types.  I’ve look carefully but can’t find anything different.

<!-- Dynamic theme start -->
<style type="text/css">.Skin #LogoContainer {
    padding: 20px 20px;
	/*background: red;*/
}
@media only screen and (max-width: 767px) {
	.Skin #LogoContainer {
		padding: 15px 15px;
	}
}
@media only screen and (max-width:480px){
	.Skin #LogoContainer {
		padding: 0 15px;
	}
}
.Skin #Logo {
	background: transparent no-repeat center center;
	background-size: 100% 100%;
	height: 150px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	-o-border-radius:8px;
	border-radius:8px;
}
@media only screen and (max-width: 360px){
	.Skin #Logo {
		background-size: 100% 100%;
		height: 80px;
		transform: translate(0px, 10px);
		-webkit-border-radius:0;
		-moz-border-radius:0;
		-ms-border-radius:0;
		-o-border-radius:0;
		border-radius:8px;
	}
}
@media only screen and (max-width: 480px){
	.Skin #Logo {
		background-size: 100% 100%;
		height: 80px;
		transform: translate(0px, 10px);
		border-radius:8px;
	}
}
</style>
<script>
var defaultImage = "${e://Field/header_picture_default}";
defaultImage = (defaultImage == "")? "https://xxx.eu.qualtrics.com/jfe/themes/skins/xxx/xxx_1/version-1649636963277-1b86d7/files/logo.png" : defaultImage;
var imageUrl = "${e://Field/header_picture}";
console.log(imageUrl);
var image = new Image();
image.src = imageUrl;
var imageExists = true;
console.log(image.width);
if (image.width == 0) {
	imageExists = false;
	jQuery("#Logo").css("background-image", "url(" + defaultImage + ")");
} else {
	imageExists = true;
	jQuery("#Logo").css("background-image", "url(" + imageUrl + ")");
}

Qualtrics.SurveyEngine.addOnReady(function() {
	console.log("first page " + document.getElementById('QIDPseudo22'));
	if (document.getElementById('QIDPseudo22')) {
		//exceptions for the header. This example is for the first page
		//we keep the default logo
		jQuery("#Logo").css("background-image", "url(" + defaultImage + ")");
	} else {
		console.log("image exist = " + imageExists);
		if (imageExists) {
			jQuery("#Logo").css("background-image", "url(" + imageUrl + ")");
		} else {
			imageUrl = (imageUrl == "")? defaultImage : imageUrl;
			jQuery("#Logo").css("background-image", "url(" + imageUrl + ")");

		}
	}
}); 
</script><!-- Dynamic theme end -->

There is an embedded field called ‘header_picture_default’ which we set is need be but otherwise it default to the hard coded img as per in the code

This is the Inspect console window error messages 

${e://Field/header_picture}
VM561182:9 0
VM561182:19 first page null
VM561182:25 image exist = false
header_picture%7D:1 


       Failed to load resource: the server responded with a status of 404 (Not Found)
header_picture_default%7D:1 


       Failed to load resource: the server responded with a status of 404 (Not Found)

It looks like the field headers_picture is not being parsed correctly now as the console.log is just printing: ${e://Field/header_picture} out and not recognising it as a variable.  is looks like the end bracket curly } is not being parsed as %7D is a }.  I think that that is the crux of the problem but can anyone confirm if there is a slightly different way to referring to embedded fields in the Header of a survey that uses a dynamic theme?

Thanks

Rod Pestell