Question Regarding Creating HTML Style Buttons With Org Mode

Question Regarding Creating HTML Style Buttons With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 498 bytes --]

Hey there,

So I'm in the process of creating an art portfolio site, but am wondering if the following idea is possible:

Is it possible to create HTML style buttons using Org Mode itself?

Would I need to do this via a '#begin-src' block in order to create the button itself?

I ask because I'm aware on how to force custom stylesheets for a given Org Mode doc that's converted to an HTML page, but didn't know if I could populate some buttons so that I can stylize them accordingly.

Thanks,

Sam

[-- Attachment #2: Type: text/html, Size: 817 bytes --]

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Juan Manuel Macías]

Hi Samuel:

Samuel Banya writes:

> Is it possible to create HTML style buttons using Org Mode itself?

One possibility is to use a custom link. For example:

#+begin_src emacs-lisp
  (org-link-set-parameters "button"
			   :face '(:foreground "green" :underline t)
			   :export (lambda (path desc backend)
				     (when (eq backend 'html)
				       (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc))))
#+end_src

#+HTML_HEAD: <style> .mybutton{background-color:#4CAF50;border:none;color:white;padding:15px32px;text-align:center;text-decoration:none;display:inline-block;font-size:18px;margin:4px2px;cursor:pointer;</style>

[[button:some target][This is a button]]

NB: I have borrowed the style from here: https://www.w3schools.com/csS/css3_buttons.asp

Best regards,

Juan Manuel 

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 1321 bytes --]

I tried to use this idea, but I'm not sure how to set the 'target' in your example:
[[button:some target][This is a button]]

For example, I tried this:
[[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link]]

But received this error:
user-error: Unable to resolve link: "button:http://www.sambanya.com/artgallery.html"

Thanks,

Sam

On Thu, Feb 17, 2022, at 5:10 PM, Juan Manuel Macías wrote:
> Hi Samuel:
> 
> Samuel Banya writes:
> 
> > Is it possible to create HTML style buttons using Org Mode itself?
> 
> One possibility is to use a custom link. For example:
> 
> #+begin_src emacs-lisp
>   (org-link-set-parameters "button"
>    :face '(:foreground "green" :underline t)
>    :export (lambda (path desc backend)
>      (when (eq backend 'html)
>        (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc))))
> #+end_src
> 
> #+HTML_HEAD: <style> .mybutton{background-color:#4CAF50;border:none;color:white;padding:15px32px;text-align:center;text-decoration:none;display:inline-block;font-size:18px;margin:4px2px;cursor:pointer;</style>
> 
> [[button:some target][This is a button]]
> 
> NB: I have borrowed the style from here: https://www.w3schools.com/csS/css3_buttons.asp
> 
> Best regards,
> 
> Juan Manuel 
> 

[-- Attachment #2: Type: text/html, Size: 2292 bytes --]

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 2130 bytes --]

Also, how could you possible add an 'id' or 'class' attribute to an existing lOrg mode style hyperink?

I ask because I like your approach to just modify the stylesheet, but am unaware of how to actually utilize HTML's concept or 'id' or 'class' in an Org doc itself when using basic Org mode style hyperlinks [[link address][link description]]

Also, I ask because I found a similar video to just style the hyperlink in a similar fashion but would need to somehow assign a class or id value to the HTML element that's exported from the hyperlink itself:
Styling HTML Anchor Tag (Link) To Look Like A Button | CSS Tutorial (https://www.youtube.com/watch?v=p5nogm7ul6A) 

Thanks,

Sam

On Fri, Feb 18, 2022, at 2:59 PM, Samuel Banya wrote:
> I tried to use this idea, but I'm not sure how to set the 'target' in your example:
> [[button:some target][This is a button]]
> 
> For example, I tried this:
> [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link]]
> 
> But received this error:
> user-error: Unable to resolve link: "button:http://www.sambanya.com/artgallery.html"
> 
> Thanks,
> 
> Sam
> 
> On Thu, Feb 17, 2022, at 5:10 PM, Juan Manuel Macías wrote:
>> Hi Samuel:
>> 
>> Samuel Banya writes:
>> 
>> > Is it possible to create HTML style buttons using Org Mode itself?
>> 
>> One possibility is to use a custom link. For example:
>> 
>> #+begin_src emacs-lisp
>>   (org-link-set-parameters "button"
>>    :face '(:foreground "green" :underline t)
>>    :export (lambda (path desc backend)
>>      (when (eq backend 'html)
>>        (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc))))
>> #+end_src
>> 
>> #+HTML_HEAD: <style> .mybutton{background-color:#4CAF50;border:none;color:white;padding:15px32px;text-align:center;text-decoration:none;display:inline-block;font-size:18px;margin:4px2px;cursor:pointer;</style>
>> 
>> [[button:some target][This is a button]]
>> 
>> NB: I have borrowed the style from here: https://www.w3schools.com/csS/css3_buttons.asp
>> 
>> Best regards,
>> 
>> Juan Manuel 
>> 
> 

[-- Attachment #2: Type: text/html, Size: 3327 bytes --]

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Juan Manuel Macías]

Samuel Banya writes:

> I tried to use this idea, but I'm not sure how to set the 'target' in
> your example:
> [[button:some target][This is a button]]
>
> For example, I tried this:
> [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page
> Link]]
>
> But received this error:
> user-error: Unable to resolve link:
> "button:http://www.sambanya.com/artgallery.html"

Hi Samuel,

It's strange... I have tried your link, and it works fine for me. I have
made this video capture:

https://cloud.disroot.org/s/SaHR7jenTWxFWZt

If you evaluate the `org-ling-set-parameters' expression that I gave
you, you should get when exporting to html:

<p>
<form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link</button></form>
</p>

What version of org are you using?

(I don't have much knowledge of html or css, in any case. Just for the
basics).

Best regards,

Juan Manuel 

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Juan Manuel Macías]

Juan Manuel Macías writes:

> If you evaluate the `org-ling-set-parameters' expression that I gave
> you, you should get when exporting to html:
>
> <p>
> <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link</button></form>
> </p>

P.S.: I forgot to tell you that if you want to visit the link also from the
Org file itself, you must add this parameter to org-link-set-parameters:

:follow (lambda (path) (browse-url path))

Best regards,

jm

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 879 bytes --]

To clarify, did you evaluate that code block on the org mode docs itself?

I ask because if I try to evaluate it, aka 'C-c C-c' on the '#begin_src' block, nothing happens.

And after I export the Org Doc to HTML, it still gives me that same error as before.

On Fri, Feb 18, 2022, at 3:51 PM, Juan Manuel Macías wrote:
> Juan Manuel Macías writes:
> 
> > If you evaluate the `org-ling-set-parameters' expression that I gave
> > you, you should get when exporting to html:
> >
> > <p>
> > <form><button class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link</button></form>
> > </p>
> 
> P.S.: I forgot to tell you that if you want to visit the link also from the
> Org file itself, you must add this parameter to org-link-set-parameters:
> 
> :follow (lambda (path) (browse-url path))
> 
> Best regards,
> 
> jm
> 

[-- Attachment #2: Type: text/html, Size: 1481 bytes --]

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Juan Manuel Macías]

Samuel Banya writes:

> To clarify, did you evaluate that code block on the org mode docs
> itself?

The code must be evaluated *before* using that new type of link, or saved
to your ~/.emacs. You can simply evaluate it in your `scratch' buffer:

  (org-link-set-parameters "button"
			   :face '(:foreground "green4" :underline t)
			   :follow (lambda (path) (browse-url path))
			   :export (lambda (path desc backend)
				     (when (eq backend 'html)
				       (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc))))

If you want to pass the class or id 'manually' to each link, and thus
have more control, you can evaluate this other version, where the class
or id would be added at the end of the link description, after (for
example) "!style":

  (org-link-set-parameters "button"
			   :face '(:foreground "green4" :underline t)
			   :follow (lambda (path) (browse-url path))
			   :export (lambda (path desc backend)
				     (when (eq backend 'html)
				       (let* ((style (if (string-match "\\(!style .+\\)" desc)
							 (match-string 1 desc)
						       ""))
					      (desc (replace-regexp-in-string style "" desc)))
					 (format "<form><button %s formaction=\"%s\">%s</button></form>" style path desc)))))

Example:

[[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]]

== HTML ==>

<p>
<form><button !style class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form>
</p>

> I ask because if I try to evaluate it, aka 'C-c C-c' on the
> '#begin_src' block, nothing happens.

When you evaluate the code and add the new link type 'button', does it
appear in your document with the face defined for that link: green,
underlined? Have you tried testing it on a clean Emacs/Org?

Best regards,

Juan Manuel 

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Juan Manuel Macías]

Juan Manuel Macías writes:

> If you want to pass the class or id 'manually' to each link, and thus
> have more control, you can evaluate this other version, where the class
> or id would be added at the end of the link description, after (for
> example) "!style":

PS: Sorry, this is the correct code:

  (org-link-set-parameters "button"
			   :face '(:foreground "green4" :underline t)
			   :follow (lambda (path) (browse-url path))
			   :export (lambda (path desc backend)
				     (when (eq backend 'html)
				       (let ((style (if (string-match "\\(!style\\)\\(.+\\)" desc)
							 (match-string 2 desc)
						       ""))
					      (desc (replace-regexp-in-string "\\(!style .+\\)" "" desc)))
					 (format "<form><button %s
			   formaction=\"%s\">%s</button></form>" style
			   path desc)))))


Example:

[[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]]

== HTML ==>

<p>
<form><button  class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form>
</p>

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 1238 bytes --]

Thanks for this, will try this for my Emacs config.

On Sat, Feb 19, 2022, at 4:51 AM, Juan Manuel Macías wrote:
> Juan Manuel Macías writes:
> 
> > If you want to pass the class or id 'manually' to each link, and thus
> > have more control, you can evaluate this other version, where the class
> > or id would be added at the end of the link description, after (for
> > example) "!style":
> 
> PS: Sorry, this is the correct code:
> 
>   (org-link-set-parameters "button"
>    :face '(:foreground "green4" :underline t)
>    :follow (lambda (path) (browse-url path))
>    :export (lambda (path desc backend)
>      (when (eq backend 'html)
>        (let ((style (if (string-match "\\(!style\\)\\(.+\\)" desc)
> (match-string 2 desc)
>        ""))
>       (desc (replace-regexp-in-string "\\(!style .+\\)" "" desc)))
> (format "<form><button %s
>    formaction=\"%s\">%s</button></form>" style
>    path desc)))))
> 
> 
> Example:
> 
> [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]]
> 
> == HTML ==>
> 
> <p>
> <form><button  class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form>
> </p>
> 
> 

[-- Attachment #2: Type: text/html, Size: 2209 bytes --]

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 1745 bytes --]

Hey Juan,

Just wanted to let you know that this works beautifully!

I wish I was as good at Elisp to make this in the first place, but this really helps since I wanted to have some minimum overhead for 2 separate websites to be able to just write in Org Mode but include ideas for buttons, with classes and ID values.

This helps a ton, thanks so much as it totally worked! :)

Sincerely,

Sam

On Sun, Feb 20, 2022, at 7:38 PM, Samuel Banya wrote:
> Thanks for this, will try this for my Emacs config.
> 
> On Sat, Feb 19, 2022, at 4:51 AM, Juan Manuel Macías wrote:
>> Juan Manuel Macías writes:
>> 
>> > If you want to pass the class or id 'manually' to each link, and thus
>> > have more control, you can evaluate this other version, where the class
>> > or id would be added at the end of the link description, after (for
>> > example) "!style":
>> 
>> PS: Sorry, this is the correct code:
>> 
>>   (org-link-set-parameters "button"
>>    :face '(:foreground "green4" :underline t)
>>    :follow (lambda (path) (browse-url path))
>>    :export (lambda (path desc backend)
>>      (when (eq backend 'html)
>>        (let ((style (if (string-match "\\(!style\\)\\(.+\\)" desc)
>> (match-string 2 desc)
>>        ""))
>>       (desc (replace-regexp-in-string "\\(!style .+\\)" "" desc)))
>> (format "<form><button %s
>>    formaction=\"%s\">%s</button></form>" style
>>    path desc)))))
>> 
>> 
>> Example:
>> 
>> [[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link !style class="mybutton"]]
>> 
>> == HTML ==>
>> 
>> <p>
>> <form><button  class="mybutton" formaction="http://www.sambanya.com/artgallery.html">Art Gallery Page Link </button></form>
>> </p>
>> 
>> 
> 

[-- Attachment #2: Type: text/html, Size: 2915 bytes --]

Re: Question Regarding Creating HTML Style Buttons With Org Mode

[Juan Manuel Macías]

Hi Samuel,

Samuel Banya writes:

> Hey Juan,
>
> Just wanted to let you know that this works beautifully!
>
> I wish I was as good at Elisp to make this in the first place, but
> this really helps since I wanted to have some minimum overhead for 2
> separate websites to be able to just write in Org Mode but include
> ideas for buttons, with classes and ID values.
>
> This helps a ton, thanks so much as it totally worked! :)

You're welcome! I'm glad it works and is useful to you. Org links
have great potential :-)

Best regards,

Juan Manuel