🔥 Classify 4: A tiny plugin that brings CSS classes and +

Agreed!

I just had to do a bump post. @julienallard1 I truly have to tip my hat off to you man. I cannot quantify how much the new Classify features have streamlined working on my apps. Such a massive timesaver!

3 Likes

Thanks mate, I appreciate de kind words :+1:

Hi,

Do you guys know if it’s possible to add a CSS class to a reusable element?

These elements do not have the custom id field like groups do.

Adding a top level group inside the reusable element would do the trick I think, but I’d rather not use that solution -if possible- for minimalism principle.

That’s weird… They do have the ID field on my side…

Here is what I see, am I missing something?

(I am talking about the reusable element itself, I confirm that I do have the ID attribute field on any other group or element)

Ok I see, your trying to set the ID when editing the reusable. But the ID field is available when placing the reusable in another page.

1 Like

Ahhhh, makes sense. Thanks a lot

Maybe a elementary question, but I’m just learning. Would appreciate guidance.

My scenario:

  1. Receive a response from open ai’s api
  2. Store response in the database
  3. Autobind to Advanced WYSIWYG editor (it’s an HTML editor)
  4. Allow users to change colors, font, etc within the WYSIWYG HTML editor

I want to then create a pdf that mirrors what’s in the editor. The problem is when I do, the toolbar from the editor is also in the pdf as it’s seen as 1 element. I’m hoping Classify can maybe help here. Is there a way to use it to simply pass on the class we want to include? For example, for printing I’m throwing the following css into an HTML element which seems to be working well. I just dont know how to get this same concept to carry over to creation of a pdf… Thank you!

@media print { .se-toolbar, .sun-editor-common { display: none !important; } .se-wrapper-inner, .se-wrapper-wysiwyg, .sun-editor-editable { visibility: visible; } } /* Added margins for printing */ @page { margin: 1.0in 1.00in 0 0.75in; /* Top, Right, Bottom, Left */ } .sun-editor { border: none !important; }

What’s your process when creating the PDF? Is it working when generating the PDF through the printing process?

Thanks @julienallard1 for your response.

The process is pretty simple overall. Let me know if this is helpful.

Here’s the HTML Editor with the element ID exposed.

I have an HTML element on the page

image

The printout looks good

The PDF, no matter what the program (this one is Advanced Export to PDF), I cant get it to come out without the toolbar. For this plugin, it’s simply a workflow action that is looking at the element ID.

I think if I can find a way to tell the pdf creation process to ignore the toolbar, I’d be on the right path. Thanks again

In the printout screen, what if you pick “Save as PDF” in the printer destination dropdown?

Seems to render and save perfectly as well

Adobe view of saved file:

So this means that the plugin Advanced Export to PDF does not rely on @media print {}.

I haven’t work with this plugin so I can’t really help further. Perhaps you should see with the plugin author?

Sorry, I should have been more clear. I was thinking if I understood Classify correctly, that somehow I could use it to have a pdf creator target specific pieces of an element to only either ignore or include those specific pieces. And if I could do that, I could then tell the pdf creator to ignore the toolbar in the same way I’m telling the print function to ignore it. Maybe it’s wishful thinking.

At the end of the day, I’m honestly open to anything or any plugin that could help me create a nice pdf without the toolbar. Advanced Export to PDF specifically advertised using Classify.

And I’ve tried to contact their support. Only crickets so far.

Thank you

From what I understand from the plugin, you wouldn’t even need Classify. You’d simply to insert the classes you want to appear on the PDF into the field Element(s) to capture of the plugin’s workflow:

The demo page says this about this field:

One or more comma-separated selectors. Each element will be exported to a separate page in the PDF document.

You can use any valid CSS selector (#eltID, .eltClassname etc)

I just stumbled across your documentation page which I didn’t see it initially. I’m going to read that and see if I can get it to work. By the way, this particular PDF creator states that Classify is a prerequisite.

Perhaps the plugin relies on Classify to function… But I find it weird it’s says «Install and configure» as there is no configuration to be done…

Right, it was interesting wording. However, I do believe that it can take advantage of Classify as I can pass in classes and such which I’m assuming is exactly because I have Classify installed. Thanks for helping me learn.

1 Like

hi, @julienallard1 thank you so much for your work on this plugin! I’ve used it hundreds of times on bubble elements successfully :slightly_smiling_face:

I don’t know if I’m just having a brain lapse or need another cup of coffee, or what, but I’m running into a very basic issue using classify to set margins on a standard bubble group element.

I’ve tried many different ways, but feel like some very basic command like following should work:

{addClass: “margins”}{style: “margin: 60px;”}

(note my actual implementation will reference dynamic values, so it’s simplified above for ease of reading.

Please tell me what I’m doing wrong, and thanks again for an outstanding plugin!

1 Like