Commit dd87423a authored by Ninette Adhikari's avatar Ninette Adhikari Committed by Chris Lamb
Browse files

Add image styling

parent d260a21b

_data/success_stories.yml

+1 −1
Original line number Diff line number Diff line 
- highlight: true

- featured: true

  year: 2024

  success_stories:

  - title: Arch Linux minimal container userland

products.md

+32 −11
Original line number Diff line number Diff line
@@ -13,7 +13,7 @@ This page lists the products, which are shipping with verifiable reproducible bu 


{% for section in site.data.success_stories %}

  <h2>{{ section.year }}</h2>

  {% if section.highlight == true %}

  {% if section.featured == true %}

  <div class="row">

  {% for item in section.success_stories %}

  <div class="d-flex align-items-stretch col-sm-4">
@@ -25,8 +25,8 @@ This page lists the products, which are shipping with verifiable reproducible bu 
        </div>

      </div>

      {% else %}

        <a id="featureImageLink" href="{{ item.url }}" >

          <img id="featureImage" class="card-img-top" src="{{ item.image | relative_url }}">

        <a href="{{ item.url }}" >

          <img class="feature-image card-img-top hide-image" src="{{ item.image | relative_url }}">

        </a>

      {% endif %}

      <div class="card-body">
@@ -76,6 +76,12 @@ This page lists the products, which are shipping with verifiable reproducible bu 
{% endfor %}



<style>

  .hide-image {

    visibility: hidden;

  }

  .show-image {

    visibility: visible;

  }

  .flex-style {

    display: flex;

    justify-content: center;
@@ -88,15 +94,30 @@ This page lists the products, which are shipping with verifiable reproducible bu 


<script>

  document.addEventListener("DOMContentLoaded", function() {

    const img = document.getElementById('featureImage');

    const imgLink = document.getElementById('featureImageLink');

    const images = document.querySelectorAll('.feature-image');



    // Wait until the image has loaded to check its height

    img.onload = function() {

      if (img.clientHeight > 160) {

        img.classList.add('width-style');

        imgLink.classList.add('flex-style');

    function applyFlexStyle(image) {

      const parentDiv = image.parentElement;

      if (image.clientHeight > 224) {

        image.classList.add('width-style');

        parentDiv.classList.add('flex-style');

      }

      // Make image visible after applying styles

      image.classList.remove('hide-image');

      image.classList.add('show-image');

    }

    };



    images.forEach(function(image) {

      // Call function when the image has loaded

      image.onload = applyFlexStyle(image);

      // Call function if the image is already loaded to handle cached images

      if (image.complete) {

        applyFlexStyle(image);

      }

      // Add event listener for window resize

      window.addEventListener('resize', function() {

        applyFlexStyle(image);

      });

    })

  });

</script>