* Images in div and p
@ 2009-10-01 4:24 Sebastian Rose
2009-10-01 4:53 ` Carsten Dominik
0 siblings, 1 reply; 5+ messages in thread
From: Sebastian Rose @ 2009-10-01 4:24 UTC (permalink / raw)
To: Emacs-orgmode mailing list
Hi Carsten and all XHTML exporters,
is there a godd reason to export
[[./intranet/img/powered-by-mysql-167x86.png]]
as
<div class="figure">
<p><img src="./intranet/img/powered-by-mysql-167x86.png"
alt="./intranet/img/powered-by-mysql-167x86.png" /></p>
</div>
?
Nowadays, we need to add this to our Org-mode files:
#+STLYE: div.figure p { text-align: left; }
I think this not a feature, but annoying. The <div><p> element prevents
individual aligned images and should go IMHO.
We can't align an image like this anymore:
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum +---------------------+
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | |
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | |
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | |
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | |
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | |
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | |
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum +---------------------+
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
+---------------+ ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
| | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
| | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
| | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
+---------------+ ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Sebastian
^ permalink raw reply [flat|nested] 5+ messages in thread* Re: Images in div and p 2009-10-01 4:24 Images in div and p Sebastian Rose @ 2009-10-01 4:53 ` Carsten Dominik 2009-10-01 15:10 ` Sebastian Rose 0 siblings, 1 reply; 5+ messages in thread From: Carsten Dominik @ 2009-10-01 4:53 UTC (permalink / raw) To: Sebastian Rose; +Cc: Emacs-orgmode mailing list Hi Sebastian, what patch should I apply? You know that you have infinite power over the Org HTML export :-) Could we have a way to set how to place the figure on a per-figure base? Like using #+HTML_ATTR: Let me know how to improve this. - Carsten On Oct 1, 2009, at 6:24 AM, Sebastian Rose wrote: > Hi Carsten and all XHTML exporters, > > > > is there a godd reason to export > > > [[./intranet/img/powered-by-mysql-167x86.png]] > > > as > > <div class="figure"> > <p><img src="./intranet/img/powered-by-mysql-167x86.png" > alt="./intranet/img/powered-by-mysql-167x86.png" /></p> > </div> > > ? > > > Nowadays, we need to add this to our Org-mode files: > > #+STLYE: div.figure p { text-align: left; } > > > > I think this not a feature, but annoying. The <div><p> element > prevents > individual aligned images and should go IMHO. > > > We can't align an image like this anymore: > > > > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > +---------------------+ > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > | | > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > | | > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > | | > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > | | > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > | | > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > | | > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum > +---------------------+ > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem > ipsum > +---------------+ ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem > ipsum > | | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem > ipsum > | | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem > ipsum > | | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem > ipsum > +---------------+ ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem > ipsum > > > > > > > > > Sebastian > > > _______________________________________________ > Emacs-orgmode mailing list > Remember: use `Reply All' to send replies to the list. > Emacs-orgmode@gnu.org > http://lists.gnu.org/mailman/listinfo/emacs-orgmode ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Images in div and p 2009-10-01 4:53 ` Carsten Dominik @ 2009-10-01 15:10 ` Sebastian Rose 2009-10-01 23:16 ` Sebastian Rose 0 siblings, 1 reply; 5+ messages in thread From: Sebastian Rose @ 2009-10-01 15:10 UTC (permalink / raw) To: Carsten Dominik; +Cc: Emacs-orgmode mailing list Carsten Dominik <carsten.dominik@gmail.com> writes: > Hi Sebastian, > > what patch should I apply? You know that you have infinite power > over the Org HTML export :-) > Could we have a way to set how to place the figure on a per-figure base? > Like using #+HTML_ATTR: We have that already and it works fine. Maybe add the <div class="figure"><p>...</p></div> for images with captions only? > Let me know how to improve this. I will take a look into this and send a patch. Best wishes, Sebastian > > - Carsten > > On Oct 1, 2009, at 6:24 AM, Sebastian Rose wrote: > >> Hi Carsten and all XHTML exporters, >> >> >> >> is there a godd reason to export >> >> >> [[./intranet/img/powered-by-mysql-167x86.png]] >> >> >> as >> >> <div class="figure"> >> <p><img src="./intranet/img/powered-by-mysql-167x86.png" >> alt="./intranet/img/powered-by-mysql-167x86.png" /></p> >> </div> >> >> ? >> >> >> Nowadays, we need to add this to our Org-mode files: >> >> #+STLYE: div.figure p { text-align: left; } >> >> >> >> I think this not a feature, but annoying. The <div><p> element prevents >> individual aligned images and should go IMHO. >> >> >> We can't align an image like this anymore: >> >> >> >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum +---------------------+ >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | | >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | | >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | | >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | | >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | | >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum | | >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum +---------------------+ >> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum >> +---------------+ ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum >> | | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum >> | | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum >> | | ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum >> +---------------+ ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum >> >> >> >> >> >> >> >> >> Sebastian >> >> >> _______________________________________________ >> Emacs-orgmode mailing list >> Remember: use `Reply All' to send replies to the list. >> Emacs-orgmode@gnu.org >> http://lists.gnu.org/mailman/listinfo/emacs-orgmode ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Images in div and p 2009-10-01 15:10 ` Sebastian Rose @ 2009-10-01 23:16 ` Sebastian Rose 2009-10-02 6:21 ` Carsten Dominik 0 siblings, 1 reply; 5+ messages in thread From: Sebastian Rose @ 2009-10-01 23:16 UTC (permalink / raw) To: Carsten Dominik; +Cc: Emacs-orgmode mailing list [-- Attachment #1: Type: text/plain, Size: 200 bytes --] OK, this is my proposal (don't know, why I didn't send a patch in the first place...). If a caption is provided, wrap the image as before. If no caption is provided, just insert the image tag. [-- Warning: decoded text below may be mangled, UTF-8 assumed --] [-- Attachment #2: org-html-div-if-caption.patch --] [-- Type: text/x-diff, Size: 1210 bytes --] diff --git a/lisp/org-html.el b/lisp/org-html.el index 0e06919..a9adf30 100644 --- a/lisp/org-html.el +++ b/lisp/org-html.el @@ -1505,17 +1505,22 @@ lang=\"%s\" xml:lang=\"%s\"> (let* ((caption (org-find-text-property-in-string 'org-caption src)) (attr (org-find-text-property-in-string 'org-attributes src)) (label (org-find-text-property-in-string 'org-label src))) - (format "%s<div %sclass=\"figure\"> -<p><img src=\"%s\"%s /></p>%s -</div>%s" - (if org-par-open "</p>\n" "") - (if label (format "id=\"%s\" " label) "") + (concat + (if caption + (format "%s<div %sclass=\"figure\"> +<p>" + (if org-par-open "</p>\n" "") + (if label (format "id=\"%s\" " label) ""))) + (format "<img src=\"%s\"%s />" src (if (string-match "\\<alt=" (or attr "")) (concat " " attr ) - (concat " " attr " alt=\"" src "\"")) - (if caption (concat "\n<p>" caption "</p>") "") - (if org-par-open "\n<p>" "")))))) + (concat " " attr " alt=\"" src "\""))) + (if caption + (format "</p>%s +</div>%s" + (concat "\n<p>" caption "</p>") + (if org-par-open "\n<p>" "")))))))) (defun org-export-html-get-bibliography () "Find bibliography, cut it out and return it." [-- Attachment #3: Type: text/plain, Size: 4205 bytes --] A little Org-file for testing: #+OPTIONS: toc:nil #+MACRO: imageurl ./intranet/img/powered-by-mysql-167x86.png #+STYLE: <style type="text/css"> #+STYLE: #content { width:780px; } #+STYLE: </style> * Images aligned #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="right" [[{{{imageurl}}}]] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="left" [[{{{imageurl}}}]] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo... * Images with Captions Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui #+CAPTION: My favourite image #+ATTR_HTML: alt="image" hspace="10" vspace="10" [[{{{imageurl}}}]] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo... * Images in a row #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" [[{{{imageurl}}}]] [-- Attachment #4: Type: text/plain, Size: 204 bytes --] _______________________________________________ Emacs-orgmode mailing list Remember: use `Reply All' to send replies to the list. Emacs-orgmode@gnu.org http://lists.gnu.org/mailman/listinfo/emacs-orgmode ^ permalink raw reply related [flat|nested] 5+ messages in thread
* Re: Images in div and p 2009-10-01 23:16 ` Sebastian Rose @ 2009-10-02 6:21 ` Carsten Dominik 0 siblings, 0 replies; 5+ messages in thread From: Carsten Dominik @ 2009-10-02 6:21 UTC (permalink / raw) To: Sebastian Rose; +Cc: Emacs-orgmode mailing list Applied, thanks! Maybe your example can be turned into an image-placing tutorial or FAQ? - Carsten On Oct 2, 2009, at 1:16 AM, Sebastian Rose wrote: > > > OK, this is my proposal (don't know, why I didn't send a patch in the > first place...). > > If a caption is provided, wrap the image as before. > > If no caption is provided, just insert the image tag. > > > > diff --git a/lisp/org-html.el b/lisp/org-html.el > index 0e06919..a9adf30 100644 > --- a/lisp/org-html.el > +++ b/lisp/org-html.el > @@ -1505,17 +1505,22 @@ lang=\"%s\" xml:lang=\"%s\"> > (let* ((caption (org-find-text-property-in-string 'org-caption > src)) > (attr (org-find-text-property-in-string 'org-attributes src)) > (label (org-find-text-property-in-string 'org-label src))) > - (format "%s<div %sclass=\"figure\"> > -<p><img src=\"%s\"%s /></p>%s > -</div>%s" > - (if org-par-open "</p>\n" "") > - (if label (format "id=\"%s\" " label) "") > + (concat > + (if caption > + (format "%s<div %sclass=\"figure\"> > +<p>" > + (if org-par-open "</p>\n" "") > + (if label (format "id=\"%s\" " label) ""))) > + (format "<img src=\"%s\"%s />" > src > (if (string-match "\\<alt=" (or attr "")) > (concat " " attr ) > - (concat " " attr " alt=\"" src "\"")) > - (if caption (concat "\n<p>" caption "</p>") "") > - (if org-par-open "\n<p>" "")))))) > + (concat " " attr " alt=\"" src "\""))) > + (if caption > + (format "</p>%s > +</div>%s" > + (concat "\n<p>" caption "</p>") > + (if org-par-open "\n<p>" "")))))))) > > (defun org-export-html-get-bibliography () > "Find bibliography, cut it out and return it." > > > A little Org-file for testing: > > > > #+OPTIONS: toc:nil > #+MACRO: imageurl ./intranet/img/powered-by-mysql-167x86.png > #+STYLE: <style type="text/css"> > #+STYLE: #content { width:780px; } > #+STYLE: </style> > > * Images aligned > > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="right" > [[{{{imageurl}}}]] > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam > nonummy > nibh euismod tincidunt ut laoreet dolore magna aliquam erat > volutpat. Ut wisi > enim ad minim veniam, quis nostrud exerci tation ullamcorper > suscipit lobortis > nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure > dolor in > hendrerit in vulputate velit esse molestie consequat, vel illum > dolore eu > feugiat nulla facilisis at vero et accumsan et iusto odio dignissim > qui > blandit praesent luptatum zzril delenit augue duis dolore te > feugait nulla > facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, > sed diam > nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat > volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation > ullamcorper > suscipit lobortis nisl ut aliquip ex ea commodo > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="left" > [[{{{imageurl}}}]] > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam > nonummy > nibh euismod tincidunt ut laoreet dolore magna aliquam erat > volutpat. Ut wisi > enim ad minim veniam, quis nostrud exerci tation ullamcorper > suscipit lobortis > nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure > dolor in > hendrerit in vulputate velit esse molestie consequat, vel illum > dolore eu > feugiat nulla facilisis at vero et accumsan et iusto odio dignissim > qui > blandit praesent luptatum zzril delenit augue duis dolore te > feugait nulla > facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, > sed diam > nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat > volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation > ullamcorper > suscipit lobortis nisl ut aliquip ex ea commodo... > > * Images with Captions > > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam > nonummy > nibh euismod tincidunt ut laoreet dolore magna aliquam erat > volutpat. Ut wisi > enim ad minim veniam, quis nostrud exerci tation ullamcorper > suscipit lobortis > nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure > dolor in > hendrerit in vulputate velit esse molestie consequat, vel illum > dolore eu > feugiat nulla facilisis at vero et accumsan et iusto odio dignissim > qui > #+CAPTION: My favourite image > #+ATTR_HTML: alt="image" hspace="10" vspace="10" > [[{{{imageurl}}}]] > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam > nonummy > nibh euismod tincidunt ut laoreet dolore magna aliquam erat > volutpat. Ut wisi > enim ad minim veniam, quis nostrud exerci tation ullamcorper > suscipit lobortis > nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure > dolor in > hendrerit in vulputate velit esse molestie consequat, vel illum > dolore eu > feugiat nulla facilisis at vero et accumsan et iusto odio dignissim > qui > blandit praesent luptatum zzril delenit augue duis dolore te > feugait nulla > facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, > sed diam > nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat > volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation > ullamcorper > suscipit lobortis nisl ut aliquip ex ea commodo... > > * Images in a row > > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] > #+ATTR_HTML: alt="image" hspace="10" vspace="10" align="absmiddle" > [[{{{imageurl}}}]] ^ permalink raw reply [flat|nested] 5+ messages in thread
end of thread, other threads:[~2009-10-02 7:15 UTC | newest] Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed) -- links below jump to the message on this page -- 2009-10-01 4:24 Images in div and p Sebastian Rose 2009-10-01 4:53 ` Carsten Dominik 2009-10-01 15:10 ` Sebastian Rose 2009-10-01 23:16 ` Sebastian Rose 2009-10-02 6:21 ` Carsten Dominik
Code repositories for project(s) associated with this public inbox https://git.savannah.gnu.org/cgit/emacs/org-mode.git This is a public inbox, see mirroring instructions for how to clone and mirror all data and code used for this inbox; as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).