0
votes

I have a partial that creates a responsive image for my website. This is the code:

[viewBag]
==
<?php
function onStart()
{
    // $this['src'] is a file object
    // e.g. for uploaded files in public directory
    if ($this['src'] instanceof \System\Models\File) {
        $this['width'] = $this['src']->getWidthAttribute();
        $this['public_path'] = $this['src']->path;
    }
    // $this['src'] is a string
    else {
        $this['public_path'] = \System\Classes\MediaLibrary::url($this['src']);

        // Relative path provided
        if (!file_exists($this['src'])) {
            $this['local_path'] = base_path() . Config::get('cms.storage.media.path') . '/' . $this['src'];
        }
        // Full path provided
        else {
            $this['local_path'] = $this['src'];
        }

        // Get width of original image
        $file = new \October\Rain\Database\Attach\File;
        $file->fromFile($this['local_path']);
        $this['width'] = $file->getWidthAttribute();
        $this['image_from'] = 'media';
    }

    if (isset($this['max_width']) && $this['max_width'] < $this['width']) {
        $this['width'] = $this['max_width'];
    }
}
?>
==
<img
  class="{{ class }}"
  src="{% if width <= 1600 %}{{src}}{% else %}{{ public_path|resize(1600,1600) }}{% endif %}"
  srcset="
    {% if width >= 500 %}{{ public_path|resize(500,500) }} 500w {% endif %}
    {% if width >= 768 %},{{ public_path|resize(768,768) }} 768w {% endif %}
    {% if width >= 1200 %}, {{ public_path|resize(1200,1200) }} 1200w {% endif %}
    {% if width >= 1600 %}, {{ public_path|resize(1600,1600) }} 1600w {% endif %}
    {% if width >= 2000 %}, {{ public_path|resize(2000,2000) }} 2000w {% endif %}
    {% if width >= 2500 %}, {{ public_path|resize(2500,2500) }} 2500w {% endif %}
    {% if width >= 3000 %}, {{ public_path }} 3000w {% endif %}"
  sizes="
    {% if width >= 500 %}(max-width: 500px) 500px{% endif %}
    {% if width >= 768 %},(max-width: 768px) 768px{% endif %}
    {% if width >= 1200 %}, (max-width: 1200px) 1200px{% endif %}
    {% if width >= 1600 %}, (max-width: 1600px) 1600px{% endif %}
    {% if width >= 2000 %}, (max-width: 2000px) 2000px{% endif %}
    {% if width >= 2500 %}, (max-width: 2500px) 2500px{% endif %}
    {% if width >= 3000 %}, 3000px{% endif %}"
  alt="{{ alt }}"
>

I then use this in my Twig like this:

{% partial 'responsive-image' src='hotel/pool.jpg' class='jarallax-img' alt='background image' %}

This successfully creates the thumbnail images, however checking in my storage/app/uploads/public directory, it appears to duplicate the full-size images on every single request and then saves them into random subdirectories there. Unfortunately, this quickly uses up the available hard drive space on the drive.

1

1 Answers

1
votes

The part that duplicates the image is this:

// Get width of original image
$file = new \October\Rain\Database\Attach\File;
$file->fromFile($this['local_path']);
$this['width'] = $file->getWidthAttribute();

That's why it creates a new copy of the original image on every request.

Fortunately, PHP has a built-in function to get the image width, so you don't even need to use OctoberCMS to get the width:

$this['width'] = getimagesize($this['local_path'])[0];