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

GenerateBlocks Container Background Image Not Optimized When Selector is Set to Pseudo Element #842

Open
kushh23 opened this issue Oct 9, 2024 · 4 comments
Assignees
Labels
3rd-part-compatibilities Issue or feature related to a compatibility with a 3rd party product. bug This label could be used to identify issues that are caused by a defect in the product. customer report Indicates the request came from a customer.

Comments

@kushh23
Copy link

kushh23 commented Oct 9, 2024

Description

A user reported that their GenerateBlocks's homepage container background image was not being optimized by Optimole. Upon investigation, I discovered that under the background image option, there is a setting of Selector; when it is set to "Pseudo Element," it prevents Optimole from optimizing the image. However, switching the option to "Element" allows Optimole to optimize it as expected.

Could we investigate whether this issue originates from our side or theirs? If it's on our end, we should address it to ensure compatibility. In the meantime, I have advised the user to set the option to "Element."

Step-by-step reproduction instructions

  1. Install and activate the GenerateBlocks and Optimole plugins.
  2. Add a container using GenerateBlocks and Set the container background image option to "Pseudo Element."
  3. Check whether the image is optimized by Optimole (it will not be).
  4. Change the Selector option to "Element."
  5. Check if the image is now optimized by Optimole (it will be).

Screenshots, screen recording, code snippet or Help Scout ticket

Reported here - https://secure.helpscout.net/conversation/2725973401/436218?viewId=2353196

Image
Image
Image

Environment info

No response

Is the issue you are reporting a regression

No

@kushh23 kushh23 added bug This label could be used to identify issues that are caused by a defect in the product. 3rd-part-compatibilities Issue or feature related to a compatibility with a 3rd party product. labels Oct 9, 2024
@pirate-bot pirate-bot added the customer report Indicates the request came from a customer. label Oct 9, 2024
@girishpanchal30
Copy link
Contributor

@kushh23 I checked both modes on the backend, and it looks like both display the local image URL. However, on the frontend, it seems to show the optimized image URL.

Backend screencast:

Element
Image

Pseudo Element
Image

Frontend screencast(Pseudo Element):
Image

Please let me know if I'm making any mistakes.

@kushh23
Copy link
Author

kushh23 commented Nov 7, 2024

@girishpanchal30

The backend editor always shows the Optimole URL, as the Optimole image replacement only works on the front end. (When images are hosted on site i.e offload is disabled)

I tested it again, and as you can see on this page - https://begdowntown.s4-tastewp.com/5-2/ the image is still not optimized. In the backend, it is set on the pseudo-element option
Image
Image

Here is the instance details:

https://begdowntown.s4-tastewp.com/wp-admin
Your username: kushnamdev
Your new password: XntrWXQ3qyM

@girishpanchal30
Copy link
Contributor

@kushh23 It appears to be working with the pseudo-element option in my test instance.

https://spikymemory.s3-tastewp.com/wp-admin/post.php?post=6&action=edit

girish / cNa*5Ny@&DZOkbz48ytNfVNK

Please check and let me know if I'm doing anything incorrectly.

Thanks

@kushh23
Copy link
Author

kushh23 commented Nov 16, 2024

Hi @girishpanchal30,

I checked your test instance before it got expired, on your instance, the issue do not occur, but on my end, I am still able to replicate it.

https://vertis.d.pr/i/dAMLEo

I checked again on a fresh test instance from InstaWP as well, and it is still replicable with the default twenty-twenty themes.

https://genial-guanaco-fd77af.vertisite.cloud/test-kush/
girish / girish

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3rd-part-compatibilities Issue or feature related to a compatibility with a 3rd party product. bug This label could be used to identify issues that are caused by a defect in the product. customer report Indicates the request came from a customer.
Projects
None yet
Development

No branches or pull requests

3 participants