Background Adaptável

  • leoprado

    (@leoprado)


    8 anos, 4 meses atrás

    Galera, estou com uma dificuldade e ficaria muito grato se alguém pudesse me dar uma luz.

    Gostaria que um o título de um widget da barra lateral tivesse um background adaptável, mas não sei como implementar isso.

    Esse título em questão é sempre alterado pois ele é um título do tipo “veja mais sobre o autor x”. Ou seja, o nome que aparece aí, no lugar do “x”, é o nome do autor do post.

    Ou seja, eu preciso colocar um fundo que se adapte ao tamanho do nome pois, se o nome do autor for só “zé pedro” o tamanho será diferente de um “joaquim augusto pereira silva”.

    O código PHP em questão é esse aqui:

    $orig_post = $post;
			$authorID = get_the_author_meta( 'ID' );
			$args=array('author' => $authorID , 'post__not_in' => array($post->ID), 'posts_per_page'=> $no_of_posts, 'no_found_rows' => 1 );
			$my_query = new wp_query( $args );
		if( $my_query->have_posts() ) :
			echo $before_widget;
				echo $before_title;
				printf( __( 'By %s', 'tie' ), get_the_author() );
			echo $after_title; ?>
			<ul>

    Dá pra criar uma DIV (com o CSS do BG) e fazer ele aparecer aí, de forma adaptável.

    Imagino que a linha principal desse código é:

    printf( __( 'By %s', 'tie' ), get_the_author() );

Visualizando 1 resposta (de um total de 1)
  • Moderador Felipe Elia

    (@felipeelia)

    8 anos, 3 meses atrás

    @leoprado,

    Não ficou muito claro pra mim em que ponto você parou, mas vou deixar aqui algumas coisas que eu acho que podem ajudar:

    Os valores das variáveis $before_title e $after_title são definidos na chamada da função register_sidebar, então no código abaixo, por exemplo, o título ficaria <h2 class="widgettitle">By zé pedro</h2>:

        register_sidebar( array(
        'name' => __( 'Main Sidebar', 'theme-slug' ),
        'id' => 'sidebar-1',
        'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>',
    ) );

    O CSS vai te dar chance de manipular a adaptabilidade do fundo através da propriedade background-size. De repente colocando como cover ou contain você consiga o efeito que deseja. Algo como:

    .widgettitle { background-size: cover; }

    Espero ter ajudado!

Visualizando 1 resposta (de um total de 1)
  • O tópico ‘Background Adaptável’ está fechado para novas respostas.