Issue/173

css/ucb-how-to-page.css

@@ -0,0 +1,56 @@
+.eachStepDiv {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
+}
+.initialImage {
+    max-width: 50%;
+    width: 50%;
+    margin-left: auto;
+    margin-bottom: 10px;
+}
+
+.verticalFlex {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+    margin-right: 30px;
+    max-width: 50%;
+}
+.stepFlex {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+    margin-right: 30px;
+}
+.horizontalFlex {
+    display: flex;
+    flex-direction: row;
+}
+
+.costDiv {
+    margin-left: auto;
+    font-size: 20px;
+    margin-bottom: 20px;
+
+}
+
+.stepTitle {
+    font-size: 24px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.stepText {
+    font-size: 20px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.eachStepImage {
+    max-width: 30%;
+    width: 30%;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-right: 20px;
+}

js/ucb-how-to-page.js

@@ -0,0 +1,51 @@
+window.onload = function generateJSONLD() {
+  var dynamicJSONLD = '\n{\n \t"@context": "https://schema.org",\n\t "@type": "HowTo",\n';
+
+  const title = document.getElementById("titleValue");
+  dynamicJSONLD +=  '\t"name": "' + title.innerText + '",\n';
+
+  const initImage = document.querySelector('.initialImage img');
+  dynamicJSONLD += ' \t"image": {\n\t\t"@type": "ImageObject",\n\t\t "url": "'+ initImage.src + '",\n\t\t "height": "406",\n\t\t "width": "305"\n\t},\n';
+
+  const estimatedCost = document.getElementById("estimatedCostValue").innerText;
+  dynamicJSONLD += '\t"estimatedCost": {\n\t\t"@type": "MonetaryAmount",\n\t\t"currency": "USD",\n\t\t"value": "' + estimatedCost + '"\n\t},\n'
+
+  const materialList = document.getElementsByClassName("materialValue");
+  dynamicJSONLD += '\t"supply": [ ';
+  for( material of materialList) {
+    dynamicJSONLD += ' \n\t\t{\n\t\t\t"@type": "HowToSupply",\n\t\t\t"name": "' + material.innerText + '"\n\t\t},';
+  }
+  dynamicJSONLD = dynamicJSONLD.slice(0,-1);
+  dynamicJSONLD += '\n\t],\n';
+
+
+  const toolList = document.getElementsByClassName("toolValue");
+  dynamicJSONLD += '\t"tool": [ ';
+  for( tool of toolList) {
+    dynamicJSONLD += ' \n\t\t{\n\t\t\t"@type": "HowToTool", \t\t\t"name": "' + tool.innerText + '"\n\t\t},';
+  }
+  dynamicJSONLD = dynamicJSONLD.slice(0,-1);
+  dynamicJSONLD += '\n\t],\n';
+
+  const stepList = document.getElementsByClassName("howToStep");
+  dynamicJSONLD += '\t"step":[\n';
+  for( step of stepList) {
+    dynamicJSONLD += '\t\t{\n \t\t\t"@type": "HowToStep", \n';
+    stepTitle = step.querySelector('.stepTitle');
+    dynamicJSONLD += '\t\t\t"name": "' + stepTitle.innerText + '", \n';
+    stepText = step.querySelector('.stepText');
+    dynamicJSONLD += '\t\t\t"text": "' + stepText.innerText + '", \n';
+    stepImg = step.querySelector('.eachStepImage img');
+    dynamicJSONLD += '\t\t\t"image": "' + stepImg.src + '" \n';
+    dynamicJSONLD += '\t\t},'
+  }
+
+  dynamicJSONLD = dynamicJSONLD.slice(0,-1);
+  dynamicJSONLD += '\n\t] \n}\n';
+
+  const script = document.createElement("script");
+  script.setAttribute("type", "application/ld+json");
+  script.textContent = dynamicJSONLD;
+  document.head.appendChild(script);
+  console.log(dynamicJSONLD);
+}

templates/content/node--how-to-page.html.twig

@@ -0,0 +1,122 @@
+{#
+/**
+ * Theme layout to display a Basic Page.
+ *
+ */
+#}
+
+{{ attach_library('ucb2021_base/ucb-how-to-page') }}
+{%
+  set classes = [
+  'node',
+  'node--type-' ~ node.bundle|clean_class,
+  node.isPromoted() ? 'node--promoted',
+  node.isSticky() ? 'node--sticky',
+  not node.isPublished() ? 'node--unpublished',
+  view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+]
+%}
+{% set jsonLD2 =  ' "@context": "https://schema.org", "@type": "HowTo",' %}
+<article{{attributes.addClass(classes)}}>
+	<div class="container">
+		<h1{{title_attributes}}>
+			<span id="titleValue">{{ label }}</span>
+			{% set jsonLD2 = jsonLD2 ~ '"name": "' ~ label|render|striptags ~ '",'%}
+		</div>
+		<div class="container mb-4">
+
+			<div class="initialStepDiv eachStepDiv">
+				<div class="requirementsDiv verticalFlex">
+					<div class="descriptionBody">
+						{{ content.body }}
+					</div>
+					<div class="horizontalFlex stepText">
+						<div>
+							{% if items in content.field_how_to_materials %}
+								<h2>Materials
+								</h2>
+								{% set matList = '"supply": [' %}
+								<ul>
+									{% for key, item in content.field_how_to_materials if key|first != '#' %}
+										{% set matList = matList ~ '{ "@type": "HowToSupply", "name": "' ~ item|render|striptags|trim ~ '" },' %}
+										<li>{{item|render}}</li>
+									{% endfor %}
+								</ul>
+								{% set matList = matList|slice(0, -1) ~ '],' %}
+							{% endif %}
+
+							{% if items in content.field_how_to_tools %}
+								<h2>Tools
+								</h2>
+								{% set toolList = '"tool": [' %}
+								<ul>
+									{% for key, item in content.field_how_to_tools if key|first != '#' %}
+
+										{% set toolList = toolList ~ '{ "@type": "HowToTool", "name": "' ~ item|render|striptags|trim ~ '" },' %}
+										<li>{{item|render}}</li>
+
+									{% endfor %}
+								</ul>
+								{% set toolList = toolList|slice(0, -1) ~ '],' %}
+							{% endif %}
+						</div>
+						{% if items in content.field_how_to_estimated_costs %}
+							<div class="costDiv">
+									<h2>Estimated Cost:
+											<span id="estimatedCostValue">
+												{% for key, item in content.field_how_to_estimated_costs if key|first != '#' %}
+													{% set estimatedC = '"estimatedCost": { "@type": "MonetaryAmount", "currency": "USD", "value": "' ~item|render|striptags|trim ~'" },'  %}
+													${{item|render}}
+												{% endfor %}
+											</span>
+										</h2>
+							</div>
+						{% endif %}
+
+					</div>
+				</div>
+				<div class="initialImage">
+					{% for key, item in node.field_how_to_initial_image if key|first != '#' %}
+						{% set initialImageJSON = '"image": { "@type": "ImageObject","url": "' ~ file_url(item.entity.field_media_image.entity.fileuri) ~ '", "height": "406", "width": "305"},' %}
+						{{item|view}}
+					{% endfor %}
+				</div>
+			</div>
+			{% set stepList = '"step": [' %}
+			{% for key, item in node.field_how_to_steps if key|first != '#' %}
+				<div class="howToStep eachStepDiv">
+					<div class="eachStepImage">
+						{{item.entity.field_how_to_step_image|view}}
+						{% set imgURL =  file_url(item.entity.field_how_to_step_image.entity.field_media_image.entity.fileuri) %}
+							{% set stepImage = '"image": { "@type": "ImageObject","url": "' ~ imgURL ~ '", "height": "406", "width": "305"}' %}
+					</div>
+					<div class="eachStepContentDiv stepFlex">
+						{% set stepList = stepList ~ '{"@type": "HowToStep",' %}
+						<h1 id="step{{key}}">{{item.entity.field_how_to_step_title|view}}</h1>
+						{% set stepList = stepList ~ '"url": "' ~ url("<current>")|render ~ '#step' ~ key ~'",' %}
+						{% set stepList = stepList ~ '"name": "' ~ item.entity.field_how_to_step_title.value|render|striptags|trim ~ '",' %}
+
+
+						{% set stepList = stepList ~ '"itemListElement": [' %}
+						<ul>
+							{% for key2, item2 in item.entity.field_how_to_sub_steps if key2|first != '#' %}
+
+								<li>{{item2|view}}</li>
+								{% set stepList = stepList ~  '{ "@type": "HowToDirection", "text": "' ~ item2.value|render|striptags|trim ~ '"},' %}
+							{% endfor %}
+						</ul>
+						{% set stepList = stepList|slice(0,-1) ~ '],' %}
+						{% set stepList = stepList ~ stepImage %}
+						{% set stepList = stepList ~ '},' %}
+					</div>
+				</div>
+
+			{% endfor %}
+			{% set stepList = stepList|slice(0,-1) ~ ']' %}
+		</div>
+		<script type="application/ld+json">
+			{
+			{{jsonLD2|raw}}{{initialImageJSON|raw}}{{estimatedC|raw}}{{matList|raw}}{{toolList|raw}}{{stepList|raw}}
+			}
+		</script>
+	</article>

templates/field/field--field_how_to_estimated_costs.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+	{{ item.content }}
+{% endfor %}

templates/field/field--field_how_to_step_image.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+	{{ item.content }}
+{% endfor %}

templates/field/field--field_how_to_step_text.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+	{{ item.content }}
+{% endfor %}

templates/field/field--field_how_to_step_title.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+	{{ item.content }}
+{% endfor %}

templates/field/field--field_how_to_tools.html.twig

@@ -0,0 +1,10 @@
+{% if items %}
+	<div class="toolDiv">
+		<span class="toolSpan stepTitle">Tools:</span>
+		{% for item in items %}
+			<ul class = "stepText">
+					<li class="toolValue">{{ item.content }}</li>
+			</ul>
+		{% endfor %}
+	</div>
+{% endif %}

templates/field/field--node--field_how_to_steps_node.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+	{{ item.content }}
+{% endfor %}

templates/paragraphs/paragraph--how-to-individual-step.html.twig

@@ -0,0 +1,9 @@
+<div class="howToStep eachStepDiv">
+	<div class="eachStepImage">
+		{{ content.field_how_to_step_image|render }}
+	</div>
+	<div class="eachStepContentDiv verticalFlex">
+		<span class="howToStepTitle{{ paragraph.id() }} stepTitle">{{ content.field_how_to_step_title|render }}</span>
+		<span class="howToStepText{{ paragraph.id() }} stepText">{{ content.field_how_to_step_text|render }}</span>
+	</div>
+</div>

ucb2021_base.libraries.yml

@@ -148,6 +148,13 @@ ucb-video-reveal:
     theme:
       css/paragraphs/video-reveal.css: {}
 
+ucb-how-to-page:
+  version: 1.x
+  js:
+    js/ucb-how-to-page.js: {}
+  css:
+    theme:
+      css/ucb-how-to-page.css: {}
 ucb-people-list-page:
   version: 1.x
   js: