1. Adding a News & Events Card

Step 1 — Add the story to the News and Events page first

  1. Edit the News and Events page.
  2. Add the headline and story text at the top of the section.
  3. Switch to Source view (<>) and put the anchor id directly on the headline tag: <h4 id="short-name">Headline</h4>. Never use a separate empty <a id="..."></a> tag — the editor silently deletes empty tags whenever anyone saves the page, breaking every link that points to them.
  4. Save.

Step 2 — Create the Homepage Card

  1. Go to Add Homepage Card.
  2. Title — the headline.
  3. Section — choose “News and Events”.
  4. Card Image — landscape photo, or reuse one via the Media button.
  5. Body — 1–3 sentences. Text format: Basic HTML.
  6. Read More Link — /news-and-events#short-name from Step 1.
  7. Order — leave blank (newest appears first automatically).
  8. Save.

Adding a New Year to the News & Events Archive (once a year — e.g. January 2027)

Stories on the News and Events page are grouped by year. The current year stays open at the top; past years are collapsible. When the first story of a new year is added, follow these steps.

Editor steps (safe to do yourself)

  1. Add the new year heading. Edit the News and Events page, switch to Source view (<>), and just above the current year's first story, add:
    <h2 class="archive-year-divider" id="year-2027">2027 <a class="back-to-top" href="#pagetop">↑ Top</a></h2>
  2. Add new stories under that heading as usual — each with its own <h4 id="short-name"> anchor (see the Anchors section).
  3. Add the year to the "Jump to year" bar. At the very top of the page in Source view, find class="archive-year-nav" and add a link as the first year:
    <a href="#year-2027">2027</a>
  4. Save and confirm: the new year shows at the top, and the "2027" jump link works.

Webmaster step (ask the webmaster — do not attempt by hand)

Once the previous year is complete, it should be collapsed (turned into a fold-away section) to keep the page light. Wrapping a full year of content in the collapsible tags by hand is error-prone, so the webmaster runs a short script to do it. Send them a note: "Please collapse [year] on the News and Events archive."

This is a once-a-year task. The current year stays open; each past year becomes collapsible.

The homepage shows the 8 most recent News & Events cards. Never create the card before the story exists — the Read More link will 404 or point nowhere.

 

2. Adding an Upcoming Meeting

Step 1 — Create the Event first

  1. Go to Add Event.
  2. Fill in Title, Start Date, End Date, Body, Event Image.
  3. Save — note the page URL.

Step 2 — Create the Homepage Card

  1. Go to Add Homepage Card.
  2. Section — “Upcoming Meetings”.
  3. Body (Basic HTML) — date, time, one sentence.
  4. Read More Link — the Event page URL from Step 1.
  5. Order — leave blank. Newest shows first; 5th drops off automatically.
  6. Save.

Step 3 — Check the Calendar

  1. Open the Calendar and find the event on its date.
  2. Open it and confirm date, time, and location — these feed the Google Calendar / Outlook “Add to Calendar” buttons.
  3. Anything wrong? Edit the Event node (not the card) and save.

The Calendar picks up Events automatically — never add meetings to the Calendar separately. Event first → Card → Calendar check.

3. Adding Cards to Other Sections

Same order applies to every homepage section: add the content first, add the anchor, then create the card. Funding Solicitations, Electric Vehicle Resources, TIG/Comment Periods/TCN, Infrastructure, and US DOT all use the same Homepage Card form:

  1. Add or update the target page content and its anchor (see Section 5).
  2. Fill in Title, Card Image, Body (Basic HTML), Read More Link (page URL or anchor).
  3. Section — pick the matching section.
  4. Order — leave blank. Cards sort newest-first by their Authored on date automatically (US DOT is the only section that uses the Order field).
  5. Save.

4. Editing an Existing Page

  1. Browse to the page, click Edit in the top toolbar (or find it via All Content).
  2. Edit the Body using the CKEditor 5 toolbar.
  3. Keep Text format as Basic HTML for cards; use Full HTML for pages needing inline styles or tables.
  4. Save.

Styling tips:

  • Section headers: <h5><strong>Title</strong></h5>
  • Blue bold intro: <p>...</p>
  • Back link: <p>&larr; <a href="/parent-page">Back to Parent</a></p>
  • Use Source editing (<>) button to paste raw HTML with inline styles

5. Linking to a Specific Story (Anchors)

  1. Edit the target page and switch to Source view (<>).
  2. Add an id to the story’s headline tag: <h4 id="short-name">Headline text</h4> (lowercase, hyphens, no spaces).
  3. Save, then link to it as /page-url#short-name.

Do not create anchors as empty <a id="..."></a> tags. The editor deletes empty tags on save. If a Read More link stops jumping to its story, this is why — re-add the id to the headline.

6. Images & Media Library

  • Preferred: landscape photos, at least 800px wide, JPG or PNG.
  • Images auto-convert to WebP on upload.
  • Always add alt text to every image.
  • Use style="max-width:100%" on images in content to prevent mobile bleed.
  • Insert Image button — uploads a new photo.
  • Media button — opens the Media Library to reuse existing photos.

7. Menus

Manage at Main Navigation Menu.

  • Add: click “Add link”, set Title, Link, and Parent link.
  • Edit: click Edit on the row.
  • Reorder: drag the handle, then Save.
  • Remove: dropdown → Delete (only removes from menu, not the page).
  • Hide: edit the link and uncheck “Enabled”.

Note on sidebar: The left sidebar is driven by the main menu. Pages must be in the main menu to show a sidebar. Pages 5+ levels deep show a “Back” link instead.

8. Archive Section

The Archive is at /archive. All subpages have been migrated with PDF links pointing to www.nymtc.org (the PDF files remain on production). Subpages include:

9. Utility Menu Pages

These pages are in the top-right header (Doing Business, Contact, Archive, Links and Resources, Glossary). In the sidebar they appear under About Us → Utility Menu.

Note: Organizations uses alias /utility-organizations (not /organizations) to avoid conflict with the Who We Are → Organization page.

10. Forms

  • View submissions: All Forms → pick a form → Results tab → Download for CSV.
  • Email recipient: open the form → Settings/Emails/Handlers → Edit the email handler.
  • SMTP not yet configured on staging — submissions are stored in Drupal only.

11. Search

  • Search is powered by Search API + Database Search.
  • Users search at /search-results?query=[term].
  • Mobile: tap the magnifier icon in the teal navbar.
  • If search returns "Access denied": go to Admin → People → Permissions → enable "view search api pages" for Anonymous and Authenticated.
  • Force re-index: Admin → Configuration → Search API → Index → Queue all items for reindexing.

12. USA 250 Background (temporary, added July 2026)

The navy background with faint stars on the left/right of every page is a temporary decoration for the U.S. 250th anniversary. It only appears on wide screens (over 1440px); laptops and phones see the normal white background. It is pure CSS — no images or content to manage.

To remove it (webmaster task, requires SSH — editors cannot do this from the browser):

  1. SSH to the server and run:
    sed -i '/===== USA 250/,$d' /var/www/nymtc.org/web/themes/custom/nymtc_bootstrap/css/style.css
  2. Rebuild caches:
    cd /var/www/nymtc.org && vendor/bin/drush cr
  3. Hard-refresh the site (Cmd+Shift+R) and confirm the background is plain white.

The CSS lives at the bottom of web/themes/custom/nymtc_bootstrap/css/style.css, fenced between /* ===== USA 250 and /* ===== end USA 250 block ===== */ comments. The sed command above deletes everything from the opening marker to the end of the file, which is safe because the block was appended last — if anything else has been added after it since, delete the block by hand in nano instead.

13. Page Hero Image & Intro (added July 2026)

Standard pages now have two fields above the body: Hero image (a wide banner photo, automatically cropped) and Intro (one or two plain-text sentences shown under the page title). Use these instead of pasting a big image or a styled lead paragraph into the body.

  1. Edit the page → Hero image → Add media → pick or upload a wide photo.
  2. Intro → type 1–2 sentences (no formatting needed — styling is automatic).
  3. If the page already had a lead image or intro paragraph in the body, delete it from the body so it doesn't appear twice.

Not every page needs a hero — pages without one simply show the title and content as before.

14. Editing the Homepage (Layout Builder — added July 2026)

The homepage is a Landing Page built with Layout Builder. To edit it: open the homepage → Layout tab. The page is a stack of sections (banner, News and Events, Upcoming Meetings, etc.). Save layout when done.

Banner slides

The rotating banner is fed by Banner Slide content — you do NOT edit the layout to change slides:

  1. Change a slide's picture/text/link: Content → filter type Banner Slide → edit the slide → swap the Image, Caption, or Link → Save.
  2. Add a slide: Content → Add content → Banner Slide (Title is an internal label only; visitors never see it).
  3. Remove a slide: unpublish or delete the Banner Slide node.

Slides rotate automatically every 5 seconds; visitors can pause by hovering and use the ❮ ❯ arrows. Give every image alternative text in the Media library.

News, Meetings, Funding and other card rows

These rows update automatically from the same cards you already manage (see the card sections earlier in this guide). Nothing on the homepage needs editing when you add a news item or event — the newest cards appear on their own.

The notice panels beside the banner

Welcome / Comment Period / Language Access / Contact are one block: in the Layout tab, click the pencil on Homepage Notices → edit the text (each panel is a small section in the editor) → Update → Save layout. Keep comment-period dates current.

Caution: avoid deleting or dragging sections unless you know the layout. Every save creates a revision — if something breaks, an administrator can restore a previous revision from the page's Revisions tab.

15. Images: sizes & where they're used (added July 2026)

The site automatically resizes, crops, and converts every image to a fast modern format (WebP/AVIF). You never need to resize images yourself — but uploads must be big enough, because the system only shrinks, never enlarges. A too-small upload will look blurry.

  • Banner slides (homepage): upload at least 1600 × 420, wide landscape photos. Shown cropped to a wide strip.
  • Page hero images: at least 1600 pixels wide, landscape.
  • Card images (news, events, funding cards): at least 480 × 320; they display as uniform 3:2 rectangles — keep the subject centered so cropping doesn't cut it off.
  • Images inside page text: around 1000 pixels wide is ideal.
  • Always add alternative text when uploading — describe the image for screen-reader users.
  • Always insert pictures with the editor's media button (Add media) — never paste raw image HTML from another site.

Admin reference — style routing: Banner Rotator view → banner (1600×420); card views → card (480×320); embedded media default display → content_large (scale 1000); page hero → hero (1600×420). All styles end with the Convert effect.

16. Embedding Videos (added July 2026)

Publish the video to NYMTC's YouTube channel first, then embed it on any page:

  1. Edit the page → click the Add media button in the editor.
  2. Choose Remote video on the left.
  3. Paste the YouTube link (the normal watch URL) → give it a clear name → Insert.

The video plays on our page; YouTube handles the streaming, quality levels, and captions. Do not paste iframe/embed code from YouTube's Share button — always use Add media.