ヒーロー画像ブロックのボタン設置について

こんにちは。
ヒーロー画像ブックにはボタンを設置できますが、スタイルを設定してもテキストのみ表示され、ボタンとして表示されません。
他に設定が必要なのでしょうか。
テーマは、標準のもの2つと有料もの一つの計3つ、どれでも同じでした。

よろしくお願いします。

Concrete Version

Core Version - 9.0.2
Version Installed - 9.0.2
Database Version - 20220114215506

Database Information

Version: 10.5.13-MariaDB-log
SQL Mode:

Concrete Packages

Manual Nav (3.0.0), Replica Pro Theme (2.2.0)

Concrete Overrides

None

Concrete Cache Settings

Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

Server Software

Apache

Server API

cgi-fcgi

PHP Version

7.4.25

PHP Extensions

apcu, bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imagick, imap, intl, json, ldap, libxml, mbstring, mcrypt, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

PHP Settings

max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 200M
post_max_size - 30M
upload_max_filesize - 30M
ldap.max_links - Unlimited
mbstring.regex_retry_limit - 1000000
mbstring.regex_stack_limit - 100000
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - no value
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
unserialize_max_depth - 4096
opcache.max_accelerated_files - 10000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

@present

つまり、Atomik のサンプルコンテンツを一緒に入れた時に「Learn More」のように、青色のボタンが表示されている様にしたいということでしょうか?

今のブロックの状態の設定画面や、どうテキストが表示されていないか、わかりますか?

すいません、今、理解できました。
どういうスタイルなのか具体的におしえてもらえますか?

返信ありがとうございます。

スタイルの設定はブロックで設定する項目のみで(添付画像にある項目のみ)、ほかには設定していません。
大きさ、スタイル、色、どれを変更してもボタンテキストに入力した内容のみ表示されます。

よろしくお願いします。

@present ありがとうございます。

うーん。僕は Atomik テーマで試しましたが、問題なくボタンが表示されました。

どのテーマを使っていますか?
あと、もしも見せていただけるのであれば、その具体的な症状を画像で見せていただけませんか?

一番いいのは、Google Chrome の検証ツールでどのような CSS が当たっているかを調べて検証するのがいいのですが・・・。

お忙しいところありがとうございます。

デベロッパーツールで確認したところ、cssがmt-4以外当たってないのでview.phpを確認したところ、私がインストールした物には、<?= $button ?>と記述はあるものの、ボタンを表示するような記述が見当たりませんでした。

<?php

defined('C5_EXECUTE') or die('Access Denied.');

/**
 * @var Concrete\Core\Block\View\BlockView $this
 * @var Concrete\Core\Block\View\BlockView $view
 * @var Concrete\Core\Area\Area $a
 * @var Concrete\Core\Block\Block $b
 * @var Concrete\Core\Entity\Block\BlockType\BlockType $bt
 * @var Concrete\Block\HeroImage\Controller $controller
 * @var Concrete\Core\Form\Service\Form $form
 * @var int $bID
 *
 * @var string|null $title
 * @var string|null $body
 * @var string|null $buttonText
 * @var string|null $buttonExternalLink
 * @var int|null $buttonInternalLinkCID
 * @var int|null $buttonFileLinkID
 * @var string|null $height
 * @var string|null $buttonStyle
 * @var string|null $buttonColor
 * @var string|null $buttonSize
 *
 * @var Concrete\Core\Entity\File\File|null $image
 * @var HtmlObject\Link|null $button
 */

if ($image === null) {
    return;
}
?>
<div data-transparency="element" class="ccm-block-hero-image" <?php if ($height) { ?>style="min-height: <?=$height?>vh"<?php } ?>>
    <div class="ccm-block-hero-image-cover" <?php if ($height) { ?>style="min-height: <?=$height?>vh"<?php } ?>></div>
    <div style="background-image: url(<?= h("\"{$image->getURL()}\"") ?>); <?php if ($height) { ?>min-height: <?=$height?>vh<?php } ?>" class="ccm-block-hero-image-image"></div>
    <div class="ccm-block-hero-image-text" <?php if ($height) { ?>style="min-height: <?=$height?>vh"<?php } ?>>
        <?php
        if ((string) $title !== '' ) {
            ?>
            <h1><?= $title ?></h1>
            <?php
         }
         if ((string) $body !== '') {
            echo $body;
         }
         if ($button !== null) {
             ?>
             <div class="mt-4"><?= $button ?></div>
             <?php
         }
         ?>
    </div>
</div>

ですが、githubにあるview.phpを見ると、

/**
 * Building the button
 */

以降にきちんとした記述があるようです。

この違いはなぜ起きたのでしょうか?
また、このファイルを置き換えればなおるのでしょうか?

@present GitHub にあるコードは現在開発中の 9.1.0 最新版に搭載されるコードで
9.0.2 時点のコードはこちらです

なので、乗せてもらっているコードで問題ないです。
僕の試している 9.0.2 でも同じでした。

僕の場合はこのような表示です。

どこが違いそうですか?

いまさらなんですが、もしかして「ヒーローブロック」はAtomikでしか使えないんですか?

エレメンタル ReplicaPro では表示されなかったのですが、Atomikを再度試したところ問題なく表示されました。

前回試したときは、Atomikでも表示されなかったんですが、なにか設定が間違っていたのかもしれません、申し訳ありません。

下の画像はReplicaProで表示したものです。
エレメンタルも同じで、どちらも class がきちんと読み込まれていませんでした。

202204_02

@present

いまさらなんですが、もしかして「ヒーローブロック」はAtomikでしか使えないんですか?

あー、そうですね。
ReplicaPro、Elemental は CSS を対応させる必要があると思います。

そうなんですね。
お騒がせして申し訳ございませんでした。

今回のヒーローブロックですと、ボタンの大きさ、色などの設定はブロック内でできるが、それぞれの設定を生かすには、テーマでCSSをあてる必要があって、Atomik以外のテーマを使うのであれば、それぞれテーマで設定しなければ装飾されないということなんですね。

今までの私の認識ですと、コアのブロックには標準的なCSSが設定してあって、テーマで特に設定しなければそれがあたるものだと思っていました。

今回のkatz515さんに上げていただいた画像の場合でいえば、ボタンの装飾はブートストラップの class である【btn btn-primary btn-lg】があたっていると思います。
私は、このclassの呼び出しは、ブロック内で設定できるので、私があると思っていた「ブロックの標準的なCSS」に含まれていて、テーマを変えてもブートストラップをつかった表示はできるものと思っていました。
ですが、これはAtomikのテーマで設定しているということなんですね。
そうなると、ブロック内でボタンの装飾を設定する意味はなに?とも思いました。

もしかして私の認識がまちがっていて、V8の頃のエレメンタル、V9のアトミック、これらはコアの一部なんですか?
確かにconcreteフォルダの中にあるし…

言い方が変ですね。

V8であればエレメンタル、V9であればアトミックが私が勝手に思っている「ブロックの標準的なCSS」を持っている…

う~ん、なんて伝えればいいかわからなくなってきました…

さらには、これはかなり初歩的なことなのか?と思い、書き込んでいるのが恥ずかしくなってきました…

@present いえいえ。大丈夫ですよ!

恥ずかしがらずにどんどん発言してください。

今回のヒーローブロックですと、ボタンの大きさ、色などの設定はブロック内でできるが、それぞれの設定を生かすには、テーマでCSSをあてる必要があって、Atomik以外のテーマを使うのであれば、それぞれテーマで設定しなければ装飾されないということなんですね。

はい。だいたいそうですが、Atomik は Bootstrap 5 ベースなので、Bootstrap のテーマであればだいたい同じ様な装飾はでます。

ただ、若干のテーマの修正は必要だと思います。

今までの私の認識ですと、コアのブロックには標準的なCSSが設定してあって、テーマで特に設定しなければそれがあたるものだと思っていました。

あっていますが、
微妙なところですね・・・。

今回のkatz515さんに上げていただいた画像の場合でいえば、ボタンの装飾はブートストラップの class である【btn btn-primary btn-lg】があたっていると思います。
私は、このclassの呼び出しは、ブロック内で設定できるので、私があると思っていた「ブロックの標準的なCSS」に含まれていて、テーマを変えてもブートストラップをつかった表示はできるものと思っていました。

例えば、Bootstrap 3 ベースの Elemental で
ヒーローズ画像ブロックをいれてみました。

ちょっと画像の色が濃いので分かりづらいと思いますが、
きちんとボタンが表示されています。

ただ Elemental でも独自のカスタマイズ・・・、ボタンに丸みを帯びて表示するカスタマイズが加えられているので、ヒーローズ画像ブロックのボタンも雰囲気 (?) にあわせて丸くなっています。

なので、僕はヒーローズ画像ブロックのボタンは Elemental でも問題なく使えると言う認識です。

あと、Replica Pro ですが、バージョンはいくつでしょうか?

https://marketplace.concretecms.com/marketplace/themes/replica-pro/changelog/

2.3.0 が 4/26 にリリースされていますので、アップグレードすると表示が改善しているかもしれません。

V9 はリリースされて4ヶ月ほどしか経っていないので、テーマ開発者もいろいろ試行錯誤していると思います。

よろしくお願いします。