Nazrinn

Thanks Vytis!
This is much better.

Is there a way to make the loading image fade in like it is currently on my main website (https://barbandcarole.ca)? It really doesn’t look great when the images just abruptly “flash” into existence (in the sliders).

I tried using something like this, but it doesn’t seem to work.

img[data-opt-lazy-loaded="true"] {
	opacity: 0;
	animation: fade-in ease 0.25s forwards;
}
	
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

img.opt-lazy-loading {
	opacity: 0;
}
	
img.opt-lazy-loading[data-opt-lazy-loaded="true"] {
	  -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
    opacity: 1;
}

I think something like the above would work well if only optimole image had a class like this one.

Would that be possible?

Oh yeah, I know about this plugin, but it’s a bit overkill considering I just want to hide one column.

No way to do this for every user?
Displaying it in some cases is kinda pointless.

They are offloaded to Optimole’s cloud.

The 400 error seems to be a “Bad Request”. If I try to view the image via the Optimole URL in my browser, instead of displaying the image, it displays “Bad Request” or “Invalid URL” on a blank page.

The image seems to disappear after some time, and there is no problem with the image as I upload it. It’s hard to pinpoint when it exactly happens, and there doesn’t seem to be a pattern in what disappears.
Last time, however, it affected images related to a custom post in my website. About 25-40 images.

Usually it’s just an image there and there that disappears.

I’ll let you know if I spot another image that disappears on the website so we can investigate further at that point.

That’s interesting.

I don’t remember adding it on other images I called.
I guess the srcset is made by WordPress as per the docs. I have never noticed. Thank you!

Of course!

You can see the HTML without the srcset on the first picture in the slider.
https://staging.barbandcarole.ca/listings/the-green-enclave-14-ballyhaise-street/

As a sneak-peak, the image’s HTML looks like this:
<img data-lazyloaded="1" src="https://ml275xldtxd5.i.optimole.com/UkHvqLs.NsTa~26973/w:auto/h:auto/q:82/id:abd37e3b689d3d97a8024abb8f9192e8/https://barbandcarole.ca/DJI_0816.jpg" decoding="async" id="slider-picture-generalities-1" data-property-section="generalities" data-src="https://ml275xldtxd5.i.optimole.com/UkHvqLs.NsTa~26973/w:auto/h:auto/q:82/id:abd37e3b689d3d97a8024abb8f9192e8/https://barbandcarole.ca/DJI_0816.jpg" width="1170" class="litespeed-loaded" data-was-processed="true">

And the PHP that generated the HTML:
'<img id="slider-picture-'.$id_html.'-'.$picture_id.'" data-property-section="'.$id_html.'" src="'.$picture['url'].'" width="1170">';

(This was echoed later.)

• This reply was modified 3 years, 5 months ago by Nazrinn.
• This reply was modified 3 years, 5 months ago by Nazrinn.

Looking forward to it! I trust your team will get through it. Otherwise I am very satisfied with Optimole’s performances. =)

Thank you Vitys!

Also regarding your philosophy, is that something you are in the position to answer?

• This reply was modified 3 years, 6 months ago by Nazrinn.

I see. Thank you Vytis!

Do you know if maybe the port could be simply ignored?

Also, is there any particular reason why the hashes uses the URL instead of a generic ID? I feel like it caused me a lot more problem than it helped.

The website has a huge amount of photos so the CDN helps significantly in reducing backup errors and transfer time. Keeping a single “domain” would also help me reduce the amount of duplicated photos that is already in my account. What is your philosophy on that?

Wow! Thank you Vitys.

Looking forward to the next update.

(Hope you noticed a port number was added to the URL too.)

Hello Vytis.

That seems correct. And I see. So if I clicked the rollback button in staging, it wouldn’t do anything?

Yay! Thank you!

Well I figured migrating my live postmeta table to my local staging environment worked just fine. *facepalm*

Though I understand this is not a perfect fix. As for my PHP, this is the latest version I came up with. Pretty similar. Still went with that first quick and dirty fix because the latter was too tricky to work around and caused bug, but it’s a start to create that feature I was thinking about.

<?php
function point_image_url_to_main_domain() {
  $old_url = get_home_url();
  $new_url = "https://barbandcarole.ca";
  
  global $wpdb;
  $post_ids = $wpdb->get_col("SELECT post_id FROM $wpdb->postmeta WHERE meta_key = 'optimole_offload' AND meta_value = 'true'");
  foreach ($post_ids as $post_id) {
    $meta_value = $wpdb->get_var("SELECT meta_value FROM $wpdb->postmeta WHERE post_id = $post_id AND meta_value LIKE '%$old_url%'");
  
    if(is_null($meta_value) === false) {
      $meta_value = str_replace($old_url, $new_url, $meta_value); //transforms the Optimole URL
  
      $query = $wpdb->update(
        $wpdb->postmeta,
        ['meta_value' => $meta_value],
        ['post_id' => $post_id]
      );
  
      if($query === false) {
        echo "<p>The query failed!</p>";
      } elseif ($query === 0) {
        echo "<p>The query succeeded but no rows were updated.</p>";
      } elseif ($query > 0) {
        echo "<p>Query successful! Post ".$post_id."'s metadata was updated.</p>";
      }
    }
  }
}
add_action("wp_after_admin_bar_render", "point_image_url_to_main_domain");

?>

Let me know what you think.

Okay so I sorta have a solution. It’s not perfect, it creates some bugs (some images come back to me as 404), but it does the job. Most of my image are appearing as expected!

Here is my code. It automatically execute itself after a page reload following the code implementation.

<?php
function point_image_url_to_main_domain() {
  $images = array();
  $old_url = get_home_url();
  $new_url = "https://barbandcarole.ca";

  global $wpdb;
  $optimole_img_ids = $wpdb->get_col("SELECT post_id FROM $wpdb->postmeta WHERE meta_key = 'optimole_offload' AND meta_value = 'true'");

  foreach ($optimole_img_ids as $img_id) {
    $img_metadata = $wpdb->get_var("SELECT meta_value FROM $wpdb->postmeta WHERE meta_key = '_wp_attachment_metadata' AND post_id = $img_id");
    if(str_contains($img_metadata, $old_url)) {
      $img_metadata = str_replace($old_url, $new_url, $img_metadata); //transforms the Optimole URL
      $query = $wpdb->update(
        $wpdb->postmeta,
        ['meta_value' => $img_metadata],
        ['post_id' => $img_id, 'meta_key' => '_wp_attachment_metadata']
      ); //use $wpdb->prepare if you make this into a user input.
      //$query = 1;

      if($query === false) {
        echo "<p>The query failed!</p>";
      } elseif ($query === 0) {
        echo "<p>The query succeeded but no rows were updated.</p>";
      } elseif ($query > 0) {
        echo "<p>Query successful! Image ".$img_id."'s metadata was updated.</p>";
      }
    }
  }
}

add_action("wp_after_admin_bar_render", "point_image_url_to_main_domain");
?>

I get a few error 404 from the server trying to look for images in localhost still rather than through the barbandcarole.ca Optimole url (probably caused by WHERE meta_key = 'optimole_offload' AND meta_value = 'true'"), plus one 400 error over which my script was unable to go over (it was a CSS background image).

Those 4XX error triggers an error from the Optimole plugin:

Warning: Trying to access array offset on value of type bool in C:\xampp\htdocs\dev\barbandcarole\wp-content\plugins\optimole-wp\inc\tag_replacer.php on line 428

but I don’t sweat it too much and will try to fix the remaining error tomorrow by amelioration my code.

In my honest opinion, this kind of URL repointing should be a feature that comes with Optimole. It is really crucial for us advanced users who needs to make image-related adjustments (mostly in HTML/CSS) in test (hear: staging) environments.

• This reply was modified 3 years, 7 months ago by Nazrinn.
• This reply was modified 3 years, 7 months ago by Nazrinn.
• This reply was modified 3 years, 7 months ago by Nazrinn.
• This reply was modified 3 years, 7 months ago by Nazrinn.

Hi Vitys.

So, I found out that the solution you proposed doesn’t work because Velvet Blues Update URLs plugin update the guid (image URL) column if the post_type is attachment in the post table. Like so:

UPDATE $wpdb->posts SET guid = replace(guid, %s, %s) WHERE post_type = 'attachment'"

However, Optimole-optimized URL are actually stored in the postmeta table rather than the post table. I’m working on a hand-coded fix. I’ll let you know what it looks like.

Hi there. Thank you Vitys. I was thinking the Show images only from these sites option was for that. It’s not the case?

Anyway, the solution yo proposed didn’t work unfortunately. Despite the URL updater plugin telling me this, I see no change in the image URL on the frontend. It is still saying “localhost”. (I entered this into the fields.)

Furthermore, I’d only like to affect media optimized by Optimole. I have PDF and video files which I wouldn’t like to go through with the URL change. It’s not a thing you can do with Optimole?

Would rolling back picture be a good temporary fix or would it affect the live site?

Thanks!