TampaGov Drupal Site Building Procedures

Import Files and Images (FTP to Acquia and Import to Media Library)

  1. Create dept_namexxx\files folder structure in your local drive, where <namexxx> is the department name you are working on (ex. budget)
  2. Copy all files related to dept_namexxx (ex. budget) from the production web server (\\wwwpri.ads.cot\dept_namexxx) to your local drive
  3. Rename all files using the following rules (NOTE: WE ARE SKIPPING THIS STEP DUE TO TIME CONSTRAINTS):
    1. Convert all filenames to lowercase
    2. Remove comas and dots in filenames before extension if any
    3. Change an underscore by a dash
    4. Change a space by a dash
    5. Replace --- by – (three by one)
    6. Replace – by – (two by one)
  4. FTP local dept_namexxx \files to the corresponding location in Acquia server: /mnt/gfs/tampagovdev/sites/default/files/<namexxx>/files, where <namexxx> is your department name  (ex. /mnt/gfs/tampagovdev/sites/default/files/budget/files). 
  5. Go to the Drupal site http://tampagovdev.prod.acquia-sites.com, then to menu item CONTENT -> FILES -> IMPORT FILES
  6. Point the Directory to /mnt/gfs/tampagovdev/sites/default/files/<namexxx>/files
  7. Leave Pattern as is and click PREVIEW
  8. Click on "Confirm" to start the import and wait for it to complete
  9. Go to menu item CONTENT -> FILES
  10. Click "Media Root" folder
  11. At the top of the page, under “Type” select the relevant field types such as Image, Audio, Document
  12. Select images
  13. Under OPERATIONS, choose Change Value
  14. Click Execute button
  15. Select the target Media Folder check box 
  16. From the the Media Folder drop down list select the target folder; if the folder is not listed create a taxonomy term under Media Folder Vocabulary
  17. Click Next and wait for Drupal to process
  18. Click Confirm button
  19. Return to the Files page and verify your files are in the correct taxonomy. repeat with images folder.

Content Import (setup page - different from actual file or image import)

Metz prepares a CSV file stored under G:\docs\WEB_SUPPORT\Drupal\Big Couch\Content for each Department with the following columns:

  1. GUID – MUST be a unique id for each imported record; we need to keep track of last imported record number. THIS IS VERY IMPORTANT.
  2. Node Title – title of the node that will be created
  3. URL Alias – this is the URL for that node that will be created
  4. Content Tags – just tags
  5. Node Content – this is the Body of the node to be created; this area is manipulated to update the links to paths (URL alias) or files/images (files locations) and apps (apps.tampagov.net)
  6. Department – this must match one of the Department taxonomies; taxonomy MUST be there before the import
  7. Images – this is a list of image filenames in a gallery separated by a pipe (see the art program csv for an example at https://docs.google.com/spreadsheets/d/1YPvoAgmEIO1BcCKNjEe57yLV8icuAu91...)
      1. To get a list of images separated by pipes do the following: 
      2. Open a DOS cmd window. Go to the the directory where the images are by using cd command (ex. C:\Drupal\content\city-clerk\photo-galleries). Create a file with a list of images by using the dir command (ex. dir /l/b/a-d/ON > filelist.txt)
      3. Edit filelist.txt in notepad, add a pipe symbol (|) at the end of each filename and remove the newlines (Farr Note: I used Notepad++ to replace the "character" at the end of the line with |)
      4. Copy the string of pipe delimited filenames to the corresponding images cell
  8. Image Path – this holds a formula that appends the image path to the image filename for the gallery, where the formula is as follows:
      1. =IF(ISBLANK(G156),"",CONCATENATE("public://art-programs/photo-galleries/",SUBSTITUTE(G156,"|","|public://art-programs/photo-galleries/" )))
      2. G156 is the cell where the list of images separated by pipes are
      3. art-programs should be the name of your department
      4. photo-galleries is the folder where the images are (under your department name)

Save the file as a CSV file format.

Run the VBA subroutine to replace all *.asp links (href="*.asp") for URL alias. Get with Gio.

Upload import file:

  1. Go to http://tampagovdev.prod.acquia-sites.com/import/content_import
  2. Click on Choose File, and browse to your CSV and click "Open"
  3. Click import. This will create all the nodes for your file.

Create Menu and Add to Template (YOU MUST DO THIS BEFORE MODIFYING ANY PAGES):

The next step is to create the menu for your Department:

  1. Go to http://tampagovdev.prod.acquia-sites.com/admin/structure/menu
  2. Click Add menu. Keep the same naming convention: “Dept – name”, Save
  3. Add menu items. Use the URL Alias column from your CSV file.

How to make the menu show up on your pages:

  1. To do this, go to Configuration -> Content Authoring -> Panelizer
  2. Then scroll down to Node Type and under Full Page Override and then click LIST
  3. Then on the next screen, click SETTINGS.
  4. On the following page, click the Content tab
  5. Then add the new menu you made in the sidebar, adding your visibility settings like you did before
    1. On "Sidebar" click the wheel and click "Add Content"
    2. From the left navigation list select "Menus"
    3. Scrool down until you find your menu.  NOTE:  DO NOT SELECT "Dept - dept name menu tree"
    4. Click Add
    5. Then hit save.
    6. From the Sidebar menu click on the wheel in your menu
    7. Click Settings
    8. Check the Override title checkbox, and click Save
    9. Click on the wheel in your menu gain
    10. Click on Visibility > Add New Rule
    11. Select "String: URL path"
    12. Select "Allow access on the following pages"
    13. in the Paths box add "dept-name*" and "dept-name/*"
    14. Click save
    15. Click save again

Making a Slideshow with Carousel (From Adam/Big Couch)
This will display thumbnails below picture.

  1. Go to the slideshow page and click Edit (not Panelizer) and THEN click Panelizer tab
  2. Under “Full Page Override”, click “Settings”
  3. Set the CSS ID to “page-carousel” (no “”) and Save
  4. Click “Content”
  5. On “This node: Slideshow” click the Gear icon and choose Settings
  6. After it pops up, hit continue
  7. Set the “General Settings” options to the following:
  8. Image Style - slideshow_full_carousel
  9. Link image to: Colorbox
  10. Colorbox image style: None (original image)
  11. Colorbox slideshow: manual
  12. Colorbox speed: 4000
  13. Colorbox transition: elastic
  14. Colorbox transition speed: 350
  15. Caption (if needed): Title text
  16. Caption link: nothing
  17. Transition effect: fade
  18. Transition speed: 1000
  19. Timeout: 4000
  20. Order: normal
  21. Check “Create prev/next” and “pause/play”
  22. Prev/next control positions: after
  23. Check “Pause on Hover”
  24. Pager: Carousel : NOTE - Set this to NONE if you do not want the thumbnails to display; See TPD Black History Committee for an example
  25. Pager position: after
  26. Pager image style: none
  27. Carousel image style: slideshow_thumb
  28. Carousel number of images: 3
  29. Carousel images to scroll by: 1
  30. Carousel transition speed: 500
  31. Carousel skin: none
  32. Check “Follow active slide” and “Circular carousel”
  33. Leave remaining options as is and click “Finish”
  34. When you click “Finish”, you may get a popup error saying “AJAX 500”. This is ok. Simply click the red X in the top corner to close the window then hit SAVE. Your changes will be saved and the updates completed.

Content QA

Now you are ready to QA all your Department pages:

  1. For each imported page, go to the Edit tab and set the “Content Sections” field to the Department the page belongs to. This is used by the Workbench Access.
  2. For webapps links, use http://apps.tampagov.net
    1. ex. http://apps.tampagov.net/appl_customer_service_center/dept_services.asp?Group=cable+communication
    2. ex. http://apps.tampagov.net/msg?ID=179 
  3. For document links in the body, use the document path. ex. /sites/default/files/city-clerk/files/web-page-public-records-requests.pdf
  4. For document links in the menu, use the FULL path. ex. http://www.tampagov.net/sites/default/files/city-clerk/files/web-page-public-records-requests.pdf
  5. For links to other departments that do not exist yet, use the URL alias (it will work eventually). To find what the URL alias will be, go to the doc with ALL the URL Aliases at  G:\docs\WEB_SUPPORT\Drupal\Big Couch\url_aliases_listing_june_18_2014.xlsx and search for the old path under the URL column  (ex. /dept_parks_and_recreation/programs_and_services/Opportunities/Employment_Opportunities.asp), then scroll to the Drupal_Node_Alias column to find the new Drupal path (ex. parks-and-recreation/Programs/opportunities/employment-opportunities)
  6. For photo galleries listings - go to G:\docs\WEB_SUPPORT\photo-gallery or G:\docs\WEB_SUPPORT\photo-gallery2

Formatting Content

  1. H1 tag - suppressed so that title do not show twice on imported content. If you want to use it, add the class="show" to the html of an H1 tag
  2. Table override with color header and cellpadding - use class="talt" to the table tag

Adding a Button Style to a link

Simply add "button-link" (without quotes) in the class text field under Attributes in the Link dialog box.

Replace Tables by using a Columned Layout

If you require a columned layout on the TampaGov Drupal site (within the body content area) wrap each column in these DIV tags:

 <div class="content-column"> (for 2 columns)
<div class="content-column3"> (for 3 column)

This should replace tables that were used for simple layouts – and will be responsive

Here is a 2 and 3 column sample:

http://tampagovdev.prod.acquia-sites.com/art-programs/Info/related-links
http://tampagovdev.prod.acquia-sites.com/parking/alt-home

If you have any questions, just let me know.

Robert 

Adding a Three Column Layout to the Content Page

See sample at http://tampagovdev.prod.acquia-sites.com/fire-rescue-public-education

  1. Create a block with the third column content. Go to Structure > Blocks > Add block.
  2. Set the Block title as <none> and Block description as "CONTENT - Department Name".
  3. Add the content to the Block body.
  4. Save block
  5. Go to the Content Page that needs the three columns and click the Panelizer tab
  6. Click on Full page override - layout. Select Whelan and click Continue and Save
  7. Go to Full page override - content. Click the Second Column gear > Add content.
  8. In the Add content to second column popup, click custom blocks. Scroll to the created block and click add.
  9. Click Save and Save.