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

Home Forums Support Customize mobile featured image, title and meta data archives

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #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.

    #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

    #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.

    #1323404
    David
    Staff
    Customer Support

    Edit the above code to include the Meta

    #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!

    #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

    #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;
    }
    #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

    #1323565
    David
    Staff
    Customer Support

    Are you using any other Filters to change the author ?

    #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"><span class="author-name" itemprop="name">'  . $author . '</span></a>' ;
    		    
    	    } else {
    		    
    		     echo ' |  <span>Por</span> <a class="url fn n" href="'. $author_url .'" rel="author" itemprop="url"><span class="author-name" itemprop="name">'  . $author . '</span></a>' ;
    		    
    	    }
    	    
    	    
    	    if ( !empty ($twitter) && is_single()) {
    	
    	    echo ' &nbsp;&nbsp;<i id="fa-placeholder" class="fa fa fa-twitter" aria-hidden="true" style="font-size: 17px;"></i> 
    	    <a target="_blank" href="https://www.twitter.com/'. $twitter .'"><span class="entry-meta">@' . $twitter . '</span></a>';
    	    
    	    }
    	}
    ?>
    #1323587
    David
    Staff
    Customer Support
    #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

    #1324293
    Leo
    Staff
    Customer Support

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

    Thanks 🙂

    #1324983
    Elio Martinez

    Hi Leo,

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

    #1325336
    Leo
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.