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

Add article cards shortcode

Browse Source
This commit is contained in:
Tetrakern 2023-09-15 22:19:25 +02:00
parent 633255ba10
commit 892ce7c0f1
9 changed files with 410 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
DOCUMENTATION.md
View File

@ -382,7 +382,15 @@ The custom HTML block is the best way to add special elements to the content, su
[Shortcodes](https://wordpress.org/support/article/shortcode-block/) are bracket-enclosed keywords placed within the content that WordPress automatically interprets into code, adding features or objects without the need for programming. This should be done inside a _shortcode_ block. Since most elements created by shortcodes have no margins, the _spacer_ block can be a good addition before and/or after.
**Attention!** Shortcode queries are cached as [Transients](https://developer.wordpress.org/apis/transients/) to reduce their performance impact, especially if you have more than one per page. By default, the Transients expire after 300 seconds (5 minutes), which can be changed via the `FICTIONEER_SHORTCODE_TRANSIENT_EXPIRATION` constant in a child theme. You can disable the Transients by setting the constant to `-1` if you are using persistent object caching (Redis, Memcached, etc.), although that is not necessary.
**Attention!** Shortcode queries are cached as [Transients](https://developer.wordpress.org/apis/transients/) to reduce their performance impact, especially if you have more than one per page. By default, the Transients expire after 300 seconds (5 minutes), which can be changed via the `FICTIONEER_SHORTCODE_TRANSIENT_EXPIRATION` constant in a child theme. You can disable the Transients by setting the constant to `-1`.
### Article Cards
Renders paginated cards...
### Blog

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

110
includes/functions/_shortcodes.php
View File

@ -1376,9 +1376,7 @@ function fictioneer_shortcode_blog( $attr ) {
$classes = '';
// Page
$page = get_query_var( 'page' );
$page = empty( $page ) ? get_query_var( 'paged' ) : $page;
$page = empty( $page ) ? 1 : $page;
$page = get_query_var( 'page' ) ?? get_query_var( 'paged' ) ?? 1;
// Arguments
$query_args = array(
@ -1505,4 +1503,110 @@ function fictioneer_shortcode_blog( $attr ) {
}
add_shortcode( 'fictioneer_blog', 'fictioneer_shortcode_blog' );
// =============================================================================
// ARTICLE CARDS SHORTCODE
// =============================================================================
/**
* Shortcode to show article cards with pagination
*
* @since 5.7.3
*
* @param string|null $attr['post_type'] Optional. The post types to query. Default 'post'.
* @param string|null $attr['per_page'] Optional. Number of posts per page.
* @param string|null $attr['count'] Optional. Maximum number of posts. Default -1.
* @param string|null $attr['order'] Optional. Order argument. Default 'DESC'.
* @param string|null $attr['orderby'] Optional. Orderby argument. Default 'date'.
* @param string|null $attr['ignore_sticky'] Optional. Whether to ignore sticky posts. Default false.
* @param string|null $attr['ignore_protected'] Optional. Whether to ignore protected posts. Default false.
* @param string|null $attr['author'] Optional. Limit posts to a specific author.
* @param string|null $attr['author_ids'] Optional. Only include posts by these author IDs.
* @param string|null $attr['exclude_author_ids'] Optional. Exclude posts with these author IDs.
* @param string|null $attr['exclude_tag_ids'] Optional. Exclude posts with these tags.
* @param string|null $attr['exclude_cat_ids'] Optional. Exclude posts with these categories.
* @param string|null $attr['categories'] Optional. Limit posts to specific category names.
* @param string|null $attr['tags'] Optional. Limit posts to specific tag names.
* @param string|null $attr['fandoms'] Optional. Limit posts to specific fandom names.
* @param string|null $attr['genres'] Optional. Limit posts to specific genre names.
* @param string|null $attr['characters'] Optional. Limit posts to specific character names.
* @param string|null $attr['rel'] Optional. Relationship between taxonomies. Default 'AND'.
* @param string|null $attr['class'] Optional. Additional CSS classes, separated by whitespace.
*
* @return string The rendered shortcode HTML.
*/
function fictioneer_shortcode_article_cards( $attr ) {
// Setup
$post_type = sanitize_key( $attr['post_type'] ?? 'post' );
$count = intval( $attr['count'] ?? -1 );
$allowed_post_types = array(
'post' => 'post',
'posts' => 'post',
'page' => 'page',
'pages' => 'page',
'story' => 'fcn_story',
'stories' => 'fcn_story',
'chapter' => 'fcn_chapter',
'chapters' => 'fcn_chapter',
'collection' => 'fcn_collection',
'collections' => 'fcn_collection',
'recommendation' => 'fcn_recommendation',
'recommendations' => 'fcn_recommendation'
);
if ( array_key_exists( $post_type, $allowed_post_types ) ) {
$post_type = $allowed_post_types[ $post_type ];
} else {
$post_type = 'post';
}
// Args
$args = array(
'post_type' => $post_type,
'ignore_sticky' => filter_var( $attr['ignore_sticky'] ?? 0, FILTER_VALIDATE_BOOLEAN ),
'ignore_protected' => filter_var( $attr['ignore_protected'] ?? 0, FILTER_VALIDATE_BOOLEAN ),
'count' => $count,
'author' => $attr['author'] ?? false,
'order' => $attr['order'] ?? 'DESC',
'orderby' => $attr['orderby'] ?? 'date',
'page' => get_query_var( 'page' ) ?? get_query_var( 'paged' ) ?? 1,
'posts_per_page' => $attr['per_page'] ?? get_option( 'posts_per_page' ),
'post_ids' => fictioneer_explode_list( $attr['post_ids'] ?? '' ),
'author_ids' => fictioneer_explode_list( $attr['author_ids'] ?? '' ),
'excluded_authors' => fictioneer_explode_list( $attr['exclude_author_ids'] ?? '' ),
'excluded_tags' => fictioneer_explode_list( $attr['exclude_tag_ids'] ?? '' ),
'excluded_cats' => fictioneer_explode_list( $attr['exclude_cat_ids'] ?? '' ),
'taxonomies' => fictioneer_get_shortcode_taxonomies( $attr ),
'relation' => strtolower( $attr['rel'] ?? 'and' ) === 'or' ? 'OR' : 'AND',
'classes' => esc_attr( wp_strip_all_tags( $attr['class'] ?? '' ) )
);
// Transient?
if ( FICTIONEER_SHORTCODE_TRANSIENTS_ENABLED ) {
$base = serialize( $args ) . serialize( $attr ) . $count;
$transient_key = "fictioneer_shortcode_article_cards_html_" . md5( $base );
$transient = get_transient( $transient_key );
if ( ! empty( $transient ) ) {
return $transient;
}
}
// Buffer
ob_start();
get_template_part( 'partials/_article-cards', null, $args );
$html = fictioneer_minify_html( ob_get_clean() );
if ( FICTIONEER_SHORTCODE_TRANSIENTS_ENABLED ) {
set_transient( $transient_key, $html, FICTIONEER_SHORTCODE_TRANSIENT_EXPIRATION );
}
// Return minified buffer
return $html;
}
add_shortcode( 'fictioneer_article_cards', 'fictioneer_shortcode_article_cards' );
?>

252
partials/_article-cards.php Normal file
View File

@ -0,0 +1,252 @@
<?php
/**
* Partial: Article Cards
*
* Renders the (buffered) HTML for the [fictioneer_article_cards] shortcode.
*
* @package WordPress
* @subpackage Fictioneer
* @since 5.7.3
*
* @internal $args['post_type'] Post types to query. Default 'post'.
* @internal $args['ignore_sticky'] Whether to ignore sticky flags. Default false.
* @internal $args['ignore_protected'] Whether to ignore protected posts. Default false.
* @internal $args['count'] Number of posts to display. Default -1.
* @internal $args['author'] Author to query posts for. Default empty.
* @internal $args['order'] Order of posts. Default 'DESC'.
* @internal $args['orderby'] Sorting of posts. Default 'date'.
* @internal $args['page'] The current page. Default 1.
* @internal $args['post_ids'] Array of post IDs. Default empty.
* @internal $args['author_ids'] Array of author IDs. Default empty.
* @internal $args['excluded_authors'] Array of author IDs to exclude. Default empty.
* @internal $args['excluded_cats'] Array of category IDs to exclude. Default empty.
* @internal $args['excluded_tags'] Array of tag IDs to exclude. Default empty.
* @internal $args['taxonomies'] Array of taxonomy arrays. Default empty.
* @internal $args['relation'] Relationship between taxonomies. Default 'AND'.
* @internal $args['classes'] String of additional CSS classes. Default empty.
*/
?>
<?php
// No direct access!
defined( 'ABSPATH' ) OR exit;
// Arguments
$query_args = array(
'fictioneer_query_name' => 'cards',
'post_type' => $args['post_type'],
'post_status' => 'publish',
'order' => $args['order'],
'orderby' => $args['orderby'],
'ignore_sticky_posts' => $args['ignore_sticky']
);
// Pagination or count?
if ( $args['count'] > 0 ) {
$query_args['posts_per_page'] = $args['count'];
$query_args['no_found_rows'] = true;
} else {
$query_args['paged'] = max( 1, $args['page'] );
$query_args['posts_per_page'] = $args['posts_per_page'];
}
// Author?
if ( ! empty( $args['author'] ) ) {
$query_args['author_name'] = $args['author'];
}
// Author IDs?
if ( ! empty( $args['author_ids'] ) ) {
$query_args['author__in'] = $args['author_ids'];
}
// Excluded authors?
if ( ! empty( $args['excluded_authors'] ) ) {
$query_args['author__not_in'] = $args['excluded_authors'];
}
// Taxonomies?
if ( ! empty( $args['taxonomies'] ) ) {
$query_args['tax_query'] = fictioneer_get_shortcode_tax_query( $args );
}
// Excluded categories?
if ( ! empty( $args['excluded_cats'] ) ) {
$query_args['category__not_in'] = $args['excluded_cats'];
}
// Excluded tags?
if ( ! empty( $args['excluded_tags'] ) ) {
$query_args['tag__not_in'] = $args['excluded_tags'];
}
// Ignore protected?
if ( ! $args['ignore_protected'] ) {
$obfuscation = str_repeat( _x( '&#183; ', 'Protected post content obfuscation character.', 'fictioneer' ), 256 );
$obfuscation = apply_filters( 'fictioneer_filter_obfuscation_string', $obfuscation, $post );
} else {
add_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
}
// Apply filters
$query_args = apply_filters( 'fictioneer_filter_shortcode_cards_query_args', $query_args, $args );
// Query
$query = fictioneer_shortcode_query( $query_args );
// Remove temporary filters
remove_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
// Pagination
$pag_args = array(
'current' => max( 1, $args['page'] ),
'total' => $query->max_num_pages,
'prev_text' => fcntr( 'previous' ),
'next_text' => fcntr( 'next' )
);
?>
<section class="article-card-block <?php echo esc_attr( $args['classes'] ); ?>">
<?php if ( $query->have_posts() ) : ?>
<ul class="two-columns _collapse-on-mobile">
<?php
while ( $query->have_posts() ) {
$query->the_post();
// Setup post
$title = fictioneer_get_safe_title( get_the_ID() );
$permalink = get_permalink();
$categories = wp_get_post_categories( get_the_ID() );
$tags = get_the_tags();
$fandoms = get_the_terms( $post, 'fcn_fandom' );
$characters = get_the_terms( $post, 'fcn_character' );
$genres = get_the_terms( $post, 'fcn_genre' );
$landscape_image_id = fictioneer_get_field( 'fictioneer_landscape_image', get_the_ID() );
// Start HTML ---> ?>
<li id="article-card-<?php the_ID(); ?>" class="card _article">
<article class="card__body _article polygon">
<div class="card__main _article">
<?php
$image_args = array(
'alt' => sprintf( __( '%s Thumbnail', 'fictioneer' ), $title ),
'class' => 'no-auto-lightbox'
);
if ( ! empty( $landscape_image_id ) ) {
$thumbnail = wp_get_attachment_image( $landscape_image_id, 'medium', false, $image_args );
echo "<a href='{$permalink}' class='card__image _article cell-img'>{$thumbnail}</a>";
} elseif ( has_post_thumbnail() ) {
$thumbnail = get_the_post_thumbnail( $post, 'medium', $image_args );
echo "<a href='{$permalink}' class='card__image _article cell-img'>{$thumbnail}</a>";
} else {
echo "<a href='{$permalink}' class='card__image _article cell-img _default'></a>";
}
?>
<h3 class="card__title _article _small"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
<?php if ( post_password_required() ) : ?>
<div class="card__content _small _article cell-desc truncate _5-5"><span><?php echo $obfuscation; ?></span></div>
<?php else : ?>
<div class="card__content _small _article cell-desc truncate _5-5"><span><?php the_excerpt(); ?></span></div>
<?php endif; ?>
</div>
<?php if ( $categories || $tags || $genres || $fandoms || $characters ) : ?>
<div class="card__tag-list _small _scrolling cell-tax">
<div class="card__h-scroll">
<?php
$output = [];
if ( $categories ) {
foreach ( $categories as $cat ) {
$output[] = '<a href="' . get_category_link( $cat ) . '" class="tag-pill _inline _category">' . get_category( $cat )->name . '</a>';
}
}
if ( $fandoms ) {
foreach ( $fandoms as $fandom ) {
$output[] = '<a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a>';
}
}
if ( $genres ) {
foreach ( $genres as $genre ) {
$output[] = '<a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
$output[] = '<a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a>';
}
}
if ( $characters ) {
foreach ( $characters as $character ) {
$output[] = '<a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&#8196;&bull;&#8196;', $output );
?>
</div>
</div>
<?php endif; ?>
<div class="card__footer _article _small">
<div class="card__footer-box text-overflow-ellipsis"><?php
// Build footer items
$footer_items = [];
if ( get_option( 'fictioneer_show_authors' ) ) {
$footer_items['author'] = '<i class="card-footer-icon fa-solid fa-circle-user"></i> ' .
fictioneer_get_author_node( get_the_author_meta( 'ID' ) );
}
if ( $args['orderby'] == 'modified' ) {
$footer_items['modified_date'] = '<i class="card-footer-icon fa-regular fa-clock" title="' .
esc_attr__( 'Last Updated', 'fictioneer' ) . '"></i> ' .
get_the_modified_date( FICTIONEER_CARD_POST_FOOTER_DATE, $post );
} else {
$footer_items['publish_date'] = '<i class="card-footer-icon fa-solid fa-clock" title="' .
esc_attr__( 'Published', 'fictioneer' ) .'"></i> ' . get_the_date( FICTIONEER_CARD_POST_FOOTER_DATE );
}
$footer_items['comments'] = '<i class="card-footer-icon fa-solid fa-message" title="' .
esc_attr__( 'Comments', 'fictioneer' ) . '"></i> ' . get_comments_number( $post );
// Filer footer items
$footer_items = apply_filters( 'fictioneer_filter_article_card_footer', $footer_items, $post );
// Implode and render footer items
echo implode( ' ', $footer_items );
?></div>
</div>
</article>
</li>
<?php // <--- End HTML
}
wp_reset_postdata();
?>
</ul>
<?php if ( $args['count'] < 1 && $query->max_num_pages > 1 ) : ?>
<nav class="pagination"><?php echo fictioneer_paginate_links( $pag_args ); ?></nav>
<?php endif; ?>
<?php endif; ?>
</section>

5
partials/_latest-chapters.php
View File

@ -152,7 +152,10 @@ remove_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
}
$excerpt = fictioneer_get_forced_excerpt( $post );
$spoiler_note = str_repeat( _x( '&#183; ', 'Chapter preview obfuscation character.', 'fictioneer' ), intval( strlen( $excerpt ) ) );
$spoiler_note = str_repeat(
_x( '&#183; ', 'Spoiler obfuscation character.', 'fictioneer' ), intval( strlen( $excerpt ) )
);
$spoiler_note = apply_filters( 'fictioneer_filter_obfuscation_string', $spoiler_note, $post );
?>
<?php if ( ! $args['spoiler'] ) : ?>
<span data-click="toggle-obfuscation" tabindex="0">

32
src/scss/_card.scss
View File

@ -14,7 +14,8 @@
}
}
.small-card-block {
.small-card-block,
.article-card-block .pagination {
margin-top: 2rem;
}
@ -176,6 +177,11 @@
margin-right: 1.5rem;
}
&._article {
flex: 0 0 auto;
margin: 0.75rem 0 .375rem;
}
a {
--focus-offset: 1px;
color: var(--story-link);
@ -185,6 +191,17 @@
color: var(--story-link-hover);
}
}
.sticky-pin {
font-size: 0.85em;
margin-right: 0.125em;
}
.protected-icon {
font-size: 0.8em;
margin-right: 0.125em;
transform: translateY(-0.1em);
}
}
&__delete {
@ -275,6 +292,10 @@
width: 100%;
content-visibility: auto;
}
&._article {
aspect-ratio: 3 / 1;
}
}
&__text-icon {
@ -306,6 +327,11 @@
position: relative;
z-index: 1;
}
&._article {
display: flex;
flex-direction: column;
}
}
&__content {
@ -319,6 +345,10 @@
line-height: 1.3;
}
&._article {
line-height: 1.4;
}
&._hidden-result {
font-weight: var(--font-weight-strong);
text-align: center;

2
src/scss/common/_formatting.scss
View File

@ -165,7 +165,7 @@ p a,
.post-password-form {
letter-spacing: 0;
padding-top: 168px;
margin: 3rem 0;
margin: 6rem 0 4rem;
> div {
position: relative;

4
src/scss/common/_utility.scss
View File

@ -109,6 +109,10 @@ body:not(.is-editor):not(.is-admin) {
&._4-4 {
-webkit-line-clamp: 4;
}
&._5-5 {
-webkit-line-clamp: 5;
}
}
.no-scroll {