Displaying an uploaded image with a set "density"

  • Context:


    Client has a website with a blog page. There is an image field type for saving a version of the blog banner image with custom width, height, and density. This image is to be used as a thumbnail on the homepage which displays the latest blog posts as part of an optional content band template which uses Perch Blocks.


    <perch:blog id="image" type="image" width="650" height="321" label="Image" density="2" bucket="Blog" suppress>


    As expected this is saved as filename-w650h321@2x.jpg within the resources directory.

    On the homepage we can retrieve the latest three blog posts using perch_blog_custom and set a Perch system variable to pass the data to perch_content_custom template which uses blocks:

    PHP
    1. $articles = perch_blog_custom([
    2. 'count' => 3,
    3. 'sort' => 'postDateTime',
    4. 'sort-order' => 'DESC',
    5. 'skip-template' => true,
    6. ]);
    7. PerchSystem::set_var('articles', $articles);


    Within our block template we can use a repeater with id="articles" so that it will loop through the three blog articles:


    As seen in the perch documentation specifying the width and height attributes will return the file name saved as filename-w650h321.jpg as expected.


    The issue:


    Specifying the density attribute does not retrieve the correct image name. Expected file name should be filename-w650h321@2x.jpg .

    I did some debugging within the Perch Core files and found the following:

    When the get_processed($raw=false) line: 1561 method in the PerchFieldType_image class (PerchFieldTypes.class.php) is called it does not check if the density tag is set on the field.

    $raw can either be a string (original file path and name) or an array of properties associated with the image. In my case it is the (string) original file path and name. Which means the following is run:

    PHP
    1. // PerchFieldTypes.class.php - Line: 1661
    2. if ($this->Tag->width() || $this->Tag->height()) {
    3. $PerchImage = new PerchImage;
    4. return $PerchImage->get_resized_filename($raw, $this->Tag->width(), $this->Tag->height());
    5. }


    This calls the get_resized_filename() method in the PerchImage class which returns the file name based on the provided tags:


    As you can see there are two optional parameters for suffix and density which are not being passed. Therefore the filename is never set to include the density.



    The question:


    Is this the intended behaviour or was not coded to work with the implementation as explained in the context section of this post?


    Quickly modifying the core code to check for and include the density is working. However not sure what knock-on effects that may have (other than losing the code when updating perch)?

    PHP
    1. if ($this->Tag->density()) {
    2. return $PerchImage->get_resized_filename($raw, $this->Tag->width(), $this->Tag->height(), false, $this->Tag->density());
    3. }
  • George G

    Approved the thread.
  • Hi James,


    While the skip-template option returns the items' data, it does not include all the raw data by default. You can tell Perch you want all the raw data with the raw option:


    PHP
    1. $articles = perch_blog_custom([
    2. 'count' => 3,
    3. 'sort' => 'postDateTime',
    4. 'sort-order' => 'DESC',
    5. 'skip-template' => true,
    6. 'raw' => true,
    7. ]);


    Hopefully this will return all the image data you need for templating.

  • Thank you for the suggestion Hussein,


    Unfortunately even with the raw option set to true it's still passing a the filepath string to the get_processed method in the PerchFieldType_image class therefore never hitting the logic that sets the correct tags to the filename.


    You would expect $raw to be an array of data. But it's always a string (the filepath).