Add background-image to <td> in PDF (ABCpdf) - html

I'm dynamically creating a PDF using ABCpdf (HTML -> PDF)
I'm trying to create a Table Of Contents (with leaders), and I think the easiest way to get the leaders is using a repeat-x background-image. Here is my file structure:
/Web
GenReport.aspx
/images
tocback.gif
/Data
template.html
GenReport uses an html template, and replaces all applicable sections when generating the pdf. The styles also live in template.html.
Everything is working, except that the image isn't being found (If I use a direct path to another image on the web, I can get the image to appear in the background of the table.)
So, my question is, how do I reference the tocback.gif? Does it need to reference the path from the template (/Data/template.html - see (1) below) or from the page that generates the pdf (/Web/GenReport.aspx (2) below)?
(1) background-image: url(/images/tocback.gif);
(2) background-image: url(../Web/images/tocback.gif);
Obviously, neither of these are working for me. Am I missing something?
(I wouldn't even mind adding a hard-coded reference to an image on the FS, if that is an option.)

I found the answer in the manual
http://www.websupergoo.com/support.htm (6.17)

You can't get that image rendered into the pdf. Add a new page, render your html into that page.pass that page url to AddImageUrl() method to generate pdf successfully.
find sample code for this in abcpdf helpline.
cheers

Related

Use image in Sphinx as clickable link

Problem:
I have a table of images that I'm using as an overview/introduction. I want the end-user to be able to click on the image and it link to the HTML page for that image's corresponding introductory information1.
The problem is I can't seem to get the linking part to work. The table of images shows up fine, but clicking on an image just takes me to a page not found screen (see image at bottom of post). I've spent about an hour on Google but haven't found a solution yet.
1each image has a corresponding .rst file with the info I want the end-user to see
Info:
Sphinx 1.8.5
Python 3.7.6 (MiniConda)
Building html pages from reStructuredText files
sphinx-build -b html source build
make clean html
make html
Nothing special has been done in my conf.py file, other than including the RTD theme
I'm guessing I will need to do something fancy in my conf.py file if doing what I want is possible at all
Adding the .rst files to the .. toc:: directive in introduction_file.rst didn't help
Here is the reST code I have so far:
the image directives are all inside a table; table omitted for brevity
I'm also confident that the 'image directives inside a table' thing is not the issue
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: introduction_files/my_first_image_intro_file.rst
.. also didn't work:
.. :target: introduction_files/my_first_image_intro_file.html
File Structure:
Home.rst is the entry point for the HTML pages (i.e. it used to be called index.rst until I renamed it and refactored conf.py accordingly)
--build
...
-- source
|--Introduction/
|--introduction_file.rst
|--images/
|--my_first_image.png
|--my_second_image.png
...
|--introduction_files/
|--my_first_image_intro_file.rst
|--my_second_image_intro_file.rst
...
|--_static/
...
|--_templates/
...
|--conf.py
|--Home.rst
I'm not opposed to doing what I want in HTML/CSS, but if there is a way to do it in sphinx then I'd prefer to do it that way. I will end up editing the HTML code regardless, but the less editing the better; Sphinx is essentially a quick-start or template.
This image is what I see in my browser when I click on one of the images in my table-of-images. The URL bar in Chrome shows the correct path to the .rst file though, so I'm a bit confused.
I tried changing the :target: file extension to .html but that didn't work either
Edit: forgot to add the location of introduction_file.rst to the folder structure
Solution:
Mix up between the paths. I was linking to the file in the source directory, but needed to link to the file in the build directory. Had to navigate back to the root directory with a few '../' prefixes, then navigate to the .html information file in the build directory. In other words, this is what it ended up looking like:
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: ../../../build/html/Introduction/introduction_files/my_first_image_intro_file.html
The target option's value must be either relative to introduction_file.rst (you don't provide its location so you'll have to figure that out), or absolute to the documentation root, i.e., /Introduction/introduction_files/my_first_image_intro_file.html.

Include standalone HTML page in sphinx document

For most of my project's documentation I prefer a standard sphinx layout. However for the landing page I would prefer to use custom HTML/CSS/JS without any of the layout, TOC, or sidebars of the normal sphinx site. Is there a way to include a raw HTML standalone page in a sphinx-generated website in a way that completely disregards the normal layout of the rest of the site?
As a counter example I know that I can include raw HTML bits into a page using the following (see also this question)
.. raw:: html
:file: myfile-html
However this just embeds a file within the normal layout. I would like to have a completely standalone HTML page.
I just ran into this problem myself, and the way I solved it was to simply include the html file in my source/_static folder, then refer to it with a relative link.
So if source/_static/my_standalone.htm is the path where I have my non-generated HTML file, and the .rst file where I want to type my link is at source/otherfolder/index.rst, I write it like this in my rst:
Link to my non-Sphinx HTML file
===============================
To get to my standalone, non-generated HTML file,
just `click here <../_static/my_standalone.html>`_ now!

Including images in a Genshi/Trac template

I am trying to include some images in a Genshi template for my Trac plugin, but it always shows only the alternative text because it cannot find the images.
I have the following (X)HTML code:
<div>
<img src="file://c:/path/to/image.png" alt="asdf" />
</div>
When I use this code with a simple html file and open it in the browser, the image is displayed correctly, which means that both the path and syntax are correct.
But when I insert the code snippet into a Genshi template and use it within Trac, the image cannot be found. However, when I look at the HTML source code in the web browser and copy the URLs into a new browser tab, it is again displayed correctly. This means that only the server cannot find the image.
The images are in a directory inside the python-egg file, and the path points directly to the directory created by Trac, which also contains my CSS and HTML files, both of which are loaded correctly. The images are correctly referenced in the setup script which creates the egg.
How do I have to reference images in (X)HTML documents when using them with a server?
Is there a special way to include images in Genshi documents? (I haven't found one.)
Thanks to the comment of RjOllos and this site I was able to fix it by trying all of the URL types. Although it says for a plugin to be /chrome/<pluginname>, it was actually just /chrome that worked. See the edit below! So the full URL is then <ip>:<port>/chrome/path/to/image.png.
EDIT: I discovered I actually used the /chrome/pluginname version, just that I did not use the name of my plugin as "pluginname". See my comment below. It seems like /chrome/pluginname should actually be /chrome/htdocsnameor something like that, in case you use a different name rather than the plugin name when implementing the ITemplateProvider. In my case I called it images, which was the same name as the folder. END OF EDIT
Another mistake I made was forgetting the initial slash (chrome/path/to/image.png), which caused Trac to assemble the URL to <ip>:<port>/<current page>/chrome/path/to/image.png.

Css text won't load background url images on website?

I used notepad++ with html5 and css3. The problem is that the css isn't loading the images, though in the editor it did. I need help. here's my text for one of the images named content, and yes the content tag is on purpose since it's id:
#content{
width:900px;
height:600px;
background:url(images/content.png);
border-radius:20px;
}
So, the folder is on desktop, it's named images and the image is a png named content. It worked on the editor but it's not showing up on the website. On the website it's just showing the grey background.
I took screenshots of it working in edit viewer and it on the actual website.
http://postimg.org/image/mdeso350h/ -- looks fine on edit viewer
http://postimg.org/image/gb75xlgkh/ -- not working on website
First you need to check the file path of css and the images.,
I think this is your file structure
--folder
----index.html
----name.css
----content.png
so, just try that background:url(content.png); this will help you
incase your file structure like
--folder
----index.html
----name.css
----images/content.png
in this case your style works fine background:url(images/content.png);
Always use quotes for linking images like;
background-image: url("images/content.png");
And inside your root folder in your server (in x10host.com), use file manager to create a folder named images where you have uploaded your file index.html, and then you can see index.html file and images folder in a single place. Then upload your images to images folder. Hope this helps.
Sometimes design tools tend to save file extensions capitalized (.PNG for example), and not every server is aware of that, so you should be.
Check your folder location of the image as well.

In a MediaWiki page, how do I include a link to both a file and the file's description page

In a MediaWiki page, I want to have a link to both the file and the file's description page. I've seen this done before, but I can't find it now... it looked something like
{{file|MyFileName|pdf|This is my PDF file}}
It ended up with the page showing "This is my PDF file" as a direct link, and a little PDF icon next to it that was actually a link to the description page. This worked with pdf, doc, docx, ppt, pptx, and more, I believe. The prefix at the beginning was always "file" and the 2nd option was where you put the file type.
Of course, I just tried this on my MediaWiki 1.19.0 installation and it doesn't work.
It looks like some kind of template transclusion, and either my configuration is wrong or I don't have the template or my MediaWiki version is too old. I have the File template, though because I can get half of it working like this:
[[:File:MyFileName.pdf|This is my PDF file]]
I even remember seeing a page describing these two formats as the "old" and "new" ways of linking to files, but I can't find that page now either.
To elaborate, the template would probably have a structure like this:
template:file
[[Media:{{{1|}}}.{{{2|}}}|{{{3|}}}]]<!--
-->[[File:{{{2|}}} icon.png|link=File:{{{1|}}}.{{{2|}}}]]
The go ahead and load an icon image for each file type you plan on using. (If the image isn't icon-sized, you'll want to add a width modifier in there as well.) With this template, {{file|MyFileName|pdf|This is my PDF file}} should generate exactly the output you describe: a direct link to MyFileName.pdf called "This is my PDF file", followed by an embedded image File:Pdf icon.png that is also a link to the description page for MyFileName.pdf.
You can create a simple version of such template like this:
[[Media:{{{1}}}.{{{2}}}|{{{3}}}]] [[:File:{{{1}}}.{{{2}}}|(description)]]
The Media namespace is used to directly link to the file; : specifies that you want to link to the description page and not show the file.
If you want to have an icon for each file type, you would need to {{#switch}} on the file types.