RP#36の手順は、http:/ {Ipaddress}/gravにgravを構築していたのですが、ヒーローイメージを表示しようとしても、画像の場所が/user/page/01.home/IMAGE.jpgになってしまい。アクセスできない事象が出ていました。
これは、nginxのrewrite設定がうまく行ってないためと散々AIとやりとりしたのですが、解決できませんでした。仕方ないのでサブディレクトリ(/grav)を断念し、/にアクセスすることでgravにアクセスできるようnginx、gravを削除して再インストールしました。(基本的な手順は同じなので割愛します)
次に、ヒーローイメージを出力させるたに、
/var/www/html/user/themes/quark/templates/default.html.twig を編集
{% extends 'partials/base.html.twig' %}
{% block content %}
{% set hero_filename = page.header.hero_image %}
{% set hero_image = page.media[hero_filename] %}
{% set title_text = page.header.title_text %}
{% if hero_image and hero_image.isImage %}
<div class="hero-background-container" style="background-image: url('{{ hero_image.url(true) }}');">
<div class="hero-text-overlay">
{{ title_text }}
{# <h1>{{ page.title }}</h1> #}
{# ... (その他のコードは省略) ... #}
</div>
</div>
{% endif %}
<div class="content-wrapper">
{{ page.content|raw }}
</div>
{% endblock %}
/var/www/html/user/themes/quark/css/custom.css を作成
.hero-background-container {
/* 画像が表示されるために、高さ（height）を必ず指定します */
height: 400px;
/* 背景画像に関する基本的な設定 */
background-size: cover; /* 画像を要素全体に引き伸ばす */
background-position: center center; /* 画像を中央に配置 */
background-repeat: no-repeat; /* 画像を繰り返さない */
/* テキストを画像の上に配置するために必要 */
position: relative;
}
/* ヒーロー画像の上に重ねるテキストコンテナの設定 */
.hero-text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* テキストの色 */
text-align: center;
}
管理画面からhomeページを指定し、画像ファイルをアップロード
expertモードでhero_image: にアップロードしたファイル名を指定
title_text: に画像に重ねる文字を指定
これで、ヒーローイメージ が出せると思ったのですが、やっぱり画像のURLが書きかわらずでした。
そこで、別のAIに聞いたところ、下記でできるとの回答を得ることができ、設定してみるとヒーローイメージ を表示させることに成功しました。
/etc/nginx/site-avalable/defaultを以下に書き換え。
##
# Grav CMS 用 Nginx 設定（Raspberry Pi / PHP-FPM 8.2 対応）
# 2025-10-31 修正版
##
server {
listen 80 default_server;
listen [::]:80 default_server;
# IPまたはホスト名を指定
server_name 192.168.11.109;
# Grav を設置したディレクトリ
root /var/www/html;
index index.html index.htm index.php;
# ------------------------------------------
# メイン処理： Grav のクリーンURL対応
# ------------------------------------------
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
# ------------------------------------------
# PHP ファイルの処理設定（php-fpm使用）
# ------------------------------------------
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
# ------------------------------------------
# Grav セキュリティ設定
# ------------------------------------------
# 一般的にユーザー情報やキャッシュは非公開
location ~ /(cache|logs|tmp|backup|user/accounts)/ {
deny all;
}
# ------------------------------------------
# hero画像を含む /user/pages 内の画像だけ許可
# （png, jpg, jpeg, gif, webp, svg のみ）
# ------------------------------------------
location ~* ^/user/pages/.+\.(jpg|jpeg|png|gif|webp|svg)$ {
allow all;
}
# ------------------------------------------
# 隠しファイル (.htaccess, .git など) は禁止
# ------------------------------------------
location ~ /\.(ht|svn|git) {
deny all;
}
# ------------------------------------------
# セキュリティヘッダー（任意強化）
# ------------------------------------------
add_header X-Content-Type-Options "nosniff";
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
}
出来上がりはこんな感じ
別のAI曰く、テーマで設定する方法がオススメと言われたのですが、CLIでテーマの設定を変更するのは画像を変更したい時に大変なので、GUIでできるこちらを選択しました。