• Resolved michaelgof

    (@michaelgof)


    –Is there a way to dynamically set image dimensions to a specified content width?

    In other ways i want images to fit to specific content [container] width based on various screen sizes.

    – For example, this is an image of the website am constructing on a mobile. [Same applies to tablets]

    – On close observation you see the image is centered. Its ok on desktop. But for tablets and mobile screens i want the image to stretch out a little bit and occupy the white spaces left and right.

    – Well it should be dynamic based on the tablet or mobile screen

    – I could set some image parameter so that the image occupies a certain percentage of the container width.

    – At least you get what am trying to say. Is there a way a can achieve that?

    – And also the duplicate date issue below the title. How could that be fix?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Theme Author Tom

    (@edge22)

    Typically you would need to add the image so it’s wide enough to fit the content width at all screen sizes. Resizing down is easy, but resizing up will cause quality issues.

    As for the date issue, can you link us to your site?

    Thread Starter michaelgof

    (@michaelgof)

    -Ok i get it.

    – I sent details of login for date issue and this thread through https://generatepress.com/contact/

    -Please check it out.

    Theme Author Tom

    (@edge22)

    Are you using any custom functions related to the date? Your site is missing some default HTML markup.

    Thread Starter michaelgof

    (@michaelgof)

    – I wanted the author picture and the date to appear below the title so i introduced a function i got from the forums. Here is the function

    add_filter( 'generate_post_author', '__return_false' );
    add_filter( 'generate_show_comments', '__return_false' );
    add_filter( 'generate_post_date_output', 'tu_fancy_byline', 10, 2 );
    function tu_fancy_byline( $date, $time_string ) {
    	printf( ' <span class="byline">%1$s</span>',
    		sprintf( '<span class="author vcard" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<span class="author-name" itemprop="name">%3$s</span></span>',
    			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    			esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
    			esc_html( get_the_author() ),
    			get_avatar( get_the_author_meta( 'ID' ) )
    		)
    	);
    
    	echo $time_string;
    }
    Theme Author Tom

    (@edge22)

    Ah I see the issue – do you want the published date or the updated date to display?

    Depending, you can do this:

    .published {
        display: none;
    }

    Or:

    .updated {
        display: none;
    }
    Thread Starter michaelgof

    (@michaelgof)

    – i want the updated date. let me try the second and see what it gives

    Thread Starter michaelgof

    (@michaelgof)

    – ok the duplicate date issue was fix. see here

    – By i would like it to be like: By ‘author name’ Last Updated ‘date’

    An example is like this one ??

    Theme Author Tom

    (@edge22)

    To switch the positions of the meta items, you can do this:

    .entry-header .entry-meta {
        display: flex;
    }
    
    .byline {
        order: -1;
        padding-right: 10px;
    }

    You may want to run that code through this tool depending on browser support needed: https://autoprefixer.github.io/

    Then to show the updated date, this should help: https://docs.generatepress.com/article/show-the-updated-post-date/

    Thread Starter michaelgof

    (@michaelgof)

    -Awesome. works great.

    -I think i have no choice than study basic html and css to make sense of some of this.

    -Will sent a few bucks your few for the support. Awesome theme. How do i do that?

    Theme Author Tom

    (@edge22)

    I definitely suggest learning some CSS and HTML – it’s a lot of fun ??

    Wow, thank you! https://generatepress.com/ongoing-development/

    I really appreciate it!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to set dynamic image dimensions for tablets and mobile screens’ is closed to new replies.