Como incorporar conteúdo aleatório dentro de um layout de grade (com PHP)Reviltec

Neste tutorial, aprenderemos como inserir conteúdo aleatório dentro de um layout de grade, uma técnica popular usada em diversos sites para chamar a atenção dos visitantes e promover seus produtos/serviços.

Essa é a maneira perfeita de exibir anúncios ou blocos promocionais para seu próprio conteúdo. Ele também oferece aos seus layouts uma quebra visual interessante das grades repetitivas.

Como de costume, para entender melhor o que vamos construir, há uma demonstração que acompanha. Mas, como esta demonstração usa algum código PHP, ela precisa de um servidor para rodar.

Você pode baixar os arquivos do projeto deste repositório GitHub.

Assim que você puder executar a demonstração por meio de um servidor, observe duas coisas:

Os banners embutidos
e conforme você recarrega a página, as imagens do banner mudam.

Este tutorial pressupõe que você esteja familiarizado, até certo ponto, com uma linguagem do lado do servidor como o PHP.

Entendendo o layout

Cada instrutor aqui no Tuts+ tem seu próprio página de arquivo. Em um tutorial anterior, recriamos uma lista de tutoriais como esta com nossa própria marcação.

A marcação

Usamos HTML direto para construir a estrutura. Desta vez, vamos automatizar as coisas e armazenar os posts dentro de um array PHP. Aqui iremos com PHP, mas independente da linguagem ou do CMS/framework, a lógica continuará a mesma. Devemos percorrer a fonte e recuperar as postagens.

O formato dos nossos posts ficará assim:

$articles      = array(
  array(
    'title'      => 'Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript',
    'image'      => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/parallax-pre.jpg',
    'link'       => 'https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-dead-simple-parallax-effect-with-css-javascript--cms-33061',
    'categories' => array(
      'CSS',
      'JavaScript',
    ),
  ),
  array(
    'title'      => 'How to Build a Static Portfolio Page With CSS & JavaScript',
    'image'      => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/chart-pre.png',
    'link'       => 'https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933',
    'categories' => array(
      'CSS',
      'JavaScript',
    ),
  ),
    
  // more articles here
);

E aqui está nossa lógica de loop:

 if ( ! empty( $articles ) ) : ?>
   class="container">
     class="posts">
       foreach ( $articles as $key => $article ) : ?>
         class="post">
          
            
               href=" echo $article['link']; ?>" target="_blank">
                 width="300" height="208" src=" echo $article['image']; ?>" alt=" echo $article['title']; ?>">
              
              
                 class="post-categories">
                   foreach ( $article['categories'] as $cat ) : ?>
                    
                       href="">
                         echo $cat; ?>
                      
                    
                   endforeach; ?>
                
                 class="post-title">
                   href=" echo $article['link']; ?>" target="_blank">
                     echo $article['title']; ?>
                  
                
              
            
          
        
       endforeach; ?>
    
  
 endif; ?>

Como dito, dependendo do idioma ou CMS que você for usar, as coisas vão mudar. Por exemplo, o WordPress possui um loop integrado para todas as consultas primárias.


 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
  

 endwhile; else : ?>

  
  
   esc_html_e( 'Sorry, no posts matched your criteria.' ); ?>

  
 endif; ?>

Em um exemplo do mundo real, é sempre bom proteger a saída de dados. Cada linguagem/framework/CMS tem suas próprias funções para este fim. Por exemplo, esta página mostra as funções integradas do WordPress.

os estilos

Além da marcação, também manteremos a maioria dos estilos do tutorial anterior. Faremos apenas algumas alterações para tornar o layout responsivo.

Aqui estão todos os estilos:

:root {
  --black: #3a3a3a;
  --white: #fff;
  --green: #49b293;
}

* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  margin: 50px 0;
  color: var(--black);
  font: 1rem/1.3 sans-serif;
}

.container {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

h1 a {
  text-decoration: underline;
}

.posts {
  display: grid;
  grid-gap: 1.5rem;
}

.posts .post {
  width: 300px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.posts > li {
  background: #fafafa;
}

.posts .post-title {
  font-size: 1.3rem;
}

.posts .post-title:hover {
  text-decoration: underline;
}

.posts figcaption {
  padding: 1rem;
}

.posts .post-categories {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}

.posts .post-categories * {
  display: inline-block;
}

.posts .post-categories li {
  margin-bottom: 0.2rem;
}

.posts .post-categories a {
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid;
  line-height: normal;
  transition: all 0.1s;
}

.posts .post-categories a:hover {
  background: var(--green);
  color: var(--white);
}

@media (min-width: 500px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }

  .posts .post {
    width: auto;
  }
}

@media (min-width: 600px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .posts {
    grid-template-columns: repeat(4, 1fr);
  }
}

Incorporar Banners

Vamos supor agora que queremos colocar banners dentro de nossa grade. Neste caso, usaremos apenas banners de imagem, mas no seu caso, você pode inserir anúncios provenientes de diferentes fontes, carrosséis, vídeos ou qualquer outra coisa que desejar.

Os nossos banners têm de cumprir os seguintes requisitos:

Eles devem vir após cada quinta coluna. No nosso caso, são 12 postagens, então nossa grade conterá dois banners. Claro, no seu caso, você pode ter muitos mais.
A cada carregamento de página, eles deverão aparecer aleatoriamente, ou seja, não haverá locais fixos para determinados banners.
Além disso, os banners incorporados devem ser únicos, o que significa que um único banner nunca aparecerá duas vezes na mesma página.

Aqui está um exemplo do layout que queremos produzir:

Conforme mencionado, os banners aparecerão aleatoriamente, portanto, em outro carregamento de página, poderemos ver outros diferentes, como este:

Para realizar esse comportamento, usaremos diferentes funções de array do PHP (array_keys, array_diff, array_rand, array_push).

Vamos anotar os passos que seguiremos:

Armazene dentro do $images Arraste todos os banners (vindos do Unsplash) e pegue as chaves desse array.
Inicialize o $exclude_images_keys array, onde adicionaremos a chave de cada banner que está sendo adicionado ao grid. Por padrão, estará vazio.
Dentro do loop, verificaremos se o índice do elemento atual não é 0 e é divisível por 5.
Se isso acontecer, vamos comparar o $images_keys e $exclude_images_keys matrizes. Retornaremos seus valores exclusivos, se houver, e os armazenaremos dentro do $in_items variedade.
Pegue uma chave aleatória do $in_items variedade.
Adicione esta chave ao $exclude_images_keys variedade para excluir o banner associado de seleções futuras.
Escolha o banner com esta chave e coloque-o na grade.

Aqui está o código PHP responsável por esta funcionalidade:

 
// 1
$images              = array(
  'banner1.jpg',
  'banner2.jpg',
  'banner3.jpg',
  'banner4.jpg',
  'banner5.jpg',
  'banner6.jpg',
);
$images_keys         = array_keys( $images );
$exclude_images_keys = array();

foreach ( $articles as $key => $article ) :
  // 3
  if ( 0 !== $key && 0 === $key % 5 ) :
    // 4
    $in_items         = array_diff( $images_keys, $exclude_images_keys );
    // 5
    $random_image_key = array_rand( $in_items );
    // 6
    array_push( $exclude_images_keys, $random_image_key );
    // 7
    $random_image = $images[ $random_image_key ];
    ?>
     class="banner">
       width="800" height="533" src="img/ echo $random_image; ?>" alt="banner">
    
	
  endif;
  ...
 endforeach;

E o CSS adicional para nossos banners:

.posts .banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  
@media (min-width: 900px) {
  .posts .banner {
    grid-column: span 2;
  }
}

Conclusão

Isso é tudo, pessoal! Espero que você tenha gostado deste pequeno exercício tanto quanto eu e que tenha lhe dado algumas ideias sobre como incorporar itens de publicidade apenas em um layout de grade. Além disso, usando o operador de módulo (%) da maneira que abordamos aqui, você pode criar layouts de várias colunas com padrões dinâmicos.

Como sempre, muito obrigado pela leitura!

Relacionado

Posted by admin

Tagged with

1	$articles = array(
2	array(
3	'title' => 'Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript',
4	'image' => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/parallax-pre.jpg',
5	'link' => 'https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-dead-simple-parallax-effect-with-css-javascript--cms-33061',
6	'categories' => array(
7	'CSS',
8	'JavaScript',
9	),
10	),
11	array(
12	'title' => 'How to Build a Static Portfolio Page With CSS & JavaScript',
13	'image' => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/chart-pre.png',
14	'link' => 'https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933',
15	'categories' => array(
16	'CSS',
17	'JavaScript',
18	),
19	),
20
21	// more articles here
22	);

1	if ( ! empty( $articles ) ) : ?>
2	class="container">
3	class="posts">
4	foreach ( $articles as $key => $article ) : ?>
5	class="post">
6
7
8	href=" echo $article['link']; ?>" target="_blank">
9	width="300" height="208" src=" echo $article['image']; ?>" alt=" echo $article['title']; ?>">
10
11
12	class="post-categories">
13	foreach ( $article['categories'] as $cat ) : ?>
14
15	href="">
16	echo $cat; ?>
17
18
19	endforeach; ?>
20
21	class="post-title">
22	href=" echo $article['link']; ?>" target="_blank">
23	echo $article['title']; ?>
24
25
26
27
28
29
30	endforeach; ?>
31
32
33	endif; ?>

1
2	if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
3
4
5
6	endwhile; else : ?>
7
8
9
10	esc_html_e( 'Sorry, no posts matched your criteria.' ); ?>
11
12
13	endif; ?>

1	:root {
2	--black: #3a3a3a;
3	--white: #fff;
4	--green: #49b293;
5	}
6
7	* {
8	margin: 0;
9	padding: 0;
10	}
11
12	img {
13	display: block;
14	max-width: 100%;
15	height: auto;
16	}
17
18	ol {
19	list-style: none;
20	}
21
22	a {
23	text-decoration: none;
24	color: inherit;
25	}
26
27	body {
28	margin: 50px 0;
29	color: var(--black);
30	font: 1rem/1.3 sans-serif;
31	}
32
33	.container {
34	max-width: 1200px;
35	padding: 0 15px;
36	margin: 0 auto;
37	}
38
39	h1 {
40	text-align: center;
41	margin-bottom: 2rem;
42	}
43
44	h1 a {
45	text-decoration: underline;
46	}
47
48	.posts {
49	display: grid;
50	grid-gap: 1.5rem;
51	}
52
53	.posts .post {
54	width: 300px;
55	margin: 0 auto;
56	border: 1px solid rgba(0, 0, 0, 0.1);
57	}
58
59	.posts > li {
60	background: #fafafa;
61	}
62
63	.posts .post-title {
64	font-size: 1.3rem;
65	}
66
67	.posts .post-title:hover {
68	text-decoration: underline;
69	}
70
71	.posts figcaption {
72	padding: 1rem;
73	}
74
75	.posts .post-categories {
76	margin-bottom: 0.75rem;
77	font-size: 0.75rem;
78	}
79
80	.posts .post-categories * {
81	display: inline-block;
82	}
83
84	.posts .post-categories li {
85	margin-bottom: 0.2rem;
86	}
87
88	.posts .post-categories a {
89	padding: 0.2rem 0.5rem;
90	border-radius: 1rem;
91	border: 1px solid;
92	line-height: normal;
93	transition: all 0.1s;
94	}
95
96	.posts .post-categories a:hover {
97	background: var(--green);
98	color: var(--white);
99	}
100
101	@media (min-width: 500px) {
102	.posts {
103	grid-template-columns: repeat(2, 1fr);
104	}
105
106	.posts .post {
107	width: auto;
108	}
109	}
110
111	@media (min-width: 600px) {
112	.posts {
113	grid-template-columns: repeat(3, 1fr);
114	}
115	}
116
117	@media (min-width: 900px) {
118	.posts {
119	grid-template-columns: repeat(4, 1fr);
120	}
121	}

1
2	// 1
3	$images = array(
4	'banner1.jpg',
5	'banner2.jpg',
6	'banner3.jpg',
7	'banner4.jpg',
8	'banner5.jpg',
9	'banner6.jpg',
10	);
11	$images_keys = array_keys( $images );
12	$exclude_images_keys = array();
13
14	foreach ( $articles as $key => $article ) :
15	// 3
16	if ( 0 !== $key && 0 === $key % 5 ) :
17	// 4
18	$in_items = array_diff( $images_keys, $exclude_images_keys );
19	// 5
20	$random_image_key = array_rand( $in_items );
21	// 6
22	array_push( $exclude_images_keys, $random_image_key );
23	// 7
24	$random_image = $images[ $random_image_key ];
25	?>
26	class="banner">
27	width="800" height="533" src="img/ echo $random_image; ?>" alt="banner">
28
29
30	endif;
31	...
32	endforeach;

1	.posts .banner img {
2	width: 100%;
3	height: 100%;
4	object-fit: cover;
5	}
6
7	@media (min-width: 900px) {
8	.posts .banner {
9	grid-column: span 2;
10	}
11	}