Skip to content

TMS-1173: Add hero-layout for blog-article archive & blog-category taxonomy archive #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eebbi merged 5 commits into from
Aug 13, 2025
Merged

TMS-1173: Add hero-layout for blog-article archive & blog-category taxonomy archive #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
748540e
TMS-1173: Add description for blog-article taxonomy archive
eebbi Jun 26, 2025
6e69827
TMS-1173: Add hero-layouts for blog-article archives
eebbi Jun 27, 2025
369f8a5
TMS-1173: Return type fix
eebbi Aug 12, 2025
032f2b6
TMS-1173: CR fix
eebbi Aug 13, 2025
d024f41
Merge branch 'master' into TMS-1173
eebbi Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.MD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

- TMS-1173:
- Add hero-image field for blog-category taxonomy
- Add hero-layout for blog-article archive & blog-category taxonomy archive

## [1.9.7] - 2025-08-11

- TMS-1174: Change icon colors to improve accessibility
Expand Down
86 changes: 86 additions & 0 deletions lib/ACF/BlogCategoryGroup.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<?php
namespace TMS\Theme\Tredu\ACF;

use Geniem\ACF\Exception;
use Geniem\ACF\Group;
use Geniem\ACF\RuleGroup;
use Geniem\ACF\Field;
use TMS\Theme\Tredu\Logger;

/**
* Class BlogCategoryGroup
*
* @package TMS\Theme\Tredu\ACF
*/
class BlogCategoryGroup {

/**
* BlogCategoryGroup constructor.
*/
public function __construct() {
\add_action(
'init',
\Closure::fromCallable( [ $this, 'register_fields' ] )
);
}

/**
* Register fields for blog-category taxonomy.
*/
protected function register_fields() : void {
try {
$field_group = ( new Group( 'Blogikategoria' ) )
->set_key( 'fg_blog_category_fields' );

$rule_group = ( new RuleGroup() )
->add_rule( 'taxonomy', '==', 'blog-category' );

$field_group
->add_rule_group( $rule_group )
->set_position( 'normal' );

$field_group->add_fields(
\apply_filters(
'tms/acf/group/' . $field_group->get_key() . '/fields',
[
$this->get_image_field( $field_group->get_key() ),
]
)
);

$field_group = \apply_filters(
'tms/acf/group/' . $field_group->get_key(),
$field_group
);

$field_group->register();
}
catch ( Exception $e ) {
( new Logger() )->error( $e->getMessage(), $e->getTraceAsString() );
}
}

/**
* Get image field.
*
* @param string $key Field group key.
*
* @return Field\Image
* @throws Exception In case of invalid option.
*/
protected function get_image_field( string $key ) : Field\Image {
$strings = [
'image' => [
'title' => \_x( 'Kuva', 'theme ACF', 'tms-theme-tredu' ),
'instructions' => 'Kuvaa käytetään kategorian listaus-sivulla hero-kuvana',
],
];

return ( new Field\Image( $strings['image']['title'] ) )
->set_key( "{$key}_image" )
->set_name( 'image' )
->set_instructions( $strings['image']['instructions'] );
}
}

( new BlogCategoryGroup() );
37 changes: 31 additions & 6 deletions models/archive.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class Archive extends Home {
/**
* Hooks
*/
public static function hooks() : void {
public static function hooks(): void {
add_action(
'pre_get_posts',
[ __CLASS__, 'modify_query' ]
Expand All @@ -27,7 +27,7 @@ public static function hooks() : void {
*
* @return int|null
*/
protected static function get_filter_category() : ?int {
protected static function get_filter_category(): ?int {
return is_tax() || is_category()
? get_queried_object_id()
: null;
Expand All @@ -40,7 +40,7 @@ protected static function get_filter_category() : ?int {
*
* @return void
*/
public static function modify_query( WP_Query $wp_query ) : void {
public static function modify_query( WP_Query $wp_query ): void {
if ( is_admin() || ( ! $wp_query->is_main_query() || ! $wp_query->is_archive() ) ) {
return;
}
Expand All @@ -57,8 +57,33 @@ public static function modify_query( WP_Query $wp_query ) : void {
*
* @return string|null
*/
public function page_title() : ?string {
return single_term_title( '', false );
public function page_title(): ?string {
return \single_term_title( '', false );
}

/**
* Get the page description.
*
* @return string|null
*/
public function page_description(): ?string {
return \term_description( \get_queried_object() );
}

/**
* Get the blog-category image.
*
* @return int|null
*/
public function blog_category_image(): ?int {
$queried_object = \get_queried_object();
$image_field = \get_field( 'image', $queried_object );

if ( ! $image_field ) {
return null;
}

return $image_field['ID'];
}

/**
Expand All @@ -75,7 +100,7 @@ public function highlight() : ?object {
*
* @return array
*/
protected function get_filter_categories() : array {
protected function get_filter_categories(): array {
$queried_object = get_queried_object();
$taxonomy = '';

Expand Down
60 changes: 40 additions & 20 deletions partials/archive-blog-article.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,56 @@
{<content}
<main class="main-content pb-8" id="main-content">
{#ArchiveBlogArticle}
{?page_logo}
<section class="page__hero section has-text-centered is-relative pt-0 pb-0 has-background-cover" {@inlinebg id=page_logo size="fullhd" /}>
<div class="overlay overlay--dark-50"></div>
<div class="is-absolute has-top-50 has-right-0 has-left-0 has-transform-y--50 is-clipped">
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2">
{?page_title}
<h1 class="mt-0 mb-8 has-text-white">
{page_title|html}
</h1>
{/page_title}

{?page_subtitle}
<p class="mb-0 has-text-white">
{page_subtitle|html}
</p>
{/page_subtitle}
</div>
</div>
</div>
</div>
</section>
{/page_logo}
<section class="section">
<div class="container">
<div class="columns">
{?page_logo}
<div class="column is-2 has-text-centered-mobile">
{@image id=page_logo size="thumbnail" /}
</div>
{/page_logo}

<div class="column is-8 has-text-centered {^page_logo}is-offset-2{/page_logo}">
{?page_title}
<h1 class="mt-0 mb-8">
{page_title|s}
</h1>
{/page_title}
<div class="column is-8 is-offset-2 has-text-centered">
{^page_logo}
{?page_title}
<h1 class="mt-0 mb-8">
{page_title|html}
</h1>
{/page_title}

{?page_subtitle}
<p class="mb-6">
{page_subtitle|s}
</p>
{/page_subtitle}
{?page_subtitle}
<p class="mb-6">
{page_subtitle|html}
</p>
{/page_subtitle}
{/page_logo}

{?page_description}
<div class="container">
<div class="columns">
<div class="column is-10 is-offset-1">
<div class="column">
{>"ui/button-toggle" class="mb-5" text=Strings.s.blog_article.toggle_details target="js-archive-description-toggle-target" /}

<p id="js-archive-description-toggle-target"
class="is-hidden has-text-left">{page_description|s}</p>
class="is-hidden has-text-left">{page_description|html}</p>
</div>
</div>
</div>
Expand All @@ -52,7 +72,7 @@
{:else}
<div class="column">
<div class="pt-6 pb-6 h4 has-text-centered">
{Strings.s.home.no_results|s}
{Strings.s.home.no_results|html}
</div>
</div>
{/articles}
Expand Down
45 changes: 38 additions & 7 deletions partials/archive-inner.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,43 @@
{?blog_category_image}
<section class="page__hero section has-text-centered is-relative pt-0 pb-0 has-background-cover" {@inlinebg id=blog_category_image size="fullhd" /}>
<div class="overlay overlay--dark-50"></div>
<div class="is-absolute has-top-50 has-right-0 has-left-0 has-transform-y--50 is-clipped">
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2">
{?page_title}
<h1 class="mt-0 mb-8 has-text-white">
{page_title|html}
</h1>
{/page_title}

{?page_description}
<div class="mb-0 has-text-white">
{page_description|kses}
</div>
{/page_description}
</div>
</div>
</div>
</div>
</section>
{/blog_category_image}

<section class="section">
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="mt-0 mb-8">
{page_title|s}
</h1>
{^blog_category_image}
<div class="columns">
<div class="column has-text-centered">
<h1 class="mt-0 mb-8">
{page_title|html}
</h1>

{?page_description}
{page_description|kses}
{/page_description}
</div>
</div>
</div>
{/blog_category_image}

{>"views/home/home-highlight" category_link_classes="is-primary-invert is-borderless" /}

Expand All @@ -20,7 +51,7 @@
{:else}
<div class="column">
<div class="pt-6 pb-6 h4 has-text-centered">
{Strings.s.home.no_results|s}
{Strings.s.home.no_results|html}
</div>
</div>
{/articles}
Expand Down
Loading