jumbo-jekyll-theme 4.7.8 → 4.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '08596f4623ba80a88ec441f83effa5e70e812b0a1c03ce550d0dc69f086c05aa'
-  data.tar.gz: c75c68cbb8f0399e5c866858aee24addd7fbe73a75eac01cc362c681d2f58fc1
+  metadata.gz: 23167a57bce65c4933fd14e2d4a4b137ac94b0daad1adb80a3df4c8a09629dbc
+  data.tar.gz: ce55accff320705b076fc39bac3c4de5f91bd5bfd26ee4e65359c605af3fa3c8
 SHA512:
-  metadata.gz: fa2215b67f7f1abfa817a8925a7a7ebe7a6121092aefddfaac2ca3f346750a3c296314c3071a73cc8d4f8efd66146a02f8abf7a64cf8e2156adc86487a10803d
-  data.tar.gz: 3ec94b0f4c434361937c04a0748bf0237b1557bc5d2f3ec6ba4c6cec8f7f6f5d786a8a7b1344c182228f43226611baf24231882b3ee022a6c1f85311725eab72
+  metadata.gz: 47d1102e4fa33c804c54599bf97cb5bba64502c0358b02182e40a5392c039be1d3f02fc48fa86c61dbe8741b01eed30c24ffbf0ea8951903c40c4dcbe1d58933
+  data.tar.gz: 9681f2fb2b2b388f4655cca1de7b33fb6f38471ea6dc685e34a9384712b1b59239921dffa6301b993ddda339d4e4c6d85897c7fcac307e7932bcb620286cf2a0

data/_config.yml

@@ -39,11 +39,9 @@ exclude:
   - _static-site
   - .sass-cache
   - _site
-# Sass Configuration for the site styles
-sass:
-    style: compressed
-    load_paths:
-        - assets/css
+  - package.json
+  - node_modules
+  - gulpfile.js
 # Compress HTML using the jekyll-tidy plugin.
 jekyll_tidy: 
     # Toggle compression of HTML
@@ -98,19 +96,6 @@ defaults:
         type: "authors"
     values:
         layout: author
-# Jekyll Assets setup
-assets:
-  # Compress JS Assets - uses the uglifier 
-  compression: true
-  gzip: true
-  # Autoprefixer default settings
-  autoprefixer:
-      browsers: ["last 2 versions","> 5%","IE 9"]
-  # These are the paths to look for assets
-  sources:
-    - assets/js/
-    - assets/images/
-    - assets/css/    
 # Jekyll relative links plugin settings    
 jekyll_relative_links:
     process_all_collections: true
@@ -118,14 +103,9 @@ jekyll_relative_links:
 plugins:
     - jekyll-seo-tag
     - jekyll-sitemap
-    - uglifier
-    - jekyll-assets
-    - jekyll-theme-assets-updated
-    - jekyll-tidy
     - jekyll-redirect-from
-    - jekyll-responsive-image
-    - autoprefixer-rails
     - jekyll-paginate-v2
+    - jekyll-picture-tag-latest
 collections:
   authors:
     output: true
@@ -136,65 +116,6 @@ liquid:
 readme_index:
     enabled:          true
     remove_originals: false
-
-# Jeykyll Responsive Image Configuration
-responsive_image:
-  cache: false
-  # [Required]
-  # Path to the image template.
-  template: _includes/images/responsive-image.html
-
-  # [Optional, Default: 85]
-  # Quality to use when resizing images.
-  default_quality: 90
-
-  # [Optional, Default: []]
-  # An array of resize configuration objects. Each object must contain at least
-  # a `width` value.
-  sizes:
-    - width: 400  # [Required] How wide the resized image will be.
-      quality: 70 # [Optional] Overrides default_quality for this size.
-    - width: 800
-      quality: 70
-
-  # [Optional, Default: false]
-  # Rotate resized images depending on their EXIF rotation attribute. Useful for
-  # working with JPGs directly from digital cameras and smartphones
-  auto_rotate: false
-
-  # [Optional, Default: false]
-  # Strip EXIF and other JPEG profiles. Helps to minimize JPEG size and win friends
-  # at Google PageSpeed.
-  strip: false
-
-  # [Optional, Default: assets]
-  # The base directory where assets are stored. This is used to determine the
-  # `dirname` value in `output_path_format` below.
-  base_path: assets
-
-  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
-  # The template used when generating filenames for resized images. Must be a
-  # relative path.
-  #
-  # Parameters available are:
-  #   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
-  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)
-  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)
-  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)
-  #   %{width}       Width of the resized image
-  #   %{height}      Height of the resized image
-  #
-  output_path_format: assets/resized/%{width}/%{basename}
-
-  # [Optional, Default: true]
-  # Whether or not to save the generated assets into the source folder.
-  save_to_source: false
-
-  # [Optional, Default: []]
-  # By default, only images referenced by the responsive_image and responsive_image_block
-  # tags are resized. Here you can set a list of paths or path globs to resize other
-  # images. This is useful for resizing images which will be referenced from stylesheets.
-  extra_images:
-    - assets/foo/bar.png
-    - assets/bgs/*.png
-    - assets/avatars/*.{jpeg,jpg}
+picture:
+  source: "assets/images"
+  output: "assets/images/processed"

data/_data/picture.yml

@@ -0,0 +1,100 @@
+# Example picture presets:
+# TODO: change to EMs, because safari sucks.
+
+# Media presets are used in several places:
+# - To specify alternate source images (for art direction)
+# - To build the 'sizes' attribute
+# - When given alternate source images, specify which sizes to generate.
+media_presets:
+  wide_desktop: 'min-width: 1801px'
+  desktop: 'max-width: 1800px'
+  wide_tablet: 'max-width: 1200px'
+  tablet: 'max-width: 900px'
+  mobile: 'max-width: 600px'
+
+# Markup presets allow you to group settings together, and select one of them by name in your jekyll
+# tag. All settings are optional.
+markup_presets:
+  default:
+
+    # Optionally specify a markup type. Your current options are 'picture', 'img', or 'auto'
+    # (default).
+    markup: auto
+
+    # Must be an array, in order of decreasing preference. Defaults to just 'original'.
+    formats: [webp, original]
+
+    # Must be an array: which image sizes (width in pixels) to generate (unless directed otherwise
+    # below). If not specified, will use sensible default values.
+    widths: [200, 400, 800, 1600]
+
+    # Alternate source images (for art direction) are associated with media query presets. Here, you
+    # can optionally specify a different set of sizes to generate for those alternate source images.
+    # This is how you avoid generating a 1800 pixel wide image that's only shown on narrow screens.
+    # Must be arrays.
+    media_widths: 
+      mobile: [200, 400, 600] 
+      tablet: [400, 600, 800]
+
+    # Specifies an optional, unconditional size attribute. Can be given alone, or if specified in
+    # combination with 'sizes' below, will be given last (when no media queries apply).
+    size: 800px
+
+    # For building the 'sizes' attribute on img and source tags. specifies how wide the image will
+    # be when a given media query is true. Note that every source in a given <picture> tag will have
+    # the same associated sizes attribute.
+    sizes: 
+      mobile: 100vw
+      desktop: 60vw
+
+    # Specify the properties of the fallback image. If not specified, will return a 900 pixel
+    # wide image in the original format.
+    fallback_width: 800
+    fallback_format: original
+
+    # Attributes can be added to each HTML element, by type:
+    attributes:
+      picture: 'class="awesome" data-volume="11"'
+      img: 'class="some-other-class"'
+
+  # This is an example of how you would create a 'multiplier' based srcset; useful when an image
+  # will always be the same size on all screens, but you'd like to supply higher resolution images
+  # to devices with higher pixel ratios.
+  icon:
+    base_width: 20
+    pixel_ratios: [1, 1.5, 2]
+    fallback_width: 20
+    attributes:
+      img: 'class="icon"'
+
+  # Here's an example of how you'd configure jekyll-picture-tag to work with something like
+  # lazyload:
+  # https://github.com/verlok/lazyload
+  lazy:
+    markup: data_auto
+    formats: [webp, original]
+    widths: [400, 750, 1000]
+    noscript: true # Default: false
+    attributes: 
+      img: class="lazyload"
+
+  thumb:
+    markup: data_auto
+    formats: [webp, original]
+    widths: [400, 750, 1000]
+    noscript: true # Default: false
+    attributes: 
+      img: class="lazyload"
+
+  placeholder:
+    markup: data_auto
+    formats: [webp, original]
+    noscript: true # Default: false
+    attributes: 
+      img: class="lazyload"
+
+  # This is an example of how you'd get generated image and a URL, and nothing else.
+  direct:
+    markup: direct_url
+    fallback_format: webp # Default original
+    fallback_width: 600 # Default 800

data/_includes/breadcrumb.html

@@ -1,8 +1,7 @@
 <div class="row breadcrumb-container"
 {% if site.data.settings.breadcrumb.image %}
-style="background-image: url('{% asset_path '{{site.data.settings.breadcrumb.image}}' %}');
-"
-{% endif %}"> <!--- Row Start ---->
+style="background-image: url({{site.data.settings.breadcrumb.image}});"
+{% endif %}> <!--- Row Start ---->
 <div class="container breadcrumb-inner-container"><!--- Container Start ---->
     <h1>
         {% if page.title %}

data/_includes/css.html

@@ -1,9 +1,11 @@
-{% if include.pageCSS %}
-    {% capture css-package %}/assets/css/main-{{include.pageCSS}}.css{% endcapture %}
-    <link rel="stylesheet" href="{{ css-package | relative_url }}">
-{% elsif include.layoutCSS %}
-    {% capture css-package %}/assets/css/main-{{include.layoutCSS}}.css{% endcapture %}
-    <link rel="stylesheet" href="{{ css-package | relative_url }}">
+{% if page.css-package %}
+    {% capture css-package %}/assets/css/main-{{page.css-package}}.css{% endcapture %}
+    <link rel="stylesheet" href="{{ css-package | relative_url }}?v={% bust_cache %}">
+{% elsif layout.css-package %}
+    {% capture css-package %}/assets/css/main-{{layout.css-package}}.css{% endcapture %}
+    <link rel="stylesheet" href="{{ css-package | relative_url }}?v={% bust_cache %}">
+{% elsif layout.css-package == "main" or page.css-package == "main" %}
+    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}?v={% bust_cache %}">
 {% else %}
-    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
-{% endif %}
+    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}?v={% bust_cache %}">
+{% endif %}

data/_includes/display-blog-posts.html

@@ -4,7 +4,6 @@
         {% assign timeframe = 604800 %}
         {% assign post_in_seconds = post.date | date: "%s" | plus: 0 %}
         {% assign recent_posts = "now" | date: "%s" | minus: timeframe %}
-        
         {% if forloop.first and paginator.page == 1 %}
             <style>
                 @media(min-width: 1000px){
@@ -17,37 +16,13 @@
             <div class="featured-post-row">
                 <div class="col-xs-12 col-sm-7 col-sm-push-5 latest-featured-post">
                     <a href="{{post.url}}">
-                    {% assign image_path = "" %}
-                    {% if post.image.thumb %}
-                            {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
-                            {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
-                    {% elsif post.image.name %}
-                            {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
-                            {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
-                    {% elsif post.image.path %}
-                            {% capture image_path %}{{post.image.path | remove_first: "/" }}{% endcapture %}
-                            {% capture full_path %}{{post.image.path}}{% endcapture %}
-                    {% elsif post.image == site.data.settings.social_share_image %}
-                            {% capture image_path %}{{site.data.settings.placeholder | remove_first: "/" }}{% endcapture %}
-                            {% capture full_path %}{{site.data.settings.placeholder}}{% endcapture %}
-                    {% elsif post.image %}
-                            {% capture image_path %}{{post.image | remove_first: "/" }}{% endcapture %}
-                            {% capture full_path %}{{post.image}}{% endcapture %}
-                    {% else %}
-                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
-                        data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="center-block img-responsive lazyload"/>
-                    {% endif %}
-                    {% if image_path != "" %}
-                        {% responsive_image_block %}
-                        template: _includes/thumbnail_image.html
-                        path: {{ image_path }}
-                        fullpath: {{ full_path }}
-                        {% if post.title %}
-                        title: {{ post.title | slugify: "ascii"}}
-                        alt: {{ post.title | slugify: "ascii"}}
+                        {% if post.image.path %}
+                            {% assign imagePath = post.image.path | replace: '/assets/images/', '' %}
+                            {% picture thumb {{imagePath}} alt=post.title %}
+                        {% else %}
+                            {% assign imagePath = site.data.settings.placeholder | replace: '/assets/images/', '' %}
+                            {% picture placeholder {{imagePath}} alt=post.title %}
                         {% endif %}
-                        {% endresponsive_image_block %}
-                    {% endif %}
                     </a>
                 </div>
                 <div class="col-xs-12 col-sm-5 col-sm-pull-7 latest-featured-post-content">
@@ -84,39 +59,14 @@
                 <div class="blog-post-item">
                     <a href="{{post.url}}">
                         <div class="blog-featured-image {% if post.image == site.data.settings.social_share_image %}using-placeholder{% endif %}">
-
-                        {% assign image_path = "" %}
-                        {% if post.image.thumb %}
-                                {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
-                                {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
-                        {% elsif post.image.name %}
-                                {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
-                                {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
-                        {% elsif post.image.path %}
-                                {% capture image_path %}{{post.image.path | remove_first: "/" }}{% endcapture %}
-                                {% capture full_path %}{{post.image.path}}{% endcapture %}
-                        {% elsif post.image == site.data.settings.social_share_image %}
-                            {% capture image_path %}{{site.data.settings.placeholder | remove_first: "/" }}{% endcapture %}
-                            {% capture full_path %}{{site.data.settings.placeholder}}{% endcapture %}
-                            {% assign using_placeholder = "true" %}
-                        {% elsif post.image %}
-                                {% capture image_path %}{{post.image | remove_first: "/" }}{% endcapture %}
-                                {% capture full_path %}{{post.image}}{% endcapture %}
+                        {% if post.image.path %}
+                            {% assign imagePath = post.image.path | replace: '/assets/images/', '' %}
+                            {% picture thumb {{imagePath}} alt=post.title %}
                         {% else %}
-                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
-                            data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="center-block img-responsive lazyload"/>
+                            {% assign imagePath = site.data.settings.placeholder | replace: '/assets/images/', '' %}
+                            {% picture placeholder {{imagePath}} alt=post.title %}
                         {% endif %}
-
                         {% if image_path != "" %}
-                            {% responsive_image_block %}
-                            template: _includes/thumbnail_image.html
-                            path: {{ image_path }}
-                            fullpath: {{ full_path }}
-                            {% if post.title %}
-                            title: {{ post.title | slugify: "ascii"}}
-                            alt: {{ post.title | slugify: "ascii"}}
-                            {% endif %}
-                            {% endresponsive_image_block %}
                         {% endif %}
                             <div class="read-article">
                                 <i class="fa fa-eye"></i> Read Article

data/_includes/head.html

@@ -8,9 +8,7 @@
         {% endif %}
     </title>
     {% include_cached css.html pageCSS=page.css-package layoutCSS=layout.css-package %}
-    <link rel="icon" href="{% if site.data.settings.favicon %}
-    {% asset_path '{{site.data.settings.favicon}}'  %}
-    {% endif %}" type="image/png" />
+    <link rel="icon" href="{{site.data.settings.favicon}}" type="image/png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% include_cached google-analytics.html %}
     {% if page.keywords %}

data/_includes/image.html

@@ -1,6 +1,6 @@
 {% if include.lightbox_disabled %}
-![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{% asset_path  '{{include.name}}'  %}"}
+![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{{include.path}}"}
 {% else %}
-[![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{% asset_path '{{include.name}}' %}"}]({% if include.url %}{{include.url}}{% elsif include.lightbox_disabled %}{% else %}{% asset_path "{{include.name}}"  %}{% endif %}){% if include.lightbox_disabled %}{% else %}{% if include.url %}{% else %}{: data-featherlight="{% asset_path '{{include.name}}' %}" data-title="{{include.alt}}"}{% endif %}{% endif %}
+[![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{{include.path}}"}]({% if include.url %}{{include.url}}{% elsif include.lightbox_disabled %}{% else %}"{{include.path}}"{% endif %}){% if include.lightbox_disabled %}{% else %}{% if include.url %}{% else %}{: data-featherlight="{{include.name}}" data-title="{{include.alt}}"}{% endif %}{% endif %}
 {% endif %}
 

data/_includes/javascript.html

@@ -1,10 +1,9 @@
 {% if page.js-package %}
     {% capture js-package %}package-{{page.js-package}}{% endcapture %}
-    <script type="text/javascript" src="{% asset_path {{js-package}}  %}"></script>
+    <script type="text/javascript" src="{% asset_path {{js-package}}  %}?v={% bust_cache %}"></script>
 {% elsif layout.js-package %}
     {% capture js-package %}package-{{layout.js-package}}{% endcapture %}
-    <script type="text/javascript" src="{% asset_path {{js-package}}  %}"></script>
+    <script type="text/javascript" src="{% asset_path {{js-package}}  %}?v={% bust_cache %}"></script>
 {% else %}
-    <script type="text/javascript" src="{% asset_path package-main %}"></script>
-{% endif %}
-
+    <script type="text/javascript" src="{% asset_path package-main %}?v={% bust_cache %}"></script>
+{% endif %}

data/_includes/post-sidebar.html

@@ -18,54 +18,18 @@
                             {% if post.image.thumb %}
                                     {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
                                     {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
-                                    {% responsive_image_block %}
-                                    template: _includes/thumb.html
-                                    path: {{ image_path }}
-                                    fullpath: {{ full_path }}
-                                    {% if post.title %}
-                                    title: {{ post.title | slugify: "ascii"}}
-                                    alt: {{ post.title | slugify: "ascii"}}
-                                    {% endif %}
-                                    {% endresponsive_image_block %}
                              {% elsif post.image.name %}
                                     {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
                                     {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
-                                    {% responsive_image_block %}
-                                    template: _includes/thumb.html
-                                    path: {{ image_path }}
-                                    fullpath: {{ full_path }}
-                                    {% if post.title %}
-                                    title: {{ post.title | slugify: "ascii"}}
-                                    alt: {{ post.title | slugify: "ascii"}}
-                                    {% endif %}
-                                    {% endresponsive_image_block %}
                             {% elsif post.image.path %}
                                     {% capture image_path %}{{post.image.path | remove_first: '/'}}{% endcapture %}
                                     {% capture full_path %}{{post.image.path }}{% endcapture %}
-                                    {% responsive_image_block %}
-                                    template: _includes/thumb.html
-                                    path: {{ image_path }}
-                                    fullpath: {{ full_path }}
-                                    {% if post.title %}
-                                    title: {{ post.title | slugify: "ascii"}}
-                                    alt: {{ post.title | slugify: "ascii"}}
-                                    {% endif %}
-                                    {% endresponsive_image_block %}
                             {% elsif post.image == site.data.settings.social_share_image %}
                                 <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{site.data.settings.placeholder}}"
                                     alt="{{post.title}}" class="center-block img-responsive lazyload" />
                             {% elsif post.image %}
                                     {% capture image_path %}{{post.image | remove_first: '/'}}{% endcapture %}
                                     {% capture full_path %}{{post.image }}{% endcapture %}
-                                    {% responsive_image_block %}
-                                    template: _includes/thumb.html
-                                    path: {{ image_path }}
-                                    fullpath: {{ full_path }}
-                                    {% if post.title %}
-                                    title: {{ post.title | slugify: "ascii"}}
-                                    alt: {{ post.title | slugify: "ascii"}}
-                                    {% endif %}
-                                    {% endresponsive_image_block %}
                              {% else %}
                                 <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                  data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="img-responsive lazyload"/>
@@ -108,54 +72,18 @@
                     {% if post.image.thumb %}
                         {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
                         {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
-                        {% responsive_image_block %}
-                        template: _includes/thumb.html
-                        path: {{ image_path }}
-                        fullpath: {{ full_path }}
-                        {% if post.title %}
-                        title: {{ post.title | slugify: "ascii"}}
-                        alt: {{ post.title | slugify: "ascii"}}
-                        {% endif %}
-                        {% endresponsive_image_block %}
                  {% elsif post.image.name %}
                         {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
                         {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
-                        {% responsive_image_block %}
-                        template: _includes/thumb.html
-                        path: {{ image_path }}
-                        fullpath: {{ full_path }}
-                        {% if post.title %}
-                        title: {{ post.title | slugify: "ascii"}}
-                        alt: {{ post.title | slugify: "ascii"}}
-                        {% endif %}
-                        {% endresponsive_image_block %}
                  {% elsif post.image.path %}
                         {% capture image_path %}{{post.image.path | remove_first: '/' }}{% endcapture %}
                         {% capture full_path %}{{post.image.path }}{% endcapture %}
-                        {% responsive_image_block %}
-                        template: _includes/thumb.html
-                        path: {{ image_path }}
-                        fullpath: {{ full_path }}
-                        {% if post.title %}
-                        title: {{ post.title | slugify: "ascii"}}
-                        alt: {{ post.title | slugify: "ascii"}}
-                        {% endif %}
-                        {% endresponsive_image_block %}
                 {% elsif post.image == site.data.settings.social_share_image %}
                     <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{site.data.settings.placeholder}}"
                         alt="{{post.title}}" class="center-block img-responsive lazyload" />
                  {% elsif post.image %}
                         {% capture image_path %}{{post.image | remove_first: '/' }}{% endcapture %}
                         {% capture full_path %}{{post.image }}{% endcapture %}
-                        {% responsive_image_block %}
-                        template: _includes/thumb.html
-                        path: {{ image_path }}
-                        fullpath: {{ full_path }}
-                        {% if post.title %}
-                        title: {{ post.title | slugify: "ascii"}}
-                        alt: {{ post.title | slugify: "ascii"}}
-                        {% endif %}
-                        {% endresponsive_image_block %}
                  {% else %}
                     <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                     data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="img-responsive lazyload"/>

data/_includes/responsive-image.html

@@ -1,6 +1,34 @@
+{% assign resizedImageTypes = "jpg,jpeg,png" | split: ',' %}
+{% assign resized = false %}
+{% for imageType in resizedImageTypes %}
+    {% if include.path contains imageType %}
+        {% assign resized = true %}
+    {% endif %}
+{% endfor %}
+
+{% if resized %}
+{% assign webpImage = include.path | replace: "/assets/images", "/assets/images/webp"| split: "." %}
+{% assign webpImage =  webpImage[0] | append: ".webp" %}
+{% assign imageType = "image/" | append: include.type %}
+
+{% assign smallImage = include.path | replace: '/assets/images' , '/assets/images/400' %}
+{% assign mediumImage = include.path | replace: '/assets/images' , '/assets/images/800' %}
+{% assign largeImage = include.path | replace: '/assets/images' , '/assets/images/1400' %}
+
 <picture>
-    {% for i in resized %}
-        <source media="(min-width: {{ i.width }}px)" data-srcset="/{{ i.path }}">
-    {% endfor %}
-    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/{{ path }}" class="img-responsive lazyload">
-</picture>
+<!--[if IE 9]><video style="display: none;><![endif]-->
+<source data-srcset="{{smallImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 480px)" type="image/webp" />
+<source data-srcset="{{smallImage}}" media="(max-width: 480px)" type="{{imageType}}" />
+<source data-srcset="{{mediumImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 900px)" type="image/webp" />
+<source data-srcset="{{mediumImage}}" media="(max-width: 900px)" type="{{imageType}}" />
+<source data-srcset="{{largeImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 1400px)" type="image/webp" />
+<source data-srcset="{{largeImage}}" media="(max-width: 1400px)" type="{{imageType}}" />
+<source data-srcset="{{include.path | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" type="image/webp"/>
+<source data-srcset="{{include.path}}" type="{{imageType}}"/>
+<!--[if IE 9]></video><![endif]-->
+<img data-src="{{largeImage}}" class="lazyload" alt="{{include.alt}}" />
+</picture>
+{% else %}
+<img  data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="{{include.image}}"
+ alt="{{include.alt}}" class="lazyload"/>
+{% endif %}

data/_includes/thumb-image.html

@@ -0,0 +1,31 @@
+{% assign resizedImageTypes = "jpg,jpeg,png" | split: ',' %}
+{% assign resized = false %}
+{% for imageType in resizedImageTypes %}
+    {% if include.path contains imageType %}
+        {% assign resized = true %}
+    {% endif %}
+{% endfor %}
+{% if resized %}
+{% assign webpImage = include.path | replace: "/assets/images", "/assets/images/webp"| split: "." %}
+{% assign webpImage =  webpImage[0] | append: ".webp" %}
+{% assign imageType = "image/" | append: include.type %}
+
+{% assign smallImage = include.path | replace: '/assets/images' , '/assets/images/400' %}
+{% assign mediumImage = include.path | replace: '/assets/images' , '/assets/images/800' %}
+{% assign largeImage = include.path | replace: '/assets/images' , '/assets/images/1400' %}
+
+<picture>
+<!--[if IE 9]><video style="display: none;><![endif]-->
+<source data-srcset="{{smallImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 480px)" type="image/webp" />
+<source data-srcset="{{smallImage}}" media="(max-width: 480px)" type="{{imageType}}" />
+<source data-srcset="{{mediumImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 900px)" type="image/webp" />
+<source data-srcset="{{mediumImage}}" media="(max-width: 900px)" type="{{imageType}}" />
+<source data-srcset="{{largeImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 1400px)" type="image/webp" />
+<source data-srcset="{{largeImage}}" media="(max-width: 1400px)" type="{{imageType}}" />
+<!--[if IE 9]></video><![endif]-->
+<img data-src="{{largeImage}}" class="lazyload" alt="{{include.alt}}" />
+</picture>
+{% else %}
+<img  data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="{{include.image}}"
+ alt="{{include.alt}}" class="lazyload"/>
+{% endif %}

data/_sass/app-package.scss

@@ -0,0 +1,11 @@
+// Main css package file
+@charset "UTF-8";
+//Bootstrap Overrides
+@import "app/overrides";
+//Boostrap Includes
+@import 'bootstrap';
+// Linaro Jekyll Theme Includes
+@import "core";
+@import "blog";
+// App Includes
+@import "app/custom";

data/assets/css/main-blog.scss

@@ -3,12 +3,17 @@
 @charset "UTF-8";
 //Bootstrap Overrides
 @import "app/overrides";
+
 //Boostrap Includes
-@import '_bootstrap';
+@import 'bootstrap';
+@import 'bootstrap/variables';
+
 // Linaro Jekyll Theme Includes
 @import 'core';
+
 // Additional Core Includes
 @import 'blog';
+
 // App Includes
 @import "app/custom";
 @import "app/blog";

data/assets/css/main-error.scss

@@ -4,10 +4,11 @@
 // App Overrides - Sass variables
 @import "app/overrides";
 //Boostrap Includes
-@import '_bootstrap';
+@import 'bootstrap';
+@import 'bootstrap/variables';
 // Core Theme
 @import 'core';
 //Additional Core includes
 @import "core/error";
 // App Includes
-@import "app/custom";
+@import "app/custom";

data/assets/css/main-search.scss

@@ -0,0 +1,13 @@
+---
+---
+@charset "UTF-8";
+//Bootstrap Overrides
+@import "app/overrides";
+//Boostrap Includes
+@import 'bootstrap';
+@import 'bootstrap/variables';
+// Linaro Jekyll Theme Includes
+@import "core";
+// App Includes
+@import "app/search";
+@import "app/custom";

data/assets/css/main.scss

@@ -4,8 +4,9 @@
 //Bootstrap Overrides
 @import "app/overrides";
 //Boostrap Includes
-@import '_bootstrap';
+@import 'bootstrap';
+@import 'bootstrap/variables';
 // Linaro Jekyll Theme Includes
 @import "core";
 // App Includes
-@import "app/custom";
+@import "app/custom";

data/assets/js/app/main.js

@@ -3,6 +3,12 @@ $(window).click(function() {
     $(".dropdown-submenu.sub-menu > .dropdown-menu.sub-menu").hide();
 });
 $(document).ready(function () {
+    window.lazySizesConfig = window.lazySizesConfig || {};
+    window.lazySizesConfig.customMedia = {
+        '--small': '(max-width: 480px)',
+        '--medium': '(max-width: 900px)',
+        '--large': '(max-width: 1400px)',
+    };
     // Clipboard JS
     if($("div.highlight").length > 0){
         $('div.highlight').each(function (index) {

data/assets/js/pacakge-search.js

@@ -0,0 +1,8 @@
+//= require vendor/jquery
+//= require vendor/bootstrap
+//= require vendor/cookieconsent
+//= require vendor/lazysizes
+
+//= require app/main
+//= require app/search
+//= require app/custom

data/assets/js/package-blog.js

@@ -9,4 +9,5 @@
 
 //= require app/main
 //= require app/search
-//= require app/custom
+//= require app/tables
+//= require app/custom

data/assets/js/package-extended.js

@@ -11,4 +11,4 @@
 //= require app/main
 //= require app/search
 //= require app/tables
-//= require app/custom
+//= require app/custom

data/assets/js/package-home.js

@@ -0,0 +1,14 @@
+//= require vendor/jquery
+//= require vendor/bootstrap
+//= require vendor/cookieconsent
+//= require vendor/lazysizes
+//= require vendor/owl.carousel
+//= require vendor/jquery.doubleScroll
+//= require vendor/featherlight
+
+//= require app/main
+//= require app/tables
+//= require app/search
+//= require app/sticky-tab-bar
+//= require app/custom
+//= require app/home

data/assets/js/package-main.js

@@ -2,12 +2,14 @@
 //= require vendor/bootstrap
 //= require vendor/cookieconsent
 //= require vendor/lazysizes
-//= require vendor/owl.carousel
 //= require vendor/ls.unveilhooks
 //= require vendor/jquery.doubleScroll
+//= require vendor/owl.carousel
 //= require vendor/featherlight
 
 //= require app/main
+//= require app/tables
 //= require app/search
+//= require app/fly
 //= require app/sticky-tab-bar
-//= require app/custom
+//= require app/custom

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jumbo-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 4.7.8
+  version: '4.8'
 platform: ruby
 authors:
 - Kyle Kirkby
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-05-29 00:00:00.000000000 Z
+date: 2019-06-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.7.4
+        version: 3.7.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.7.4
+        version: 3.7.3
 - !ruby/object:Gem::Dependency
   name: jekyll-seo-tag
   requirement: !ruby/object:Gem::Requirement
@@ -38,6 +38,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.2'
+- !ruby/object:Gem::Dependency
+  name: jekyll-picture-tag-latest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.1
 - !ruby/object:Gem::Dependency
   name: jekyll-sitemap
   requirement: !ruby/object:Gem::Requirement
@@ -66,6 +80,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: '0.2'
+- !ruby/object:Gem::Dependency
+  name: bootstrap-sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.4.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.4.1
 - !ruby/object:Gem::Dependency
   name: jekyll-redirect-from
   requirement: !ruby/object:Gem::Requirement
@@ -199,7 +227,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '1.1'
 - !ruby/object:Gem::Dependency
-  name: jekyll-responsive-image
+  name: jekyll-last-modified-at
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -274,28 +302,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.9.24
+        version: 1.9.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.9.24
+        version: 1.9.6
 - !ruby/object:Gem::Dependency
   name: rack
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - ">"
       - !ruby/object:Gem::Version
-        version: 1.6.11
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - ">"
       - !ruby/object:Gem::Version
-        version: 1.6.11
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -314,16 +342,16 @@ dependencies:
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '0'
 description: 
 email:
 - kyle.kirkby@linaro.org
@@ -336,6 +364,7 @@ files:
 - _config.yml
 - _data/footer.yml
 - _data/nav.yml
+- _data/picture.yml
 - _data/settings.yml
 - _data/sidebar-nav.yml
 - _data/sticky-tab-bar.yml
@@ -370,8 +399,7 @@ files:
 - _includes/sidebar.html
 - _includes/social-media-icons.html
 - _includes/sticky-tab-bar.html
-- _includes/thumb.html
-- _includes/thumbnail_image.html
+- _includes/thumb-image.html
 - _includes/universal-nav.html
 - _includes/youtube.html
 - _layouts/author.html
@@ -390,6 +418,7 @@ files:
 - _sass/_bootstrap-mincer.scss
 - _sass/_bootstrap-sprockets.scss
 - _sass/_bootstrap.scss
+- _sass/app-package.scss
 - _sass/app/blog.scss
 - _sass/app/contact.scss
 - _sass/app/custom.scss
@@ -500,9 +529,9 @@ files:
 - _sass/core/universal-nav.scss
 - _sass/core/youtube-lazy.scss
 - _sass/core/youtube.scss
-- _sass/home.scss
 - assets/css/main-blog.scss
 - assets/css/main-error.scss
+- assets/css/main-search.scss
 - assets/css/main.scss
 - assets/fonts/fontawesome-webfont.eot
 - assets/fonts/fontawesome-webfont.svg
@@ -540,7 +569,6 @@ files:
 - assets/images/social-media-image.png
 - assets/js/app/blog-comments.js
 - assets/js/app/custom.js
-- assets/js/app/facebook.js
 - assets/js/app/fly.js
 - assets/js/app/main.js
 - assets/js/app/scroll-to-anchors.js
@@ -548,8 +576,10 @@ files:
 - assets/js/app/sticky-tab-bar.js
 - assets/js/app/tables.js
 - assets/js/app/youtube-lazy.js
+- assets/js/pacakge-search.js
 - assets/js/package-blog.js
 - assets/js/package-extended.js
+- assets/js/package-home.js
 - assets/js/package-main.js
 - assets/js/vendor/bootstrap-multiselect.js
 - assets/js/vendor/bootstrap.js

data/_includes/thumb.html

@@ -1,2 +0,0 @@
-<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/{{resized[0].path}}" 
-class="img-responsive lazyload">

data/_includes/thumbnail_image.html

@@ -1,10 +0,0 @@
-{% comment %}
-    This is a template for the jekyll-responsive-image plugin.
-    This will generate a picture element
-{% endcomment %}
-<picture>
-    {% for i in resized %}
-        <source media="(max-width: {{ i.width }}px)" data-srcset="/{{ i.path }}">
-    {% endfor %}
-    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/{{ path }}" class="img-responsive lazyload">
-</picture>

data/_sass/home.scss

@@ -1,2 +0,0 @@
-/* Home Sass Partials */
-@import 'core/homepage';

data/assets/js/app/facebook.js

@@ -1,8 +0,0 @@
-<!-- <div id="fb-root"></div>
-<script>(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) return;
-  js = d.createElement(s); js.id = id;
-  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9&appId=155006367915796";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script> -->