top img in website

website/templates/base.html

@@ -29,7 +29,14 @@
 
 	<header id="header">
 		<div class="container">
-			<div class="logo"><a href="{{ "/"|relative_path }}"><img src="project-files/img/logo.png" alt=""></a></div>
+			<div class="logo" {% if not Data.slider %}style="max-width: 400px;"{% endif %}>
+				<a href="{{ "/"|relative_path }}">
+					<picture>
+						<source media="(max-width: 768px)" srcset="project-files/img/logo_text.png">
+						<img src="project-files/img/logo{% if not Data.slider %}_text{% endif %}.png" alt="mark2web Logo">
+					</picture>
+				</a>
+			</div>
 			<a id="pull">
 				<span class="pull_button">
 					<span></span>
@@ -43,6 +50,16 @@
 
 	<!-- ========== Slider ========== -->
 	<section class="slider white_arrows" data-dots="true" data-arrows="true">
+	{% for sl in Data.slider %}
+		<div class="slide">
+			<img 
+				src="{{ sl.img|image_process:"p=fill,w=1440,h=600,q=60" }}" 
+				srcset="{{ sl.img|image_process:"p=fill,w=768,h=384,q=60" }} 768w,
+						{{ sl.img|image_process:"p=fill,w=1440,h=600,q=60" }} 1440w,
+						{{ sl.img|image_process:"p=fill,w=1920,h=800,q=60" }} 1920w"
+				alt="{{ sl.alt }}" style="opacity:{{ sl.opacity|default:1 }}">
+		</div>
+	{% endfor %}
 	</section>
 
 	<!-- ========== Navigation ========== -->
@@ -80,6 +97,9 @@
 
 	<!-- ========== Main Content ========== -->
 	<div class="maincontent">
+		{% if Data.background %}
+		<img src="{{ Data.background|relative_path }}" alt="{{ Meta.Title }}" class="img2bg">
+		{% endif %}
 		<div class="white_section section_padding">
 			<div class="container">
 	{% block part1 %}