Support for Multiple Breakpoints

Created on 21 March 2024, 3 months ago
Updated 12 April 2024, 3 months ago

Currently, we store 3 different versions of images in Drupal, sized for desktop, mobile, and oversized. As we transition to using Brandfolder, it would be nice to store one full-sized image and use the height and width parameters on the Brandfolder CDN URL to adjust the size. Can the Brandfolder module be used for that?

đź’¬ Support request
Status

Closed: works as designed

Version

5.0

Component

Miscellaneous

Created by

🇺🇸United States rwsimmo

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @rwsimmo
  • 🇺🇸United States ndewhurst USA

    Absolutely! Go ahead and store one high-resolution, uncropped image in Brandfolder. In Drupal, you can create three image styles, each with their own cropping/scaling. Your mobile image style could have a totally different aspect ratio than the others. You can use the Focal Point or Manual Crop modules to control the crop area. You can then use those image styles when rendering the image field on Brandfolder Image media entities. You can create responsive image styles via the core responsive image module (i.e. /admin/config/media/responsive-image-style) or achieve the same type of thing in other ways.
    The images delivered via the Brandfolder CDN whenever each image style is used will be transformed via the URL params you mentioned.

  • Status changed to Needs review 3 months ago
  • 🇺🇸United States ndewhurst USA
  • 🇺🇸United States rwsimmo

    Thank you for the suggestion to use image styles. Unfortunately, when I set up a responsive image style with the “Focal Point Crop” effect, the resulting Brandfolder CDN URL does not have any query parameters added to it to control the image size. The URL looks like this whether or not I am using the responsive image style:

    https://cdn.bfldr.com/X5ZUFVLL/at/8nrmfccm6b6vb59qmk9hmmsf/phone_mockupv62x.jpg

    Here is what I tried:

    1. Enabled the Responsive Image module.
    2. Installed and enabled the Focal Point module.
    3. Created image styles using the “Focal Point Crop” effect.
    4. Created a Responsive Image style that uses my image styles at different breakpoints.
    5. In manage display (“Full Content” view mode) for my brandfolder_image media type, I changed the “Format” for the Brandfolder image field to “Responsive Image” and configured it to use my Responsive Image style.
    6. In my content entity, I have a “Brandfolder Image” entity reference field for the “Brandfolder Image” media type.
    7. In “Manage Display” for my content entity, the “Formatter” for the Brandfolder image field is set to “Referenced Entity” and it is configured to use the “Full Content” view mode.

    Note that when I step through the code in BrandfolderStreamWrapper.php and I get to “Handle Image Styles” section, the preg_match test in line 315 returns no matches.

     if (preg_match("/^styles\/([^\/]+)\/bf\/(.*)$/", $uri_sans_scheme, $matches)) {
    

    $uri_sans_scheme contain the value: "X5ZUFVLL/at/s9fgbjp9vpjkf7p8st26jfn5/Background-oversized-2560x646.png"

  • Status changed to Closed: works as designed 3 months ago
  • 🇺🇸United States rwsimmo

    I suspected that this issue was caused by I conflict with the theme that we use on our websites. So, I tested creating a responsive Brandfolder image on a brand new Drupal site built from scratch and everything worked fine.

Production build 0.69.0 2024