PHPackages                             csabourin/meteocraft - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. csabourin/meteocraft

ActiveCraft-plugin[Templating & Views](/categories/templating)

csabourin/meteocraft
====================

Simple CraftCMS plugin for displaying Ottawa weather from Environment Canada with a front-end Twig template

v2.1.1(5mo ago)010MITTwigPHP >=8.0

Since Dec 2Pushed 5mo agoCompare

[ Source](https://github.com/csabourin/meteoCraft)[ Packagist](https://packagist.org/packages/csabourin/meteocraft)[ RSS](/packages/csabourin-meteocraft/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (25)Used By (0)

Ottawa Weather Display Component
================================

[](#ottawa-weather-display-component)

Simple, accessible weather display component for Ottawa, Ontario, using data from Environment and Climate Change Canada (ECCC). Built for Craft CMS 5 with PHP in Twig support.

Features
--------

[](#features)

- **Self-Contained**: Single Twig template with embedded PHP - no plugin required
- **Current Weather**: Real-time temperature, humidity, wind, pressure, and conditions
- **Today's Forecast**: Weather breakdown by time period (morning, afternoon, evening)
- **Bilingual**: Full English and French support with translations
- **Accessible**: WCAG 2.1 AA compliant with semantic HTML and ARIA labels
- **Customizable**: SCSS file with variables for easy theming
- **Cached**: 30-minute cache to optimize API calls
- **Official Data**: Environment and Climate Change Canada API

Requirements
------------

[](#requirements)

- Craft CMS 5.x
- PHP 8.0 or higher
- PHP in Twig (Twig Perversion) enabled
- cURL extension

Installation
------------

[](#installation)

### 1. Copy Files to Your Craft Project

[](#1-copy-files-to-your-craft-project)

Copy the files from this repository to your Craft installation:

```
# From this repository root, copy to your Craft project:
cp -r templates/_weather /path/to/your/craft/templates/
cp -r assets/scss /path/to/your/craft/assets/  # or wherever you keep SCSS
cp -r translations /path/to/your/craft/modules/yourmodule/  # or your module directory
```

### 2. Register Translations in Your Module

[](#2-register-translations-in-your-module)

Add the translation category to your module's `config/app.php`:

```
return [
    'modules' => [
        'yourmodule' => \modules\yourmodule\Module::class,
    ],
    'components' => [
        'i18n' => [
            'translations' => [
                'weather' => [
                    'class' => craft\i18n\PhpMessageSource::class,
                    'sourceLanguage' => 'en',
                    'basePath' => '@modules/yourmodule/translations',
                    'allowOverrides' => true,
                ],
            ],
        ],
    ],
];
```

Or if you prefer, add it directly in your module's `init()` method:

```
public function init()
{
    parent::init();

    Craft::$app->i18n->translations['weather'] = [
        'class' => PhpMessageSource::class,
        'sourceLanguage' => 'en',
        'basePath' => __DIR__ . '/translations',
        'allowOverrides' => true,
    ];
}
```

### 3. Import SCSS

[](#3-import-scss)

Add to your main stylesheet:

```
// In your main.scss
@import 'path/to/assets/scss/weather';
```

#### Customize Colors

[](#customize-colors)

Define variables **before** importing:

```
// Custom colors
$meteocraft-primary-color: #0066cc;
$meteocraft-background: #f8f9fa;
$meteocraft-border-color: #dee2e6;
$meteocraft-text-color: #212529;
$meteocraft-border-radius: 8px;

// Import styles
@import 'path/to/assets/scss/weather';
```

Usage
-----

[](#usage)

### Basic Usage

[](#basic-usage)

Include the template anywhere in your Twig files:

```
{% include '_weather/display' %}
```

### With Options

[](#with-options)

```
{% include '_weather/display' with {
    city: 'Ottawa',
    lang: 'fr'
} %}
```

### Example Integrations

[](#example-integrations)

#### In a Layout

[](#in-a-layout)

```
{# templates/_layout.twig #}

    {{ siteName }}

        {% include '_weather/display' %}

        {% block content %}{% endblock %}

```

#### In a Page Template

[](#in-a-page-template)

```
{# templates/index.twig #}
{% extends "_layout" %}

{% block content %}
    Welcome

        Current Weather in Ottawa
        {% include '_weather/display' %}

{% endblock %}
```

File Structure
--------------

[](#file-structure)

```
/your-craft-project/
├── templates/
│   └── _weather/
│       └── display.twig          # Main weather display template
├── assets/
│   └── scss/
│       └── _weather.scss          # Styles with variables
└── modules/
    └── yourmodule/
        └── translations/
            ├── en/
            │   └── weather.php    # English translations
            └── fr/
                └── weather.php    # French translations

```

Configuration
-------------

[](#configuration)

### Cache Duration

[](#cache-duration)

Edit the PHP block in `templates/_weather/display.twig`:

```
// Find this line (around line 145):
$cache->set($cacheKey, $weatherData, 1800);

// Change 1800 (30 minutes) to your desired duration in seconds:
$cache->set($cacheKey, $weatherData, 3600); // 1 hour
```

### Customizing Display

[](#customizing-display)

The template is fully editable. Modify `templates/_weather/display.twig` to:

- Change layout and styling
- Add or remove weather data points
- Adjust time periods (currently: morning 6am-12pm, afternoon 12pm-6pm, evening 6pm-12am)

### Translations

[](#translations)

Edit the translation files to customize any text:

- `translations/en/weather.php` - English
- `translations/fr/weather.php` - French

Data Source
-----------

[](#data-source)

- **API**: Environment and Climate Change Canada (ECCC)
- **Endpoint**: `https://api.weather.gc.ca/collections/citypageweather-realtime`
- **Documentation**: [ECCC Open Data](https://eccc-msc.github.io/open-data/msc-data/citypage-weather/readme_citypageweather_en/)
- **Location**: Ottawa (Kanata - Orléans)

Accessibility
-------------

[](#accessibility)

This component is **WCAG 2.1 Level AA compliant**:

- ✓ Proper semantic HTML5 elements
- ✓ ARIA labels and roles
- ✓ Keyboard accessible
- ✓ Screen reader friendly
- ✓ High contrast ratios (4.5:1+)
- ✓ Bilingual support

See [ACCESSIBILITY.md](ACCESSIBILITY.md) for details.

Troubleshooting
---------------

[](#troubleshooting)

### Template shows "Unable to load weather data"

[](#template-shows-unable-to-load-weather-data)

1. Verify server has internet connectivity
2. Check cURL is enabled: `php -m | grep curl`
3. Ensure PHP in Twig is enabled in your Craft config
4. Check logs: `storage/logs/web.log`
5. Clear cache: `./craft clear-caches/all`

### Translations not working

[](#translations-not-working)

1. Verify translations are registered in `config/app.php` or your module
2. Check file paths match your module structure
3. Clear cache: `./craft clear-caches/all`
4. Verify translation category is 'weather' (not 'meteocraft')

### Styling not applied

[](#styling-not-applied)

1. Verify SCSS file is imported in your main stylesheet
2. Check file path is correct
3. Rebuild your CSS: `npm run build` or your build command
4. Clear browser cache

License
-------

[](#license)

MIT License - see [LICENSE](LICENSE) file

Credits
-------

[](#credits)

- Weather data: [Environment and Climate Change Canada](https://weather.gc.ca/)
- Component by: csabourin

Support
-------

[](#support)

For issues or questions: [GitHub Repository](https://github.com/csabourin/meteoCraft)

---

Alternative: Using with Your Existing Controller
------------------------------------------------

[](#alternative-using-with-your-existing-controller)

If you prefer to use your existing controller's `actionFetchJson()` method instead of the embedded PHP, you can modify the template to make an AJAX call:

```
{# In templates/_weather/display.twig, replace the {% php %} block with: #}

    Loading weather data...

{# Add JavaScript to fetch and render #}

document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.meteocraft-weather-display');
    const url = container.dataset.url;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            // Parse and render weather data
            // ... your rendering logic
        });
});

```

However, note that your current controller only allows `services2.arcgis.com` in the allowlist, so you'd need to add `api.weather.gc.ca` to use it for weather data.

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance72

Regular maintenance activity

Popularity5

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 66.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

15

Last Release

159d ago

Major Versions

v1.1.13 → v2.02025-12-02

PHP version history (2 changes)v1.1.0PHP >=7.4

v2.0PHP >=8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/54c109c124670c5e142f118e5372242c067554eb332836b8d73b84b22644dec6?d=identicon)[csabourin](/maintainers/csabourin)

---

Top Contributors

[![csabourin](https://avatars.githubusercontent.com/u/16245338?v=4)](https://github.com/csabourin "csabourin (30 commits)")[![claude](https://avatars.githubusercontent.com/u/81847?v=4)](https://github.com/claude "claude (15 commits)")

---

Tags

twigbilingualaccessibilitycraftcmsweatherwcagottawaeccc

### Embed Badge

![Health badge](/badges/csabourin-meteocraft/health.svg)

```
[![Health](https://phpackages.com/badges/csabourin-meteocraft/health.svg)](https://phpackages.com/packages/csabourin-meteocraft)
```

###  Alternatives

[nystudio107/craft-twigpack

Twigpack is a bridge between Twig and webpack, with manifest.json & webpack-dev-server HMR support

97341.4k17](/packages/nystudio107-craft-twigpack)[nystudio107/craft-autocomplete

Provides Twig template IDE autocomplete of Craft CMS & plugin variables

44204.4k13](/packages/nystudio107-craft-autocomplete)[wbrowar/guide

A CMS Guide for Craft CMS.

6154.5k1](/packages/wbrowar-guide)[nystudio107/craft-emptycoalesce

Empty Coalesce adds the ??? operator to Twig that will return the first thing that is defined, not null, and not empty.

28143.7k3](/packages/nystudio107-craft-emptycoalesce)[jalendport/craft-preparse

A fieldtype that parses Twig when an element is saved and saves the result as plain text.

1086.4k](/packages/jalendport-craft-preparse)[nystudio107/craft-templatecomments

Adds a HTML comment with performance timings to demarcate `{% block %}`s and each Twig template that is included or extended.

20108.4k3](/packages/nystudio107-craft-templatecomments)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)