malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add customizer option to reposition story page cover

Browse Source
This commit is contained in:
Tetrakern 2024-04-12 21:24:03 +02:00
parent 341437ff33
commit a02088665f
10 changed files with 81 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
CUSTOMIZE.md
View File

@ -283,80 +283,3 @@ function child_remove_scheduled_chapter() {
}
add_action( 'wp', 'child_remove_scheduled_chapter', 11 ); // The action is added late, so you need to be even later
```
## Floating story page cover on the right
If you would rather have the story page cover image floating on the right, as demonstrated in the screenshot. Note that this solution disables the option to hide cover images on story pages. You can only choose to have none.
**References**
* Action: [fictioneer_story_after_header](ACTIONS.md#do_action-fictioneer_story_after_header-args-)
* Filter: [get_post_metadata](https://developer.wordpress.org/reference/hooks/get_meta_type_metadata/)
![Floating Cover Image Example](repo/assets/example_floating_cover_image.jpg?raw=true)
```php
/**
* Adds cover image above the content row
*
* @since x.x.x
*
* @param array $hook_args Contains story ID and data.
*/
function child_add_floating_story_cover( $hook_args ) {
if ( has_post_thumbnail( $hook_args['story_id'] ) ) {
echo fictioneer_get_story_page_cover( $hook_args['story_data'] );
}
}
add_action( 'fictioneer_story_after_header', 'child_add_floating_story_cover', 9 );
/**
* Disables the default cover image in the article header
*
* Note: Alternatively, you could hide the cover image on the story. But
* you would need to do this for every story.
*
* @since x.x.x
* @link https://developer.wordpress.org/reference/hooks/get_meta_type_metadata/
*
* @param mixed $value The value to return, either a single metadata value or
* an array of values depending on the value of $single.
* Default null.
* @param int $object_id ID of the object metadata is for.
* @param string $meta_key Metadata key.
*
* @return mixed The updated meta value.
*/
function child_disable_story_page_cover( $value, $object_id, $meta_key ) {
// Disable 'fictioneer_story_no_thumbnail' meta field
if ( $meta_key === 'fictioneer_story_no_thumbnail' ) {
return true;
}
// Continue filter
return $value;
}
add_filter( 'get_post_metadata', 'child_disable_story_page_cover', 10, 3 );
```
Add this to your CSS file or in **Appearance > Customize > Additional CSS**. Adjust as needed.
```css
.story__tags-and-warnings,
.story__after-summary {
clear: both;
}
.story__thumbnail {
float: right;
margin: 0 var(--layout-spacing-horizontal-small) 1rem 1rem;
max-width: min(100%, 25vw);
}
@media only screen and (min-width: 400px) {
.story__thumbnail {
margin: 0 var(--layout-spacing-horizontal) 1rem 1rem;
}
}
```

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/recommendation.css
View File

@ -1 +1 @@
.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{--focus-offset: 2px;float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,6.4957264957vw - 14.358974359px,48px) clamp(24px,4.1025641026vw + 8.6153846154px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;box-shadow:var(--recommendation-cover-box-shadow, var(--box-shadow-xl))}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}
.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{--focus-offset: 2px;float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,9.6692111959vw - 26.2595419847px,48px) clamp(24px,6.106870229vw + 1.0992366412px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;box-shadow:var(--recommendation-cover-box-shadow, var(--box-shadow-xl))}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}

2
css/story.css
View File

File diff suppressed because one or more lines are too long

9
includes/functions/_content_helpers.php
View File

@ -578,13 +578,18 @@ if ( ! function_exists( 'fictioneer_get_story_page_cover' ) ) {
* @since 5.9.4 - Removed output buffer.
*
* @param array $story Collection of story data.
* @param array $args Optional. Additional arguments.
*
* @return string HTML for the thumbnail.
*/
function fictioneer_get_story_page_cover( $story ) {
function fictioneer_get_story_page_cover( $story, $args = [] ) {
// Setup
$classes = $args['classes'] ?? '';
// Build and return
return sprintf(
'<figure class="story__thumbnail"><a href="%s" %s>%s<div id="ribbon-read" class="story__thumbnail-ribbon hidden"><div class="ribbon">%s</div></div></a></figure>',
'<figure class="story__thumbnail ' . $classes . '"><a href="%s" %s>%s<div id="ribbon-read" class="story__thumbnail-ribbon hidden"><div class="ribbon">%s</div></div></a></figure>',
get_the_post_thumbnail_url( $story['id'], 'full' ),
fictioneer_get_lightbox_attribute(),
get_the_post_thumbnail( $story['id'], array( 200, 300 ), array(

30
includes/functions/_customizer-settings.php
View File

@ -1867,6 +1867,36 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
)
);
// Story cover position
$manager->add_setting(
'story_cover_position',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'sanitize_text_field',
'default' => 'top-left-overflow'
)
);
$story_cover_positions = array(
'top-left-overflow' => _x( 'Top-Left Overflow (Default)', 'Customizer story cover position option.', 'fictioneer' ),
'float-left' => _x( 'Floating Left', 'Customizer story cover position option.', 'fictioneer' ),
'float-right' => _x( 'Floating Right', 'Customizer story cover position option.', 'fictioneer' ),
'hide' => _x( 'Hide', 'Customizer story cover position option.', 'fictioneer' )
);
$manager->add_control(
'story_cover_position',
array(
'type' => 'select',
'priority' => 10,
'section' => 'layout',
'label' => __( 'Story Page Cover Position', 'fictioneer' ),
'description' => __( 'Choose where to display the cover.', 'fictioneer' ),
'choices' =>
apply_filters( 'fictioneer_filter_customizer_story_cover_position', $story_cover_positions )
)
);
// Custom layout toggle
$manager->add_setting(
'use_custom_layout',

4
partials/_story-header.php
View File

@ -23,7 +23,9 @@ defined( 'ABSPATH' ) OR exit;
// Setup
$story = $args['story_data'];
$story_id = $args['story_id'];
$thumbnail_shown = has_post_thumbnail() && ! get_post_meta( $story_id, 'fictioneer_story_no_thumbnail', true );
$thumbnail_shown = has_post_thumbnail() &&
! get_post_meta( $story_id, 'fictioneer_story_no_thumbnail', true ) &&
get_theme_mod( 'story_cover_position', 'top-left-overflow' ) === 'top-left-overflow';
$tax_shown = ! get_option( 'fictioneer_hide_taxonomies_on_pages' ) &&
$story['has_taxonomies'] &&
! get_post_meta( $story_id, 'fictioneer_story_no_tags', true );

14
single-fcn_story.php
View File

@ -43,6 +43,7 @@ get_header( null, $header_args );
$epub_name = sanitize_file_name( strtolower( get_the_title() ) );
$this_breadcrumb = [ $story['title'], get_the_permalink() ];
$password_note = fictioneer_get_content_field( 'fictioneer_story_password_note', $post->ID );
$cover_position = get_theme_mod( 'story_cover_position', 'top-left-overflow' );
// Flags
$can_checkmarks = get_option( 'fictioneer_enable_checkmarks' );
@ -54,7 +55,7 @@ get_header( null, $header_args );
);
?>
<article id="post-<?php the_ID(); ?>" class="story__article <?php if ( ! $can_checkmarks ) echo '_no-checkmarks'; ?>" data-id="<?php the_ID(); ?>" data-age-rating="<?php echo strtolower( $story['rating'] ); ?>">
<article id="post-<?php echo $story_id; ?>" class="story__article <?php if ( ! $can_checkmarks ) echo '_no-checkmarks'; ?>" data-id="<?php echo $story_id; ?>" data-age-rating="<?php echo strtolower( $story['rating'] ); ?>">
<?php
// Render article header
@ -75,6 +76,17 @@ get_header( null, $header_args );
}
}
if (
! in_array( $cover_position, ['top-left-overflow', 'hide'] ) &&
has_post_thumbnail( $story_id ) &&
! get_post_meta( $story_id, 'fictioneer_story_no_thumbnail', true )
) {
echo fictioneer_get_story_page_cover(
$hook_args['story_data'],
array( 'classes' => '_in-content _' . $cover_position )
);
}
the_content();
?></section>

2
src/scss/_recommendation.scss
View File

@ -11,7 +11,7 @@
--focus-offset: 2px;
float: right;
max-width: get_clamp(100, 200, 375, 768);
margin: 0 0 get_clamp(10, 48, 375, $full-width) get_clamp(24, 48, 375, $full-width);
margin: 0 0 get_clamp(10, 48, 375, 768) get_clamp(24, 48, 375, 768);
:is(a, img) {
display: block;

28
src/scss/_story.scss
View File

@ -142,12 +142,29 @@ body:not(.logged-in) .story__actions :first-child:nth-last-child(3) {
&__thumbnail {
--focus-offset: 2px;
grid-area: 1 / 1 / 4 / 2;
position: relative;
height: var(--this-img-height);
@include bp($header_breakpoint) {
&:not(._in-content) {
grid-area: 1 / 1 / 4 / 2;
position: relative;
height: var(--this-img-height);
@include bp($header_breakpoint) {
grid-area: 1 / 1 / 4 / 2;
}
}
&._in-content {
max-width: get_clamp(100, 200, 375, 768);
}
&._float-right {
float: right;
margin: 0 0 get_clamp(10, 48, 375, 768) get_clamp(24, 48, 375, 768);
}
&._float-left {
float: left;
margin: 0 get_clamp(24, 48, 375, 768) get_clamp(10, 48, 375, 768) 0;
}
&-ribbon {
@ -210,10 +227,12 @@ body:not(.logged-in) .story__actions :first-child:nth-last-child(3) {
}
&__tags-and-warnings {
clear: both;
margin-top: 2rem;
}
&__after-summary {
clear: both;
display: flex;
gap: 0 24px;
align-items: center;
@ -247,6 +266,7 @@ body:not(.logged-in) .story__actions :first-child:nth-last-child(3) {
}
&__tabs {
clear: both;
margin: 3rem 0 1.5rem;
&:not([data-current="chapters"]) .story__toggle {