TampaGov Drupal Site Building Procedures
Import Files and Images (FTP to Acquia and Import to Media Library)
- Create dept_namexxx\files folder structure in your local drive, where <namexxx> is the department name you are working on (ex. budget)
- Copy all files related to dept_namexxx (ex. budget) from the production web server (\\wwwpri.ads.cot\dept_namexxx) to your local drive
- Rename all files using the following rules (NOTE: WE ARE SKIPPING THIS STEP DUE TO TIME CONSTRAINTS):
- Convert all filenames to lowercase
- Remove comas and dots in filenames before extension if any
- Change an underscore by a dash
- Change a space by a dash
- Replace --- by – (three by one)
- Replace – by – (two by one)
- 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).
- Go to the Drupal site http://tampagovdev.prod.acquia-sites.com, then to menu item CONTENT -> FILES -> IMPORT FILES
- Point the Directory to /mnt/gfs/tampagovdev/sites/default/files/<namexxx>/files
- Leave Pattern as is and click PREVIEW
- Click on "Confirm" to start the import and wait for it to complete
- Go to menu item CONTENT -> FILES
- Click "Media Root" folder
- At the top of the page, under “Type” select the relevant field types such as Image, Audio, Document
- Select images
- Under OPERATIONS, choose Change Value
- Click Execute button
- Select the target Media Folder check box
- 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
- Click Next and wait for Drupal to process
- Click Confirm button
- 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:
- GUID – MUST be a unique id for each imported record; we need to keep track of last imported record number. THIS IS VERY IMPORTANT.
- Node Title – title of the node that will be created
- URL Alias – this is the URL for that node that will be created
- Content Tags – just tags
- 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)
- Department – this must match one of the Department taxonomies; taxonomy MUST be there before the import
- 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...)
- To get a list of images separated by pipes do the following:
- 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)
- 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 |)
- Copy the string of pipe delimited filenames to the corresponding images cell
- Image Path – this holds a formula that appends the image path to the image filename for the gallery, where the formula is as follows:
- =IF(ISBLANK(G156),"",CONCATENATE("public://art-programs/photo-galleries/",SUBSTITUTE(G156,"|","|public://art-programs/photo-galleries/" )))
- G156 is the cell where the list of images separated by pipes are
- art-programs should be the name of your department
- 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:
- Go to http://tampagovdev.prod.acquia-sites.com/import/content_import
- Click on Choose File, and browse to your CSV and click "Open"
- 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:
- Go to http://tampagovdev.prod.acquia-sites.com/admin/structure/menu
- Click Add menu. Keep the same naming convention: “Dept – name”, Save
- Add menu items. Use the URL Alias column from your CSV file.
How to make the menu show up on your pages:
- To do this, go to Configuration -> Content Authoring -> Panelizer
- Then scroll down to Node Type and under Full Page Override and then click LIST
- Then on the next screen, click SETTINGS.
- On the following page, click the Content tab
- Then add the new menu you made in the sidebar, adding your visibility settings like you did before
- On "Sidebar" click the wheel and click "Add Content"
- From the left navigation list select "Menus"
- Scrool down until you find your menu. NOTE: DO NOT SELECT "Dept - dept name menu tree"
- Click Add
- Then hit save.
- From the Sidebar menu click on the wheel in your menu
- Click Settings
- Check the Override title checkbox, and click Save
- Click on the wheel in your menu gain
- Click on Visibility > Add New Rule
- Select "String: URL path"
- Select "Allow access on the following pages"
- in the Paths box add "dept-name*" and "dept-name/*"
- Click save
- Click save again
Making a Slideshow with Carousel (From Adam/Big Couch)
This will display thumbnails below picture.
- Go to the slideshow page and click Edit (not Panelizer) and THEN click Panelizer tab
- Under “Full Page Override”, click “Settings”
- Set the CSS ID to “page-carousel” (no “”) and Save
- Click “Content”
- On “This node: Slideshow” click the Gear icon and choose Settings
- After it pops up, hit continue
- Set the “General Settings” options to the following:
- Image Style - slideshow_full_carousel
- Link image to: Colorbox
- Colorbox image style: None (original image)
- Colorbox slideshow: manual
- Colorbox speed: 4000
- Colorbox transition: elastic
- Colorbox transition speed: 350
- Caption (if needed): Title text
- Caption link: nothing
- Transition effect: fade
- Transition speed: 1000
- Timeout: 4000
- Order: normal
- Check “Create prev/next” and “pause/play”
- Prev/next control positions: after
- Check “Pause on Hover”
- Pager: Carousel : NOTE - Set this to NONE if you do not want the thumbnails to display; See TPD Black History Committee for an example
- Pager position: after
- Pager image style: none
- Carousel image style: slideshow_thumb
- Carousel number of images: 3
- Carousel images to scroll by: 1
- Carousel transition speed: 500
- Carousel skin: none
- Check “Follow active slide” and “Circular carousel”
- Leave remaining options as is and click “Finish”
- 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.
Now you are ready to QA all your Department pages:
- 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.
- For webapps links, use http://apps.tampagov.net
- ex. http://apps.tampagov.net/appl_customer_service_center/dept_services.asp?Group=cable+communication
- ex. http://apps.tampagov.net/msg?ID=179
- For document links in the body, use the document path. ex. /sites/default/files/city-clerk/files/web-page-public-records-requests.pdf
- 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
- 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)
- For photo galleries listings - go to G:\docs\WEB_SUPPORT\photo-gallery or G:\docs\WEB_SUPPORT\photo-gallery2
- 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
- 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:
If you have any questions, just let me know.
Adding a Three Column Layout to the Content Page
- Create a block with the third column content. Go to Structure > Blocks > Add block.
- Set the Block title as <none> and Block description as "CONTENT - Department Name".
- Add the content to the Block body.
- Save block
- Go to the Content Page that needs the three columns and click the Panelizer tab
- Click on Full page override - layout. Select Whelan and click Continue and Save
- Go to Full page override - content. Click the Second Column gear > Add content.
- In the Add content to second column popup, click custom blocks. Scroll to the created block and click add.
- Click Save and Save.