Add company and school logos (#882)

* Add education logo

* Fix width

* Update css

* Add logos to company

* Add multiple positions

* Update Styling

* Strenghten poistion title

* Improve timeline

* Fix missing curly braces

* Fix curly braces

* Add space

* Add space between position and date

* Make single and multiple experiences more consistent

* Remove single-position layout

* Remove duplicated comment

assets/styles/components/images.scss

@@ -46,3 +46,13 @@ html[data-theme='dark'] {
 .svg-inverted {
   filter: invert(1);
 }
+
+.logo-holder {
+  height: 64px;
+  margin-bottom: 1em;
+}
+
+.company-logo {
+  max-height: 100%;
+  width: auto;
+}

assets/styles/sections/experiences.scss

@@ -92,6 +92,16 @@
     }
   }
 
+  .company-heading {
+    h5 {
+      display: inline;
+      margin-right: 0.25em;
+    }
+    p {
+      display: inline;
+    }
+  }
+
   @include media('<=medium') {
     .container {
       max-width: 100%;

layouts/partials/sections/education-alt.html

@@ -31,6 +31,18 @@
                     </td>
                     <td class="details">
                         <div class="degree-info card">
+
+                            {{ $logoImage:= resources.Get .institution.logo}}
+                            {{ if $logoImage }}
+                            {{/*  svg don't support "Fit" operation   */}}
+                            {{ if ne $logoImage.MediaType.SubType "svg" }}
+                              {{ $logoImage = $logoImage.Fit "300x300" }}
+                            {{ end }}
+                            <div class="logo-holder">
+                                <img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+                            </div>
+                            {{ end }}
+
                             <div class="row">
                                 <div class="col-lg-10 col-md-8">
                                     {{ if .institution.url }}

layouts/partials/sections/education.html

@@ -31,6 +31,19 @@
                     </td>
                     <td class="details">
                         <div class="degree-info card">
+
+                            {{ $logoImage:= resources.Get .institution.logo}}
+                            {{ if $logoImage }}
+                            {{/*  svg don't support "Fit" operation   */}}
+                            {{ if ne $logoImage.MediaType.SubType "svg" }}
+                              {{ $logoImage = $logoImage.Fit "300x300" }}
+                            {{ end }}
+                
+                            <div class="logo-holder">
+                                <img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+                            </div>
+                            {{ end }}
+
                             <div class="row">
                                 <div class="col-lg-10 col-md-8">
                                     {{ if .institution.url }}

layouts/partials/sections/experiences.html

@@ -18,11 +18,11 @@
      {{ if eq (mod $index 2) 0 }}
        <div class="row align-items-center  d-flex">
          {{ partial "sections/experiences/vertical-line.html" $index }}
-         {{ partial "sections/experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/positions.html" $experience }}
        </div>
      {{else}}
        <div class="row align-items-center justify-content-end d-flex">
-         {{ partial "sections/experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/positions.html" $experience }}
          {{ partial "sections/experiences/vertical-line.html" $index }}
        </div>
      {{ end }}

layouts/partials/sections/experiences/experience-info.html

@@ -1,5 +0,0 @@
-{{ if gt (len .positions) 1 }}
-  {{ partial "sections/experiences/multiple-positions.html" . }}
-{{ else }}
-  {{ partial "sections/experiences/single-position.html" . }}
-{{ end }}

layouts/partials/sections/experiences/multiple-positions.html

@@ -1,29 +0,0 @@
-<div class="col-10 col-lg-8">
-    <div class="experience-entry-heading">
-        <!-- For multiple positions, give emphasis on the company name-->
-        <h5>{{ if .company.url }}<a href={{.company.url}} title="{{ .company.name }}" target="_blank" rel="noopener">{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5>
-
-        <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
-        {{ $oldestPosition := index (last 1 .positions) 0}}
-        {{ $mostRecentPosition := index (first 1 .positions) 0}}
-        <p class="text-muted">
-            {{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}{{ i18n "present" }}{{ end }},
-            {{ .company.location }}
-        </p>
-        <!-- Add company overview -->
-        <p>{{ .company.overview | markdownify }}</p>
-    </div>
-    <!-- Add the positions information -->
-    <div class="positions">
-    {{ range $index,$position:= .positions }}
-        <h6 class="designation">{{ $position.designation }}</h6>
-        <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} {{ i18n "present" }} {{end}}</p>
-        <!-- Add the responsibilities handled at this position -->
-        <ul class="justify-content-around">
-        {{ range $position.responsibilities }}
-            <li>{{ . | markdownify }}</li>
-        {{ end }}
-        </ul>
-    {{ end }}
-    </div>
-</div>

layouts/partials/sections/experiences/positions.html

@@ -0,0 +1,46 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        {{ $logoImage:= resources.Get .company.logo}}
+            {{ if $logoImage }}
+            {{/*  svg don't support "Fit" operation   */}}
+            {{ if ne $logoImage.MediaType.SubType "svg" }}
+              {{ $logoImage = $logoImage.Fit "300x300" }}
+            {{ end }}
+            <div class="logo-holder">
+                <img class="company-logo" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+            </div>
+            {{ end }}
+        <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
+        {{ $oldestPosition := index (last 1 .positions) 0}}
+        {{ $mostRecentPosition := index (first 1 .positions) 0}}
+        <div class="company-heading">
+            <h5>{{ if .company.url }}<a href={{.company.url}} title="{{ .company.name }}" target="_blank" rel="noopener">{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5>
+            <p class="text-muted">
+                {{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}{{ i18n "present" }}{{ end }}
+            </p>
+        </div>
+        <p class="text-muted">
+            <i class="fa-solid fa-location-dot"></i> {{ .company.location }}
+        </p>
+        <!-- Add company overview -->
+        <p>{{ .company.overview | markdownify }}</p>
+    </div>
+    <!-- Add the positions information -->
+    <div class="positions">
+    {{ range $index,$position:= .positions }}
+        <div class="company-heading">
+            <h5 class="designation">{{ $position.designation }}</h5>
+            <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} {{ i18n "present" }} {{end}}</p>
+        </div>
+        <!-- Add the responsibilities handled at this position -->
+        {{ if $position.responsibilities }}
+            <h6 class="text-heading">{{ i18n "responsibilities" }}</h6>
+            <ul class="justify-content-around">
+                {{ range $position.responsibilities }}
+                    <li>{{ . | markdownify }}</li>
+                {{ end }}
+            </ul>
+        {{ end }}
+    {{ end }}
+    </div>
+</div>

layouts/partials/sections/experiences/single-position.html

@@ -1,23 +0,0 @@
-<div class="col-10 col-lg-8">
-    <div class="experience-entry-heading">
-        {{ $position:= index .positions 0 }}
-        <!-- For single position, give emphasis on the designation-->
-        <h5>{{ $position.designation }}</h5>
-        <h6>{{ if .company.url }}<a href={{.company.url}} title="{{ .company.name }}" target="_blank" rel="noopener">{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
-        <!-- Add experience duration info -->
-        <p class="text-muted">{{ $position.start }} - {{ if $position.end }}{{ $position.end }}{{ else }}{{ i18n "present" }}{{ end }},
-            {{ .company.location }}
-        </p>
-    </div>
-    <!-- Add company overview -->
-    <p>{{ .company.overview | markdownify }}</p>
-    <!-- Add the responsibilities handled at this position -->
-    {{ if $position.responsibilities }}
-    <h6 class="text-heading">{{ i18n "responsibilities" }}</h6>
-    <ul class="justify-content-around">
-    {{ range $position.responsibilities }}
-        <li>{{ . | markdownify }}</li>
-    {{ end }}
-    </ul>
-    {{ end }}
-</div>