Questions Regarding CSS Handling and Few Other Things

[Michael SamsonParticipant]

Hi Ernest,

I hope you’re doing well!

I never heard back from you after my last email, so I decided to purchase another 12 months of support. I figured you weren’t responding to me because it wasn’t through this paid forum. Hopefully now I’ll hear from you.

I actually had something unexpected happen when trying to renew the license on the Envato website. Instead of simply renewing my existing license for another 12 months, it actually purchased an entirely new license. So now I have two licenses for the same plugin. But it appears that the new license also added 12 months of support to the original license. I really don’t want to purchase new licenses every year when all I need is the support. Did I do this incorrectly?

Anyway, I am copying my last email to you below. This was an important set of questions.

…..

I was able to successfully update the plugin just now without any major issues. I had to update the style.instances.css file which I have custom enqueued. What I do is allow the plugin to automatically generate the file, and then I manually copy that to the static location (which is what is actually used). Once I did this the plugin loaded properly.

I do have a few questions for you if you don’t mind answering…

1. I confirmed that the “style.instances-ve-ho-po-no-au.css” file is just a copy of “style.instances.css” like you said. But is this style.instances-ve-ho-po-no-au.css file actually used by the plugin in any way? I only ask because we need to make sure that all dynamic css files used by the plugin are made into static files.

2. You said that the “style.basic.css” and “style.basic-ve-ho-po-no-au.css” are not used by default. You also said they’re only used if the dynamic css loader features is active. I’ve looked for this feature in the plugin and didn’t see it anywhere. Since we are custom enqueueing our css files to be static, I assume this means that we can’t use this feature?

3. You mentioned the new css method saves up to 60% of code. That sounds really good. Is this the dynamic css feature you mentioned? We have to make sure that any dynamic css files are instead loaded as static files. I’m not completely clear on what this new feature does. Is it merely creating a smaller css file that always loads the same (based on your settings)? If that’s the case, couldn’t I convert it to a static file?

4. I saw in your change log that animated gifs should now be animated in search results when rolling over the result. I tested this however and it didn’t work. The search result merely shows the first frame of the gif. I also saw mention of an override setting for this feature, but couldn’t find it in the plugin settings.

5. Is there any way to completely disable the maintenance options in the plugin? These options can clear all settings, or completely remove the plugin’s DB tables. They’re very dangerous features for us, and I’d like to disable them if possible. This would be a good feature for you to add as a constant in wp-config.

6. This is the code we use to dequeue the “style.instances.css” dynamic css file, before we then enqueue our manual version of it. I just want to make sure this is still done correctly.

function dequeue_dynamic_styles() {
wp_dequeue_style( ‘wpdreams-ajaxsearchpro-instances’ );
wp_deregister_style( ‘wpdreams-ajaxsearchpro-instances’ );
}

add_action( ‘wp_enqueue_scripts’, ‘dequeue_dynamic_styles’ );
add_action( ‘init’, ‘dequeue_dynamic_styles’ );
add_action( ‘wp_print_scripts’, ‘dequeue_dynamic_styles’, 100 );
add_action( ‘wp_print_styles’, ‘dequeue_dynamic_styles’, 100 );

[Ernest MarcinkoKeymaster]

Hi Michael,

I may have read your email some time ago, I don’t recall – sometimes I do postpone some emails after support is done, but there was a major update in preparation, so I think I completely missed some other messages too.

1. It uses only the “style.basic-ve-ho-po-no-au.css” file, the other one is left there for backwards compatibility convenience only. It might be removed in a later release.

2. The feature can be enabled here. You can still use that, but in that case you don’t have to get the contents from either stylesheet files, the plugin will load them later – and it would also defeat it’s purpose.

3. Not exactly, it applies to both methods. The base CSS file had been separated to parts, and after saving any option on the plugin back-end, the plugin checks all options and search instances if they use specific features. If not, then that CSS part is completely excluded. In previous versions, the base CSS included all features. In your case it is actually a huge step-up, as the “ve-ho-po-no-au” part of the file indicates which feature CSS is not generated (vertical, horizontal, polaroid, noUI and certain parts of autocomplete: “ve-ho-po-no-au”)
The filename changes if the requirements change (but the old one is also kept). I did this for better cache control, as well as for easier error checking.

4. It should be automatic. I can check that out, if you want to, all I need is a link to a page and a search phrase I can try. It is not possible to turn it off at the moment.

5. Only programatically. You can disable it by editing the wp-content/plugins/ajax-search-pro/backend/maintenance.php file. Put this after the first line of the file:
return;

6. Yes, that looks correct 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Michael SamsonParticipant]

Hi Ernest,

It’s good to hear from you. It’s been a while!

You didn’t respond to what I said happened with my license. I know this is managed by Envato, but can you shed some light on this? Now I have two ASP licenses, when I only needed the one. All I wanted to do was renew the support for a year.

…..

1. It uses only the “style.basic-ve-ho-po-no-au.css” file, the other one is left there for backwards compatibility convenience only. It might be removed in a later release.

Hold on, this is a big issue. You’re saying that the plugin is using the “style.instances-ve-ho-po-no-au.css” file and NOT the “style.instances.css” file?

If that is the case then shouldn’t I be dequeueing that specific file and enqueueing it from our static location?

…..

2. The feature can be enabled here. You can still use that, but in that case you don’t have to get the contents from either stylesheet files, the plugin will load them later – and it would also defeat it’s purpose.

My main concern here is with these two css files:

“style.basic.css” and “style.basic-ve-ho-po-no-au.css”

If I have this feature disabled, then are these files used at all by the plugin? My concern is because we need to custom enqueue all the css files to be static. I need to know if we need to make these into static files or not.

From the warning you wrote by this feature, it seems to me that we shouldn’t use this. I prefer we load css files simply from a static location.

…..

3. Not exactly, it applies to both methods. The base CSS file had been separated to parts, and after saving any option on the plugin back-end, the plugin checks all options and search instances if they use specific features. If not, then that CSS part is completely excluded. In previous versions, the base CSS included all features. In your case it is actually a huge step-up, as the “ve-ho-po-no-au” part of the file indicates which feature CSS is not generated (vertical, horizontal, polaroid, noUI and certain parts of autocomplete: “ve-ho-po-no-au”)
The filename changes if the requirements change (but the old one is also kept). I did this for better cache control, as well as for easier error checking.

Without me having to understand all the intricacies of the new css management, I have only one concern here. We cannot have any dynamic css stored in the uploads folder and sub-folders. I need to dequeue all such files and enqueue them as static files. This is what we’ve always been doing. So I really need to know clearly from you which files we need to do this for.

It sounds like you’re saying that the new style.basic-ve-ho-po-no-au.css file is smaller and more efficient. That is great, but right now we aren’t using this in our static files. So I’ll have to take care of this asap once I hear from you.

…..

4. It should be automatic. I can check that out, if you want to, all I need is a link to a page and a search phrase I can try. It is not possible to turn it off at the moment.

This is definitely not working on our site. Just go to eruditely.com and run a search for “animated.” You’ll see a bunch of bird animations that a friend of mine made. These are all gif animations. As you’ll see none of them are animating in the search results when rolled over. If you go to those posts you’ll see they all animate properly.

…..

5. Only programatically. You can disable it by editing the wp-content/plugins/ajax-search-pro/backend/maintenance.php file. Put this after the first line of the file:
return;

Is there at least a warning confirmation screen if these are accidentally pressed? I think it would be wise to have a way to disable these settings with a constant. Then it can just say “Disabled from wp-config” in the settings area.

…..

6. Yes, that looks correct

But this isn’t for the “style.basic-ve-ho-po-no-au.css” file which you said is the file actually being used. Don’t we have to now dequeue that specific file and then custom enqueue it to load statically?

…..

Thanks for your help as always!

~ Michael

[Ernest MarcinkoKeymaster]

Okay, there is a lot of confusion here, I will try to clarify as much as I can.

Case 1 – When the conditional CSS loader is ON
When you turn ON this option, the plugin WILL NOT enqueue any stylesheet files on the server side, so there is no point of trying to de-queue anything here. There is a few lines of static inline CSS placed in the header to prefent FOUC issues, but that is negligible.
In this case the plugin uses the style.basic-{args}.css file and the separate instance CSS files (search1.css, search2.css etc..), depending on which search is visible on the given page. This feature is extremely helpful for cases, when there are a lot of search bars created (like our demo page), and you don’t want all the CSS loaded up in a single file, all at once.
Once again, if this option is active, nothing has to be dequeued, as nothing is enqueued. Everything is handled on the front-end via javascript – during the page load asynchronously. If you want to manage all the CSS yourself, then there is no point of using this feature whatsoever.

Case 2 (default) – When the conditional loader is off
In this case the style.instances-{args}.css file is enqueued on the server side – this one contains the basic CSS as well as all the search instane CSS code.
You can dequeue this with the code you have above, it does not matter what the file name is. In WordPress you dequeue by the handle name, not the file name, as the file name can be different for each condition.
You can take the CSS content from the style.instances.css file, and copy it wherever you need, and use that code above to dequeue the plugin CSS.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Michael SamsonParticipant]

Hi Ernest,

Sorry it took me so long to get back to this. I’ve been having a very busy, albeit productive week!

I’ve just checked to ensure that the “Load CSS files conditionally” setting is turned off in both our environments, and it is. We’re definitely not using that, and this seems to be the safer choice (please correct me if I’m wrong).

Before I respond to the specifics, let me please again explain my goal. I need to make sure this is done correctly for our specific situation.

…..

When I look in the /asp_upload folder I currently see these 6 files:

style.basic.css
style.basic-ve-ho-po-no-au.css
style.basic-ve-ho-po-no-au-se.css
style.instances.css
style.instances-ve-ho-po-no-au.css
style.instances-ve-ho-po-no-au-se.css

Any of the files above that are actually being used by ASP, we need to load instead as static files from a custom location in our child-theme. The main reason for this is that we rely upon a stateless architecture and load balancer. We do have a few files that are exceptions to this, and load centrally using the Elastic File System in AWS. But we’ve learned from experience that the EFS is not dependable (and is also quite slow), and therefore if we can move files out of there we should. That is why we need these css files to load as static files from our child theme.

We’re currently dequeueing the ASP dynamic styles using the code I showed up above in this thread. We are then custom enqueueing the style.instances.css file to a custom folder in our child-theme. Every now and then I also update this file from the dynamic file, to ensure they’re in sync.

…..

So what I need to know now is what needs to be changed to maintain this, if anything. Do I need to change our dequeueing code? Do I need to enqueue different files?

From what you wrote above (Case 2), it seems like I don’t need to change anything. Please note that I have only enqueued the style.instances.css file. And not either of these two files:

style.instances-ve-ho-po-no-au.css
style.instances-ve-ho-po-no-au-se.css

I’m also assuming that I can ignore the style.basic css files.

So I think that covers everything. Please let me know what you think, and thank you as always for your continued help!

P.S. Please don’t forget to look into the issue I reported with the animated gifs not working… 🙂

All my best,

~ Michael

• This reply was modified 2 years, 12 months ago by  Michael Samson.

[Ernest MarcinkoKeymaster]

Hi Michael,

That sounds perfectly fine to me. With the conditional CSS loader the plugin will only enque a single CSS file, that is the instances file. The dequeue takes care of that, and you can sync the contents of the style.instances.css file, that will always contain all the correct CSS code the plugin needs. You can ignore all the other files.

I almost forgot the animations. I see the problem there as well. I’m seeing there is indeed a .gif file associated with this specific result, that should be animated. However taking a look at the source the image file displayed there is this one: {yoursite.com}/media/2019/06/11142653/chickadee-flight-sequence-w-feeder-test-1-300×375.gif

As you can see that is not animated. This is probably a wordpress resized thumbnail of some some sort. I’m not sure how wordpress handles animated gifs in general, or what it does, but it seems like this one is resized, taken only the first frame.
You can either try to change the plugin settings to use the full sized images when possible, or rather somewhere configure wordpress not to generate thumbnails of gifs, because without animation it is useless. Although I don’t know if that is possible without custom coding, or without using a plugin.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Michael SamsonParticipant]

Hi Ernest,

Ok, so are you saying that my current setup as described above is perfect as-is, and that I don’t need to make any changes? (you said, “That sounds perfectly fine to me.”)

With the conditional CSS loader the plugin will only enque a single CSS file, that is the instances file. The dequeue takes care of that, and you can sync the contents of the style.instances.css file, that will always contain all the correct CSS code the plugin needs. You can ignore all the other files.

We’re not using the conditional CSS loader right now. Are you recommending the above as a better option? Please also note that right now I am syncing our static file to the style.instances.css file.

Btw, I have just checked to make sure that all the default plugin css is indeed loading from our static file, and it is. So it does seem that our current methodology is working.

…..

About the gif animations:

I had forgotten that we have a custom image size specifically for ASP. That’s used to help with loading times. But you’re right, it seems that resizing the gifs only take the first frame.

I assumed that animated gifs were working on our platform because all those bird gifs were working in other locations. But upon close examination it turns out the reason it was working in other spots was because it was defaulting to the original file. It was using the original file because it was the largest image, and closest to the size that was needed. By comparison the image size for ASP is quite small, and that resized gif size existed. That’s why it wasn’t working only in ASP.

I like your idea to disable the resizing of images only for animated gifs. I’ll look into this to see if it’s possible.

Thank you again for all your help!

~ Michael

[Michael SamsonParticipant]

Hi Ernest,

Please read my above post first… 😉

I just wanted to tell you that I successfully disabled image resizing for gif files with the code below. This code works, and I have tested it with ASP. I can confirm that the gif animation now works in ASP when rolling over the search result (card). Very cool feature btw!

Apparently this is a very old problem in WordPress that is currently being worked on. There’s more than one trac ticket for it. But it seems like it isn’t fully solved yet from what I read. It made more sense to just disabled image sizes for gifs, since they’re almost always animated anyway.

Here’s the code I used to do this in case you’re interested, or anyone else needs it:

function disable_image_sizes_for_gif_files( $sizes, $metadata ) {
	// Get filetype data
	$filetype = wp_check_filetype($metadata['file']);
	// Check if file is gif
	if($filetype['type'] == 'image/gif') {
		// Unset sizes if file is gif
		$sizes = array();
	}
	// Return sizes you want to create from image (none if image is gif)
	return $sizes;
}

add_filter( 'intermediate_image_sizes_advanced', 'disable_image_sizes_for_gif_files', 10, 2 );

All my best,

~ Michael

[Ernest MarcinkoKeymaster]

Hi Michael,

I would not recommend using the conditional CSS loader in your case, since you want to use your own CSS file locations.

Thank you very much for the code, it will be helpful for sure 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Michael SamsonParticipant]

Hi Ernest,

Thanks for the confirmation about not using the conditional css loader. I’ll continue to manually sync of static css file to style.instances.css, at least until you make further changes.

Glad that little code was helpful. It does work perfectly to prevent gifs from being resized.

All my best,

~ Michael

[Author]

Posts