Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get image with @2x version using .getThumbnail(), not getHtml() #4347

Open
julmot opened this issue May 9, 2019 · 1 comment

Comments

Projects
None yet
1 participant
@julmot
Copy link
Contributor

commented May 9, 2019

Feature Request

Feature description

It seems that it's impossible to read out the @1x and @2x version of a thumbnail at once, within Twig, without directly outputting the HTML.
I just need to get the path to these two versions of a thumbnail to handle it internally. I can't handle it using generated HTML.

The .getHtml() methods seems to handle this:

foreach ([1, 2] as $highRes) {
$thumbConfigRes = clone $thumbConfig;
$thumbConfigRes->setHighResolution($highRes);
$srcsetEntry = $image->getThumbnail($thumbConfigRes, true) . ' ' . $highRes . 'x';
if (isset($options['cacheBuster']) && $options['cacheBuster']) {
$srcsetEntry = '/cache-buster-' . $image->getModificationDate() . $srcsetEntry;
}
$srcSetValues[] = $srcsetEntry;
}

However, if I'm calling e.g. {{ image.getThumbnail('one-column-banner-image') }} I'm directly getting the @1x path (string). What I would like to have is an object with keys 1x and 2x, each referencing the thumbnail in the corresponding resolution.

Currently, I think I only have two choises: Create a second image style for each image style just with double widths/heights, then I could use {{ image.getThumbnail('one-column-banner-image') }} and {{ image.getThumbnail('one-column-banner-image-2x') }}. Or, add @2x before the file extension. I will choose for the second option, as it'll be better to migrate in case someone comes up with a better approach.

@julmot

This comment has been minimized.

Copy link
Contributor Author

commented May 9, 2019

Solution for me, for now:

  1. Add this to the Twig folder of the bundle
<?php

declare(strict_types=1);

namespace TheBundle\Twig;

class HighResolutionImage extends \Twig_Extension
{
  /**
   * {@inheritdoc}
   */
    public function getFunctions()
  {
    return [
      new \Twig_Function('highResolutionImage', function (string $path) {
        return str_replace(
          array('.jpeg', '.jpg', '.png'),
          array('@2x.jpeg', '@2x.jpg', '@2x.png'),
          $path
        );
      })
    ];
  }
}
  1. Register it within templating_twig.yml, e.g.
    TheBundle\Twig\HighResolutionImage:
        tags:
            - { name: twig.extension }
  1. Usage:
{{ image.getThumbnail('one-column-banner-image') }} <br>
{{ highResolutionImage(image.getThumbnail('one-column-banner-image')) }}

{#
 Outputs:
 /image-thumb__7__one-column-banner-image/swiss-alps.jpeg
 /image-thumb__7__one-column-banner-image/swiss-alps@2x.jpeg
#}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.