Skip to content

Commit

Permalink
Fix images?
Browse files Browse the repository at this point in the history
  • Loading branch information
@philipbelesky
philipbelesky committed Dec 22, 2023
1 parent 4d1d0d9 commit 322ad06
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 161 deletions.
11 changes: 0 additions & 11 deletions site/_config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,3 @@ exclude:
- npm-debug.log
- vendor # Exclude gem file on travis
- assets/resize_cache
- assets/documentation/**/*.jpg # Made by gulp
- assets/documentation/**/*.jpeg # Made by gulp
- assets/documentation/**/*.png # Made by gulp
- assets/projects/**/*.jpg # Made by gulp
- assets/projects/**/*.jpeg # Made by gulp
- assets/projects/**/*.png # Made by gulp
- assets/techniques/**/*.jpg # Made by gulp
- assets/techniques/**/*.jpeg # Made by gulp
- assets/techniques/**/*.png # Made by gulp
keep_files:
- "assets/img" # Made by gulp
28 changes: 3 additions & 25 deletions site/_includes/elements/figure.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,13 @@
{%- capture basePath -%}
/assets/img/{{ page.slug }}/{{ include.image }}
/assets/{{ page.collection }}/{{ page.slug }}/{{ include.image }}
{%- endcapture -%}
{%- capture imageAlt -%}
{%- if include.alt -%}{{ include.alt }}{%- else -%}{{ include.caption }}{%- endif -%}
{%- endcapture -%}

<figure class="gh-figure">
<a class="image-link" href="{{ basePath }}-original.jpeg" target="_blank">
<picture>
<source type="image/webp" srcset="{{ basePath }}-huge.webp 2304w,
{{ basePath }}-larger.webp 1920w,
{{ basePath }}-large.webp 1536w,
{{ basePath }}-medium.webp 1344w,
{{ basePath }}-smaller.webp 1152w,
{{ basePath }}-smaller.webp 960w"
sizes="(min-width: 1472px) 1344px,
(min-width: 1280px) 1152px,
(min-width: 1088px) 960px,
100vw" />
<source srcset="{{ basePath }}-huge.jpeg 2304w,
{{ basePath }}-larger.jpeg 1920w,
{{ basePath }}-large.jpeg 1536w,
{{ basePath }}-medium.jpeg 1344w,
{{ basePath }}-smaller.jpeg 1152w,
{{ basePath }}-smaller.jpeg 960w"
sizes="(min-width: 1472px) 1344px,
(min-width: 1280px) 1152px,
(min-width: 1088px) 960px,
100vw" />
<img src="{{ basePath }}-medium.jpeg" alt="{{ imageAlt }}" />
</picture>
<a class="image-link" href="{{ basePath }}.jpeg" target="_blank">
<img src="{{ basePath }}.jpg" alt="{{ imageAlt }}" />
</a>
{%- if include.caption or include.credit -%}
<figcaption>
Expand Down
252 changes: 127 additions & 125 deletions site/gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,131 +6,133 @@ var count = require("gulp-count");
var img_resize_cache = "./assets/resize_cache/";

gulp.task("figures", function () {
return gulp
.src([
"./assets/documentation/**/!(thumbnail)*.{png,jpg,jpeg}",
"./assets/projects/**/!(thumbnail)*.{png,jpg,jpeg}",
"./assets/techniques/**/!(thumbnail)*.{png,jpg,jpeg}",
])
.pipe(changed(img_resize_cache)) // Retrieves only the files modified since last run
.pipe(count("## figures to resize", { logEmpty: true }))
.pipe(gulp.dest(img_resize_cache)) // Save modified files with original names in cache dir
.pipe
// responsive(
// {
// "**/*.*": [
// {
// rename: {
// suffix: "-original", // original image (for linking to)
// extname: ".jpeg",
// },
// },
// // JPEG VARIATIONS
// {
// width: 960, // 1x Mobile;
// rename: {
// suffix: "-smaller",
// extname: ".jpeg",
// },
// },
// {
// width: 1152, // 1x Desktops at widths less than 1472 (from bpoint)
// rename: {
// suffix: "-small",
// extname: ".jpeg",
// },
// },
// {
// width: 1344, // 1x Desktops at widths greater than 1472 (from bpoint)
// rename: {
// suffix: "-medium",
// extname: ".jpeg",
// },
// },
// {
// width: 1536, // 2x Mobile (768 * 2x); where 768 is assumed max
// rename: {
// suffix: "-large",
// extname: ".jpeg",
// },
// },
// {
// width: 1920, // 2X Tablets and 2X Desktops at low width (960 * 2x)
// rename: {
// suffix: "-larger",
// extname: ".jpeg",
// },
// },
// {
// width: 2304, // 2X Desktops at medium width and above (1152 * 2x)
// rename: {
// suffix: "-huge",
// extname: ".jpeg",
// },
// },
// // WEBP variations
// {
// width: 960, // 1x Mobile;
// rename: {
// suffix: "-smaller",
// extname: ".webp",
// },
// },
// {
// width: 1152, // 1x Desktops at widths less than 1472 (from bpoint)
// rename: {
// suffix: "-small",
// extname: ".webp",
// },
// },
// {
// width: 1344, // 1x Desktops at widths greater than 1472 (from bpoint)
// rename: {
// suffix: "-medium",
// extname: ".webp",
// },
// },
// {
// width: 1536, // 2x Mobile (768 * 2x); where 768 is assumed max
// rename: {
// suffix: "-large",
// extname: ".webp",
// },
// },
// {
// width: 1920, // 2X Tablets and 2X Desktops at low width (960 * 2x)
// rename: {
// suffix: "-larger",
// extname: ".webp",
// },
// },
// {
// width: 2304, // 2X Desktops at medium width and above (1152 * 2x)
// rename: {
// suffix: "-huge",
// extname: ".webp",
// },
// },
// ],
// },
// {
// // Global configuration for all images
// // The output quality for JPEG, WebP and TIFF output formats
// quality: 70,
// // Use progressive (interlace) scan for JPEG and PNG output
// progressive: true,
// // Zlib compression level of PNG output format
// compressionLevel: 6,
// // Strip all metadata
// withMetadata: false,
// // Skip sizes that are too big
// withoutEnlargement: true,
// skipOnEnlargement: false,
// errorOnEnlargement: false,
// }
// )
()
.pipe(gulp.dest("_site/assets/img/")); // Save modified files with new names in output dir
return (
gulp
.src([
"./assets/documentation/**/!(thumbnail)*.{png,jpg,jpeg}",
"./assets/projects/**/!(thumbnail)*.{png,jpg,jpeg}",
"./assets/techniques/**/!(thumbnail)*.{png,jpg,jpeg}",
])
.pipe(changed(img_resize_cache)) // Retrieves only the files modified since last run
.pipe(count("## figures to resize", { logEmpty: true }))
.pipe(gulp.dest(img_resize_cache)) // Save modified files with original names in cache dir
// .pipe
// responsive(
// {
// "**/*.*": [
// {
// rename: {
// suffix: "-original", // original image (for linking to)
// extname: ".jpeg",
// },
// },
// // JPEG VARIATIONS
// {
// width: 960, // 1x Mobile;
// rename: {
// suffix: "-smaller",
// extname: ".jpeg",
// },
// },
// {
// width: 1152, // 1x Desktops at widths less than 1472 (from bpoint)
// rename: {
// suffix: "-small",
// extname: ".jpeg",
// },
// },
// {
// width: 1344, // 1x Desktops at widths greater than 1472 (from bpoint)
// rename: {
// suffix: "-medium",
// extname: ".jpeg",
// },
// },
// {
// width: 1536, // 2x Mobile (768 * 2x); where 768 is assumed max
// rename: {
// suffix: "-large",
// extname: ".jpeg",
// },
// },
// {
// width: 1920, // 2X Tablets and 2X Desktops at low width (960 * 2x)
// rename: {
// suffix: "-larger",
// extname: ".jpeg",
// },
// },
// {
// width: 2304, // 2X Desktops at medium width and above (1152 * 2x)
// rename: {
// suffix: "-huge",
// extname: ".jpeg",
// },
// },
// // WEBP variations
// {
// width: 960, // 1x Mobile;
// rename: {
// suffix: "-smaller",
// extname: ".webp",
// },
// },
// {
// width: 1152, // 1x Desktops at widths less than 1472 (from bpoint)
// rename: {
// suffix: "-small",
// extname: ".webp",
// },
// },
// {
// width: 1344, // 1x Desktops at widths greater than 1472 (from bpoint)
// rename: {
// suffix: "-medium",
// extname: ".webp",
// },
// },
// {
// width: 1536, // 2x Mobile (768 * 2x); where 768 is assumed max
// rename: {
// suffix: "-large",
// extname: ".webp",
// },
// },
// {
// width: 1920, // 2X Tablets and 2X Desktops at low width (960 * 2x)
// rename: {
// suffix: "-larger",
// extname: ".webp",
// },
// },
// {
// width: 2304, // 2X Desktops at medium width and above (1152 * 2x)
// rename: {
// suffix: "-huge",
// extname: ".webp",
// },
// },
// ],
// },
// {
// // Global configuration for all images
// // The output quality for JPEG, WebP and TIFF output formats
// quality: 70,
// // Use progressive (interlace) scan for JPEG and PNG output
// progressive: true,
// // Zlib compression level of PNG output format
// compressionLevel: 6,
// // Strip all metadata
// withMetadata: false,
// // Skip sizes that are too big
// withoutEnlargement: true,
// skipOnEnlargement: false,
// errorOnEnlargement: false,
// }
// )
// ()
.pipe(gulp.dest("_site/assets/img/"))
); // Save modified files with new names in output dir
});

// These have different quality and size formats (lower/smaller/singular)
Expand Down

0 comments on commit 322ad06

Please sign in to comment.