Answers.Body: <p>If you're not comfortable building your own custom module and you're willing to look at alternative Algolia plugins, <a href="https://plugins.craftcms.com/scout" rel="nofollow noreferrer">Scout</a> offers a reasonably simple method for defining the data you want to send to Algolia just inside its config file, and you can easily define image transforms within the transformer function:</p>
  <pre><code>// config/scout.php
  
  // Imports
  use craft\elements\Entry;
  use craft\elements\db\EntryQuery;
  use rias\scout\ScoutIndex;
  use spacecatninja\imagerx\ImagerX;
  
  return [
      'indices' =&gt; [
          ScoutIndex::create(&quot;myAlgoliaIndexName&quot;)
              -&gt;criteria(function(EntryQuery $query) {
                  return $query-&gt;section('myContent');
              })
              -&gt;transformer(function(Entry $entry) {
                  $logo = $entry-&gt;logo-&gt;one();
                  
                  // Generate logo image transform for Algolia using Imager X
                  // (other image transform plugins/techniques are available!)
                  $logoTransform = ImagerX::$plugin-&gt;imager-&gt;transformImage($logo,
                      [
                          'width' =&gt; 300,
                          'height' =&gt; 300
                      ],
                      [
                          'format' =&gt; 'webp',
                      ]
                  );
                  
                  // Return the data to sync with Algolia
                  return [
                      'id' =&gt; (int)$entry-&gt;id,
                      'url' =&gt; $entry-&gt;url,
                      'title' =&gt; $entry-&gt;title,
                      'logo' =&gt; $logoTransform-&gt;url,
                  ];
              }),
      ],
  ];
  
  </code></pre>
  <p>If you want multiple image transforms, you can generate them all and include them in an array of image URLs. The initial Scout indexing operation will take a little time since it has to generate the image transforms but providing those images are cached somewhere once they're generated, subsequent operations ought to be much quicker.</p>
  <p>I've shown the code using the <a href="https://plugins.craftcms.com/imager-x" rel="nofollow noreferrer">Imager X</a> image transformation plugin (which is a paid plugin) because that's what I use with Scout so it was easy to grab a code example, but you could use Craft's own image transforms instead.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-24T23:40:50.083Z
Answers.Text: I'd actually already started exploring using Scout after posting this and using native Craft image transforms. Haven't gotten it working with it adding the new image data yet though.
Answers.UserDisplayName: Tyssen
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-25T00:42:26.220Z
Answers.Text: Actually, it is now. :)
Answers.UserDisplayName: Tyssen
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-25T01:07:25.530Z
Answers.Text: Is there a way to see locally what values are being returned before actually syncing with Algolia? I've got a couple of pieces of data that I want to modify first and testing will be easier if I can do it locally before invoking the import/refresh.
Answers.UserDisplayName: Tyssen
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-25T10:59:36.523Z
Answers.Text: Yes, if you don't mind a bit of work setting up your IDE and dev environment to run Xdebug so you can put breakpoints in your Scout transformer methods and inspect the data. If you're using DDEV, it's already set up for you so you'd just need to set up your IDE to allow PHP debugging.
Answers.UserDisplayName: Martin Spain
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-24T09:11:05.297Z
Answers.LastActivityDate: 2023-10-24T09:11:05.297Z
Answers.UserDisplayName: Martin Spain
Answers.Body: <p>You can use the <code>EVENT_BEFORE_ALGOLIA_SYNC</code> event to update the record that's being pushed to Algolia. In this event, you can modify the value that's being generated for the asset field, which seems to be the URL of the asset by default. It's not well documented, but the <a href="https://github.com/brilliancenw/craft-algolia-sync/blob/v4/src/events/beforeAlgoliaSyncEvent.php#L18" rel="nofollow noreferrer">event has a <code>recordElement</code> property</a> which will give you access to the element that's the source of the record. You can use that to access the asset, then update the record's value for that asset:</p>
  <pre class="lang-php prettyprint-override"><code>// Imports
  use yii\base\Event;
  use \brilliance\algoliasync\services\AlgoliaSyncService;
  
  // init()
  Event::on(
      AlgoliaSyncService::class,
      AlgoliaSyncService::EVENT_BEFORE_ALGOLIA_SYNC,
      function (\brilliance\algoliasync\events\beforeAlgoliaSyncEvent $event) {
          /** @var Element $element */
          $event-&gt;recordElement;
  
          $asset = $event-&gt;getFieldValue('myAssetField')-&gt;collect()-&gt;one();
  
          $event-&gt;recordUpdate['attributes']['myAssetField'] = $asset-&gt;getUrl([
              'width' =&gt; 600,
              'height' =&gt; 600,
          ]);
      }
  );
  </code></pre>
  <p>You can put that code in a <a href="https://craftcms.com/docs/4.x/extend/module-guide.html" rel="nofollow noreferrer">custom module</a>.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-24T08:06:10.773Z
Answers.LastActivityDate: 2023-10-24T08:06:10.773Z
Answers.UserDisplayName: MoritzLost
Body: <p>I'm investigating using Algolia for a search page on a site where the entries have a single main image assets field where the file uploaded is quite large.</p>
  <p>Transforms are performed in the Craft templates to output different image sizes.</p>
  <p>But how do I send resized images to Algolia when there's just a single image field for the entry?</p>
  <p>Are there any plugins that let you perform image transforms before syncing the data to Algolia?</p>
  <p>At the moment I'm using <a href="https://github.com/brilliancenw/craft-algolia-sync" rel="nofollow noreferrer">https://github.com/brilliancenw/craft-algolia-sync</a> for syncing Craft entries with Algolia. It mentions there is an event where you can intercept data and make changes but I'd need more help figuring out how that should work.</p>
  
Tags: <untagged>
Title: Sending transformed image sizes to Algolia
ThreadText: # Sending transformed image sizes to Algolia
  
  (Asked by: username_0 on 2023-10-24)
  
  I'm investigating using Algolia for a search page on a site where the entries have a single main image assets field where the file uploaded is quite large.
  
  Transforms are performed in the Craft templates to output different image sizes.
  
  But how do I send resized images to Algolia when there's just a single image field for the entry?
  
  Are there any plugins that let you perform image transforms before syncing the data to Algolia?
  
  At the moment I'm using <https://github.com/brilliancenw/craft-algolia-sync> for syncing Craft entries with Algolia. It mentions there is an event where you can intercept data and make changes but I'd need more help figuring out how that should work.
  
  **Tags:** untagged
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2023-10-24. Score: 2 | Accepted answer
  
  If you're not comfortable building your own custom module and you're willing to look at alternative Algolia plugins, [Scout](https://plugins.craftcms.com/scout) offers a reasonably simple method for defining the data you want to send to Algolia just inside its config file, and you can easily define image transforms within the transformer function:
  
  ```
  // config/scout.php
  
  // Imports
  use craft\elements\Entry;
  use craft\elements\db\EntryQuery;
  use rias\scout\ScoutIndex;
  use spacecatninja\imagerx\ImagerX;
  
  return [
      'indices' => [
          ScoutIndex::create("myAlgoliaIndexName")
              ->criteria(function(EntryQuery $query) {
                  return $query->section('myContent');
              })
              ->transformer(function(Entry $entry) {
                  $logo = $entry->logo->one();
                  
                  // Generate logo image transform for Algolia using Imager X
                  // (other image transform plugins/techniques are available!)
                  $logoTransform = ImagerX::$plugin->imager->transformImage($logo,
                      [
                          'width' => 300,
                          'height' => 300
                      ],
                      [
                          'format' => 'webp',
                      ]
                  );
                  
                  // Return the data to sync with Algolia
                  return [
                      'id' => (int)$entry->id,
                      'url' => $entry->url,
                      'title' => $entry->title,
                      'logo' => $logoTransform->url,
                  ];
              }),
      ],
  ];
  
  ```
  
  If you want multiple image transforms, you can generate them all and include them in an array of image URLs. The initial Scout indexing operation will take a little time since it has to generate the image transforms but providing those images are cached somewhere once they're generated, subsequent operations ought to be much quicker.
  
  I've shown the code using the [Imager X](https://plugins.craftcms.com/imager-x) image transformation plugin (which is a paid plugin) because that's what I use with Scout so it was easy to grab a code example, but you could use Craft's own image transforms instead.
  
  > **Comments:**
  > **username_0**: I'd actually already started exploring using Scout after posting this and using native Craft image transforms. Haven't gotten it working with it adding the new image data yet though.  
  > **username_0**: Actually, it is now. :)  
  > **username_0**: Is there a way to see locally what values are being returned before actually syncing with Algolia? I've got a couple of pieces of data that I want to modify first and testing will be easier if I can do it locally before invoking the import/refresh.  
  > **username_1**: Yes, if you don't mind a bit of work setting up your IDE and dev environment to run Xdebug so you can put breakpoints in your Scout transformer methods and inspect the data. If you're using DDEV, it's already set up for you so you'd just need to set up your IDE to allow PHP debugging.  
  
  ---
  
  ### Answer by username_2 on 2023-10-24. Score: 2
  
  You can use the `EVENT_BEFORE_ALGOLIA_SYNC` event to update the record that's being pushed to Algolia. In this event, you can modify the value that's being generated for the asset field, which seems to be the URL of the asset by default. It's not well documented, but the [event has a `recordElement` property](https://github.com/brilliancenw/craft-algolia-sync/blob/v4/src/events/beforeAlgoliaSyncEvent.php#L18) which will give you access to the element that's the source of the record. You can use that to access the asset, then update the record's value for that asset:
  
  ```php
  // Imports
  use yii\base\Event;
  use \brilliance\algoliasync\services\AlgoliaSyncService;
  
  // init()
  Event::on(
      AlgoliaSyncService::class,
      AlgoliaSyncService::EVENT_BEFORE_ALGOLIA_SYNC,
      function (\brilliance\algoliasync\events\beforeAlgoliaSyncEvent $event) {
          /** @var Element $element */
          $event->recordElement;
  
          $asset = $event->getFieldValue('myAssetField')->collect()->one();
  
          $event->recordUpdate['attributes']['myAssetField'] = $asset->getUrl([
              'width' => 600,
              'height' => 600,
          ]);
      }
  );
  
  ```
  
  You can put that code in a [custom module](https://craftcms.com/docs/4.x/extend/module-guide.html).
  
  
  ---
  
  