Customize mobile featured image, title and meta data archives

This topic has 25 replies, 3 voices, and was last updated 5 years, 9 months ago by Leo.

Viewing 15 posts - 1 through 15 (of 26 total)

1 2 →

Author

Posts
June 11, 2020 at 1:43 am #1323193

Elio Martinez

Hi,

In my homepage I use WP-Show posts and I can show the images reduced in size, the title amd the meta data if I do this: https://wpshowposts.com/support/topic/how-to-customize-mobile-homescreen-like-this-layout/

I want to do the same in my archives (categories, tags) showing the images reduced in size, reduced the title and reduced the meta data in the archives like that when on mobile.

Thanks.

June 11, 2020 at 4:37 am #1323395
David
Staff
Customer Support
Hi there,

you can try this CSS:
```
@media (max-width: 768px) {
 .post-image-aligned-left .post .inside-article .post-image {
 margin-top: 0;
 margin-right: 1em;
 float: left;
 text-align: left;
 }

 .post-image-aligned-left .post .inside-article .post-image img {
 width: 100px;
 height: 100px;
 object-fit: cover;
 }
 /* Adjust meta sizes */
 .post-image-aligned-left .post .inside-article .entry-meta {
 font-size: 12px;
 margin-bottom: 0.25em;
 }
 /* remove excerpt space */
 .entry-summary {
 margin: 0;
 }
}
```
You may need to adjust the Archive Content Title size for mobile – and the Post meta…. let us know
June 11, 2020 at 4:40 am #1323398

Elio Martinez

Hi David,

That seems to work for images and titles, but don’t know how to change the meta sizes in mobile.

Thanks.

June 11, 2020 at 4:49 am #1323404

David
Staff
Customer Support

Edit the above code to include the Meta

June 11, 2020 at 5:02 am #1323418

Elio Martinez

That works. But there’s a lo of space between date/author and categories/comments as you can see in the link: https://prnt.sc/sxv4c4

Is it possible to?

1. Reduce the space
2. Transform to uppercase the category
3. Put on the same line category and comments

Thanks!

June 11, 2020 at 5:06 am #1323425

Elio Martinez

Edit: as you can see in the home page I have the author, date and comments above title, I will like to do something like that in archives.

Edit: here goes the screen capture: https://prnt.sc/sxvctt

June 11, 2020 at 6:03 am #1323495
David
Staff
Customer Support
This PHP Snippet to arrange the archive meta:
```
add_filter( 'generate_header_entry_meta_items', function( $items ) {
	if ( !is_single() ) {
		$items = array(
			'author',
			'date',
			'comments-link', 
		);
	}
	return $items;
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
	if ( !is_single() ) {
		$items = array(
			'categories', 
		);
	}
	return $items;
} );
```
And this CSS to move it above the title and add the pipe dividers:
```
body:not(.single) .entry-header {
 display: flex;
 flex-direction: column-reverse;
}

body:not(.single) .entry-header .entry-meta span:not(:last-child):after {
 content: '|';
 margin: 0 5px;
}
```
June 11, 2020 at 6:49 am #1323562

Elio Martinez

Mmmm, almost done, but:

1. For some reason author and | is duplicated as you can see in the capture
2. The top-margin is too big in the entry data

capture: https://prnt.sc/sxxivb

June 11, 2020 at 6:51 am #1323565

David
Staff
Customer Support

Are you using any other Filters to change the author ?

June 11, 2020 at 7:00 am #1323578
Elio Martinez
I have this from years ago:

In child functions:
```
function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

add_filter('pre_get_posts', 'excludeCat');
function excludeCat($query) {
 if ( $query->is_home ) {
 $query->set('cat', '-3936');
 }
 return $query;
}
```
In a custom plugin with Pluginception:
```
add_filter( 'generate_post_author_output','tu_customize_author_link' );
	function tu_customize_author_link( $output ) {
	 $twitter = get_the_author_meta('twitter');
	 $author = get_the_author();
	 
	 $author_url = get_author_posts_url( get_the_author_meta( 'ID' ));
	 
	 
	 if (!is_page_template('index-editorial.php')) {
		 
		 echo ' | ' . $hour .' &nbsp;<a class="url fn n" href="'. $author_url .'" rel="author" itemprop="url">' . $author . '</a>' ;
		 
	 } else {
		 
		 echo ' | Por <a class="url fn n" href="'. $author_url .'" rel="author" itemprop="url">' . $author . '</a>' ;
		 
	 }
	 
	 
	 if ( !empty ($twitter) && is_single()) {
	
	 echo ' &nbsp;&nbsp; 
	 <a target="_blank" href="https://www.twitter.com/'. $twitter .'">@' . $twitter . '</a>';
	 
	 }
	}
?>
```
June 11, 2020 at 7:07 am #1323587

David
Staff
Customer Support

I edited the PHP function here

June 11, 2020 at 7:11 am #1323591

Elio Martinez

Near the goal:

1. | is in a weird place
2. Top-margin is not fixed to the featured image

capture: https://prnt.sc/sxy0bt

June 11, 2020 at 3:42 pm #1324293

Leo
Staff
Customer Support

Any chance this issue can be seen on the live site somewhere?

Thanks 🙂

June 12, 2020 at 7:05 am #1324983

Elio Martinez

Hi Leo,

I have uploaded the functions and css right now, the site is live and you can check it out.

June 12, 2020 at 9:45 am #1325336

Leo
Staff
Customer Support

Don’t think I’m seeing the issue:
https://www.screencast.com/t/ri4yjvGKcg0
Author

Posts

Viewing 15 posts - 1 through 15 (of 26 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Customize mobile featured image, title and meta data archives

Popular Articles

[Resolved] Customize mobile featured image, title and meta data archives

Popular Articles

Start building better websites today.