WallberryTheme.njk

{% if photoElement %}
	{{ setBackgroundTint(photoData.dark) }}

	<div class="wb-unsplash-bg-attribution">Photo by {{ photoData.authorName }} on Unsplash</div>
	<img src="{{ photoElement.src }}" style="opacity: {{ config.brightImageOpacity if photoData.isLight else config.backgroundOpacity }};">

	{% if "top" in config.addBackgroundFade %}
		<div class="topfade wbfade" style="background-image: linear-gradient(rgba({{photoData.dark.r}}, {{photoData.dark.g}}, {{photoData.dark.b}}, 0.7), rgba({{photoData.light.r}}, {{photoData.light.g}}, {{photoData.light.b}}, 0)); height: {{ getHeight("region top bar") }}px;"></div>
	{% endif %}
	{% if "bottom" in config.addBackgroundFade %}
		<div class="bottomfade wbfade" style="background-image: linear-gradient(rgba({{photoData.light.r}}, {{photoData.light.g}}, {{photoData.light.b}}, 0), black); height: {{ getHeight("region bottom bar") }}px;"></div>
	{% endif %}

{% elif photoError %}
	<div class="wb-unsplash-bg-error">
		<div class="wb-error-reason"><i class="wb-error-icon fa fa-exclamation-triangle" aria-hidden="true"></i>Error Loading Background<i class="wb-error-icon fa fa-exclamation-triangle" aria-hidden="true"></i></div>
		<div class="wb-error-info">{{ photoError }}</div>
	</div>
{% else %}
	<div class="wb-unsplash-bg-attribution">Loading background photo...</div>
{% endif %}