Image widget crop automatically cropping fails

Yes, this seems to be the issue. Maybe a possibility to reset them would be great!

I am having a strange problem with my images not showing up on my site. It is a new install of Varbase.

When I format my images as just 'images' they work fine. It actually works fine in drimage if I use the 'background' option.

When I format them using drimage Responsive Images with scale or crop, they come up as if there is a bad hyperlink.

I have another site I built about a month ago that is largely the same setup but that site works fine. Both were Varbase 10.alpha2 installs with Drupal 10.1.2 but one seems fine with the drimage viewing and the other does not. I cannot find the difference.

Any advice?

This ticket has the comparisons ... https://www.drupal.org/project/varbase_media/issues/3381989#comment-1519... 🐛 New install - media images not showing due to bad links? Active

Deleting all "drimage_...." image styles could help if you are switching back and forth between cropping and no-cropping settings.
Drimage currently does not clear its own image styles to account for changes like this.

There are currently four drimage styles in the media - image style settings.

If I delete them, what happens to the content that may be currently using them?

Then I assume I need to recreate the image styles and reset all the content somehow?

This could get huge because the Varbase distribution is set by default to use drimage.

Any image style that has the prefix "drimage_" in its machine name can be safely deleted.
Drimage will automatically regenerate the image styles it needs.

The Varbase distribution might set some defaults it relies on, so you would have to check with the maintainers there to be absolutely sure you don't break the varbase setup. (but I can't imagine it will be a problem)

Deleted the drimage_.... styles.
How do I kick it to recreate?

Drimage will automatically create the image styles it needs when images are requested. You don't need to do this manually. (in fact you can't atm)

Hmmm, there are no newly created styles after I deleted them. Let me go check my display settings to see how I have them setup.

Cards with dynamic responsive image - cover format

Going to a dynamic responsive - fixed ratio scale format

Results in

And there are still no drimage image styles. Whoops, one just popped up, but still no-go on the image showing.

Can you inspect the source code of the img tag and the drimage wrapper surrounding it? See if there is in actual image path there or inline SVG data. Also check the data attributes: they should contain the drimage settings and the source p ath

Also check if you can directly access the source image and the generated image (direct via the URL)

Please also check your drupal log to see if there are any errors concerning images.

I can access the images directly from the path in a separate browser window.

I tried to inspect the html but there is some drimage magic going on there with two image references.

Here is just the image I think

<div  class="drimage" data-drimage="{&quot;fid&quot;:&quot;8&quot;,&quot;filename&quot;:&quot;bucksgop_logo_b_title.png&quot;,&quot;threshold&quot;:100,&quot;upscale&quot;:100,&quot;downscale&quot;:3600,&quot;multiplier&quot;:1,&quot;imageapi_optimize_webp&quot;:null,&quot;lazy_offset&quot;:100,&quot;subdir&quot;:&quot;&quot;,&quot;original_width&quot;:&quot;499&quot;,&quot;original_height&quot;:&quot;100&quot;,&quot;original_source&quot;:&quot;\/sites\/default\/files\/2023-08\/bucksgop_logo_b_title.png&quot;,&quot;image_handling&quot;:&quot;aspect_ratio&quot;,&quot;aspect_ratio&quot;:{&quot;width&quot;:&quot;16&quot;,&quot;height&quot;:&quot;9&quot;}}">
      <a href="/media/4/edit"><picture>
  
      <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039;%20width=&#039;16&#039;%20height=&#039;9&#039;%20viewBox=&#039;0%200%2016%209&#039;%20%3E%3C/svg%3E" width="16" height="9" alt="Logo Blue w Title" />

    </picture></a>
  </div>
<noscript>
  <img src="/sites/default/files/2023-08/bucksgop_logo_b_title.png" alt="Logo Blue w Title" width="499" height="100">
</noscript>
</div>

No logs above warnings.

The inline SVG data in the img tag suggest there is Javascript problem for drimage.
Without access to your website, this is difficult to debug...

Can you check the browser console, see if there are any Javascript issues that could be blocking drimage or errors with the drimage JS itself?

If that does not help you could try and set some console.log() commands in the drimage.js to figure out the problem:

  Drupal.drimage.fetchData = function (el) {
    var data = JSON.parse(el.getAttribute('data-drimage'));
    data.upscale = parseInt(data.upscale);
    data.downscale = parseInt(data.downscale);
    data.threshold = parseInt(data.threshold);
    // Put a log here to check if drimage has recognized the data attribute correctly.
    console.log(data);
    return data;
  };

  Drupal.drimage.renderEl = function (el) {
    // Put a log here to see if drimage has detected an image it needs to proces
    console.log(el);

    ...

      if ((rect.top + data.lazy_offset >= 0 && rect.top - data.lazy_offset <= (window.innerHeight || document.documentElement.clientHeight))
        || (rect.bottom + data.lazy_offset >= 0 && rect.bottom - data.lazy_offset <= (window.innerHeight || document.documentElement.clientHeight))) {
        if (isNaN(data.fid) === false && data.fid % 1 === 0 && Number(data.fid) > 0) {
          // Put a log here to see if drimages lazyload is working for you.
          console.log('lazyload success');

    ...

              var imgUrl = data.subdir + '/drimage/' + size[0] + '/' + size[1] + '/' + data.fid + '/' + iwc + data.original_source;
              // Put a log here to check if drimage was able to produce a url for the image + try that url.
              console.log(imgUrl);

    ...

There were some https http errors but I am not sure if they are normal. Those errors are not on my site that is working. I will dive into that issue. Maybe a security setting somewhere. But it works on background image style.

I have a reverse proxy that catches the https with the Lets Encrypt certs then forwards to the Drupal instance over http

www.bucks.gop/:1 Mixed Content: The page at 'https://www.bucks.gop/' was loaded over HTTPS, but requested an insecure image 'http://www.bucks.gop/drimage/400/225/5/-/jpg'. This request has been blocked; the content must be served over HTTPS.
www.bucks.gop/:1 Mixed Content: The page at 'https://www.bucks.gop/' was loaded over HTTPS, but requested an insecure image 'http://www.bucks.gop/drimage/400/225/4/-/png'. This request has been blocked; the content must be served over HTTPS.
www.bucks.gop/:1 Mixed Content: The page at 'https://www.bucks.gop/' was loaded over HTTPS, but requested an insecure image 'http://www.bucks.gop/drimage/400/225/8/-/png'. This request has been blocked; the content must be served over HTTPS.

I have my reverse proxy upgrading all of the connection requests to https. Looking into the image url being http proto.

Got it. Finally.

In my nginx reverse proxy

add_header 'Content-Security-Policy' 'upgrade-insecure-requests';

Thank you for bearing with me.

You can close this ticket.

Marking this as fixed.

Automatically closed - issue fixed for 2 weeks with no activity.