Added image on single programs and addjusted container padding

_layouts/program.html

@@ -8,7 +8,9 @@ layout: main
 		<h5>
 			<a href="javascript:history.back()">← back</a>
 		</h5>
-		<img src="{{ page.img_src }}" />
+		<div class="program-image-container">
+			<img src="{{ page.program_img_1400 }}" />
+		</div>
 		<h4>{{ page.name }}</h4>
 		<p>{{ page.content }}</p>
 		<h5>

assets/style.css

@@ -806,6 +806,17 @@ main content
 	padding-bottom: 100px;
 }
 
+.program-image-container {
+	position: relative;
+	width: 60%;
+	min-width: 300px;
+}
+
+.program-image-container img {
+	position: relative;
+	width: 100%;
+}
+
 /* 
 =============================================
 logo list style
@@ -1411,6 +1422,10 @@ media queries
 		margin-top: 0.5rem;
 	}
 
+	.program-image-container {
+		width: 100%;
+	}
+
 	.landing-text h1 {
 		font-size: 6rem;
 	}
@@ -1423,13 +1438,13 @@ media queries
 		font-size: 1.5rem;
 		margin-top: 1em;
 	}
-
+	/*
 	.main-content {
 		padding-top: 95px;
 		padding-left: 5px;
 		padding-right: 5px;
 	}
-
+*/
 	h1 {
 		font-size: 3rem;
 	}

json2md.js

@@ -59,6 +59,8 @@ const createProgramElementMD = (dataProgram) => {
 		var programContributors = jsonParsed[i].contributors;
 		var programFormat = jsonParsed[i].format;
 		var programText = jsonParsed[i].text.replace(/'/g, "''");
+		var programImg300 = jsonParsed[i].image_300;
+		var programImg1400 = jsonParsed[i].image_1400;
 
 		var programSrc = `https://radical-openness.org/node/${programSrcNode}#webform`;
 
@@ -80,6 +82,8 @@ name: "${programName}"
 format: ${programFormat}
 program_src: ${programSrc}
 contributors: "${programContributors}"
+program_img_300: https://radical-openness.org${programImg300}
+program_img_1400: https://radical-openness.org${programImg1400}
 --- 
 
 ${programText}`;