Skip to content

Commit

Permalink
Related posts improve markup and add alt text (#11324)
Browse files Browse the repository at this point in the history 
* Redoing HTML markup for Related Posts (again)

- Using alt text for images instead of a redundant article title
- Using sprintf to output HTML markup
- Properly using nav and ul elements to indicate related posts

* Update modules/related-posts/jetpack-related-posts.php

Co-Authored-By: kraftbj <[email protected]>
  • Loading branch information
@aldavigdis @kraftbj
aldavigdis and kraftbj committed Mar 26, 2019
1 parent 0088971 commit 1320ca5
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 94 deletions.
165 changes: 78 additions & 87 deletions modules/related-posts/jetpack-related-posts.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,60 +254,55 @@ public function get_target_html_unsupported() {
public function render_block_item( $related_post, $block_attributes ) {
$instance_id = 'related-posts-item-' . uniqid();
$label_id = $instance_id . '-label';
?>
<div
aria-labelledby="<?php echo esc_attr( $label_id ); ?>"
role="menuitem"
data-post-id="<?php echo esc_attr( $related_post['id'] ); ?>"
data-post-format="<?php echo esc_attr( ! empty( $related_post['format'] ) ? $related_post['format'] : 'false' ); ?>"
class="jp-related-posts-i2__post"
id="<?php echo esc_attr( $instance_id ); ?>"
>
<a
href="<?php echo esc_url( $related_post['url'] ); ?>"
title="<?php echo esc_attr( $related_post['title'] ); ?>"
rel="<?php echo esc_attr( $related_post['rel'] ); ?>"
data-origin="<?php echo esc_attr( $related_post['url_meta']['origin'] ); ?>"
data-position="<?php echo esc_attr( $related_post['url_meta']['position'] ); ?>"
class="jp-related-posts-i2__post-link"
id="<?php echo esc_attr( $label_id ); ?>"
>
<?php echo esc_html( $related_post['title'] ); ?>
</a>
<?php if ( ! empty( $block_attributes['show_thumbnails'] ) && ! empty( $related_post['img']['src'] ) ) : ?>
<a
href="<?php echo esc_url( $related_post['url'] ); ?>"
title="<?php echo esc_attr( $related_post['title'] ); ?>"
rel="<?php echo esc_attr( $related_post['rel'] ); ?>"
data-origin="<?php echo esc_attr( $related_post['url_meta']['origin'] ); ?>"
data-position="<?php echo esc_attr( $related_post['url_meta']['position'] ); ?>"
class="jp-related-posts-i2__post-img-link"
>
<img
class="jp-related-posts-i2__post-img"
src="<?php echo esc_url( $related_post['img']['src'] ); ?>"
width="<?php echo esc_attr( $related_post['img']['width'] ); ?>"
alt="<?php echo esc_attr( $related_post['title'] ); ?>"
/>
</a>
<?php endif; ?>
<?php if ( $block_attributes['show_date'] ) : ?>
<div class="jp-related-posts-i2__post-date has-small-font-size">
<?php echo esc_html( $related_post['date'] ); ?>
</div>
<?php endif; ?>
<?php
if (
( $block_attributes['show_context'] ) &&
! empty( $related_post['context'] )
) :
?>
<div class="jp-related-posts-i2__post-context has-small-font-size">
<?php echo esc_html( $related_post['context'] ); ?>
</div>
<?php endif; ?>
</div>
<?php

$item_markup = sprintf(
'<ul id="%1$s" aria-labelledby="%2$s" class="jp-related-posts-i2__post" role="menuitem">',
esc_attr( $instance_id ),
esc_attr( $label_id )
);

$item_markup .= sprintf(
'<li class="jp-related-posts-i2__post-link"><a id="%1$s" href="%2$s" rel="%4$s">%3$s</a></li>',
esc_attr( $label_id ),
esc_url( $related_post['url'] ),
esc_attr( $related_post['title'] ),
esc_attr( $related_post['rel'] )
);

if ( ! empty( $block_attributes['show_thumbnails'] ) && ! empty( $related_post['img']['src'] ) ) {
$img_link = sprintf(
'<li class="jp-related-posts-i2__post-img-link"><a href="%1$s" rel="%2$s"><img src="%3$s" width="%4$s" alt="%5$s" /></a></li>',
esc_url( $related_post['url'] ),
esc_attr( $related_post['rel'] ),
esc_url( $related_post['img']['src'] ),
esc_attr( $related_post['img']['width'] ),
esc_attr( $related_post['img']['alt_text'] )
);

$item_markup .= $img_link;
}

if ( $block_attributes['show_date'] ) {
$date_tag = sprintf(
'<li class="jp-related-posts-i2__post-date">%1$s</li>',
esc_html( $related_post['date'] )
);

$item_markup .= $date_tag;
}

if ( ( $block_attributes['show_context'] ) && ! empty( $related_post['context'] ) ) {
$context_tag = sprintf(
'<li class="jp-related-posts-i2__post-context">%1$s</li>',
esc_html( $related_post['context'] )
);

$item_markup .= $context_tag;
}

$item_markup .= '</ul>';

return $item_markup;
}

/**
Expand All @@ -317,18 +312,15 @@ class="jp-related-posts-i2__post-img"
* @param array $block_attributes Block attributes.
*/
public function render_block_row( $posts, $block_attributes ) {
?>
<div
class="jp-related-posts-i2__row"
data-post-count="<?php echo count( $posts ); ?>"
>
<?php
$rows_markup = '';
foreach ( $posts as $post ) {
$this->render_block_item( $post, $block_attributes );
$rows_markup .= $this->render_block_item( $post, $block_attributes );
}
?>
</div>
<?php
return sprintf(
'<div class="jp-related-posts-i2__row" data-post-count="%1$s">%2$s</div>',
count( $posts ),
$rows_markup
);
}

/**
Expand Down Expand Up @@ -376,21 +368,10 @@ public function render_block( $attributes ) {
$upper_row_posts = array_slice( $related_posts, 0, $top_row_end );
$lower_row_posts = array_slice( $related_posts, $top_row_end );

ob_start();
?>
<nav
class="jp-relatedposts-i2"
data-layout="<?php echo esc_attr( $block_attributes['layout'] ); ?>"
>
<?php
$this->render_block_row( $upper_row_posts, $block_attributes );
if ( $display_lower_row ) {
$this->render_block_row( $lower_row_posts, $block_attributes );
}
?>
</nav>
<?php
$html = ob_get_clean();
$rows_markup = $this->render_block_row( $upper_row_posts, $block_attributes );
if ( $display_lower_row ) {
$rows_markup .= $this->render_block_row( $lower_row_posts, $block_attributes );
}

$target_to_dom_priority = has_filter(
'the_content',
Expand All @@ -416,7 +397,11 @@ class="jp-relatedposts-i2"
remove_filter( 'the_content', 'wpautop', $priority );
add_filter( 'the_content', '_restore_wpautop_hook', $priority + 1 );

return $html;
return sprintf(
'<nav class="jp-relatedposts-i2" data-layout="%1$s">%2$s</nav>',
esc_attr( $block_attributes['layout'] ),
$rows_markup
);
}

/**
Expand Down Expand Up @@ -1290,9 +1275,10 @@ protected function _get_excerpt( $post_excerpt, $post_content ) {
protected function _generate_related_post_image_params( $post_id ) {
$options = $this->get_options();
$image_params = array(
'src' => '',
'width' => 0,
'height' => 0,
'alt_text' => '',
'src' => '',
'width' => 0,
'height' => 0,
);

/**
Expand All @@ -1317,7 +1303,7 @@ protected function _generate_related_post_image_params( $post_id ) {

// Try to get post image
if ( class_exists( 'Jetpack_PostImages' ) ) {
$img_url = '';
$img_url = '';
$post_image = Jetpack_PostImages::get_image(
$post_id,
$thumbnail_size
Expand All @@ -1333,10 +1319,15 @@ protected function _generate_related_post_image_params( $post_id ) {
}
}

if ( !empty( $img_url ) ) {
$image_params['width'] = $thumbnail_size['width'];
if ( ! empty( $img_url ) ) {
if ( ! empty( $post_image['alt_text'] ) ) {
$image_params['alt_text'] = $post_image['alt_text'];
} else {
$image_params['alt_text'] = '';
}
$image_params['width'] = $thumbnail_size['width'];
$image_params['height'] = $thumbnail_size['height'];
$image_params['src'] = Jetpack_PostImages::fit_image_url(
$image_params['src'] = Jetpack_PostImages::fit_image_url(
$img_url,
$thumbnail_size['width'],
$thumbnail_size['height']
Expand Down
17 changes: 10 additions & 7 deletions modules/related-posts/related-posts.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
margin: 0 10px;
display: flex;
flex-direction: column;
padding-left: 0;
}

.jp-related-posts-i2__row[data-post-count="3"] .jp-related-posts-i2__post {
Expand All @@ -35,6 +36,7 @@
.jp-related-posts-i2__post-heading, .jp-related-posts-i2__post-img-link,
.jp-related-posts-i2__post-date, .jp-related-posts-i2__post-context {
flex-direction: row;
display: block;
}

.jp-related-posts-i2__post-heading {
Expand All @@ -46,14 +48,15 @@
.jp-related-posts-i2__post-link {
display: block;
width: 100%;
}

.jp-related-posts-i2__post-img {
width: 100%;
line-height: 1.2em;
}

.jp-related-posts-i2__post-img-link {
order: -1;
line-height: 1em;
img {
width: 100%;
}
}

/* List view */
Expand Down Expand Up @@ -85,9 +88,9 @@
}
.jp-related-posts-i2__post-img-link {
margin-top: 1rem;
}
.jp-related-posts-i2__post-img {
width: 350px;
img {
width: 350px;
}
}
}

Expand Down

0 comments on commit 1320ca5

Please sign in to comment.