You are here: Home / Documentation / How To's / How to import packaged HTML, CSS, PDFs, and images

How to import packaged HTML, CSS, PDFs, and images

by nguyen — published Aug 26, 2009 12:20 PM, last modified Aug 16, 2016 10:50 AM
e.g. "What Can I Do With This Major?" for Career Services

Overview

If, as did Career Services, you receive a packaged set of HTML, CSS, PDF, and image files and want to import them into your Plone site, here is an overview of how to do it.  Here is what the end result looks like on their development web site (the URL may change shortly).

If you had a plain vanilla Apache or Dreamweaver web site, you could simply upload the packaged directories into a new folder on your web site, and link to it from, say, your home page.  Although this is really very easy to do, the disadvantage is that the new pages will not look anything like the rest of your site.

With Plone, although a fair bit more work is required to import the packaged files, the end result will be to have those new pages look like the rest of your site, and for the contents of those new pages to be searchable and navigable using the same consistent user interface that exists on the rest of your site.

Steps

  • Using the ZMI's portal_quickinstaller or Site Setup -> Add Products, add to your site a product called "collective.uploadify" that lets you easily upload multiple files to  a folder.  See the "how to" on how to make "collective.uploadify" more user-friendly.
  • On your Plone site, add folders (using Add New -> Folder) to match the folder structure of the packaged files.  For example, the package may contain these folders:
    majors -> css    -> css-majors.css
                     -> css-reset.css
           -> default.html
           -> html   -> accounting.html
                     -> advertising.html
                     -> ... (77 files total)
           -> images -> back.gif
                     -> wcidwtm_logo.png
           -> links  -> accounting.htm
                     -> advertising.htm
                     -> ... (77 files total)
           -> pdf    -> accounting.pdf
                     -> advertising.pdf
                     -> ... (77 files total)
  • Use uploadify to put all the CSS, HTML, PDFs, and images onto your site.
  • Use scripts to convert the uploaded HTML files into normal Plone pages.  This is because when you uploaded the HTML files, your Plone site treats them as downloadable files, not pages.  Here is the "kimGenPage" script to convert the "html" folder's files into Plone pages, and the "kimGenPageLinks" script to convert the "links" folder's files into Plone pages.  
  • The above two scripts require that the files be in a subfolder called "src"; the scripts will read each file in the "src" subfolder and will create a matching Plone page in the current folder; in the above example, you must therefore create a subfolder "src" in each of the "html" and "links" folders, and cut and paste all the HTML files from "html" folder into the "html/src" folder, and similarly cut and paste all the HTML files from the "links" folder into the "links/src" folder.
  • (This step may not be required).  Add the CSS stylesheets to portal_skins/custom (add a new DTML Method for each, and paste the contents of each CSS file into the body of the DTML Method).
  • Register the CSS stylesheets with Plone's portal_css tool so that it serves them for your newly created Plone pages.  Using the ZMI, go to portal_css, scroll to the bottom to the "Add a new stylesheet" fieldset, add the two CSS files one at a time (all you have to specify is the name of the CSS file, so in the above examples, "css-majors.css" and "css-reset.css"; leave the other values and checkboxes as-is).  In the above example, the URL of the folder which will contain this package is called "what-can-i-do-with-this-major", so you would specify a condition like this to ensure that the CSS stylesheets are served only on that portion of the site:  
    python:'what-can-i-do-with-this-major' in request['URL']
    Check that the Debug mode box is checked at the top of the portal_css page, so that you can quickly see how your CSS changes take effect on various parts of your site.  Remember to uncheck that box and press Save when you are done testing all of this.
Navigation