Un usuario pregunt贸 馃憞
Hola, mi postal parece mala. Quiero mostrarlo como 3 columnas. 驴C贸mo puedo hacerlo?
//paste
$args = array(
'post_type' => $settings['post_type'],
'author__in' => $settings['authors2'],
'posts_per_page' => $settings['posts_per_page'],
'orderby' => $settings['orderby'],
'order' => $settings['order'],
);
echo'<div class="container">';
echo'<div class="row">';
echo'<div class="col-md-12">';
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
//echo "<div style=background:blue> lsdkjf </div>";
// get_template_part( 'template-parts/content', 'masonry' );
// the_title();
//the_content();
//ekleme
?>
<style>
h1{
text-align:center;
margin-bottom:50px;
margin-top:50px;
}
.blog-card-blog {
margin-top: 30px;
}
.blog-card {
display: inline-block;
position: relative;
width: 100%;
margin-bottom: 30px;
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card .blog-card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: 6px;
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.blog-card .blog-card-image img {
width: 100%;
height: 100%;
border-radius: 6px;
pointer-events: none;
}
.blog-card .blog-table {
padding: 15px 30px;
}
.blog-table {
margin-bottom: 0px;
}
.blog-category {
position: relative;
line-height: 0;
margin: 15px 0;
}
.blog-text-success {
color: #28a745!important;
}
.blog-card-blog .blog-card-caption {
margin-top: 5px;
}
.blog-card-caption {
font-weight: 700;
font-family: "Roboto Slab", "Times New Roman", serif;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.blog-card-caption, .blog-card-caption a {
color: #333;
text-decoration: none;
}
p {
color: #3C4857;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
.blog-card .ftr {
margin-top: 15px;
}
.blog-card .ftr .author {
color: #888;
}
.blog-card .ftr div {
display: inline-block;
}
.blog-card .author .avatar {
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;blog-
}
.blog-card .ftr .stats {
position: relative;
top: 1px;
font-size: 14px;
}
.blog-card .ftr .stats {
float: right;
line-height: 30px;
}
</style>
<!-- <div class="col-md-2"> -->
<div class="blog-card blog-card-blog col-md-4">
<div class="blog-card-image">
<!-- <a href="#"> <img class="img" src=<?php //the_post_thumbnail(); ?>> </a> -->
<?php the_post_thumbnail('medium', array('class' => 'img')); ?>
<div class="ripple-cont"></div>
</div>
<div class="blog-table">
<h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
<h4 class="blog-card-caption">
<a href="#"><?php the_title(); ?></a>
</h4>
<p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="ftr">
<div class="author">
<a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
</div>
<div class="stats"> <i class="far fa-clock"></i> 10 min </div>
</div>
</div>
</div>
</div>
</div>
<?php
//ekleme sonu
}
} else {
echo "<div style=background:red> lsdkjf </div>";
}
}
}
}
?>(@sumanm)
Hace 11 meses, 2 semanas
@ helvetica123
mira la publicaci贸n a continuaci贸n 1. https://getbootstrap.com/docs/4.0/components/card/#sizing
2. https://codepen.io/cristinaconacel/pen/dgmjKK
Espero que esto ayude 馃檪
(@ helvetica123)
Hace 11 meses, 1 semana
@sumanm Acabo de notar que olvido los 煤ltimos 2 divs para una fila y elimino un contenedor. Cuando las elimino, las publicaciones aparecen como una columna, sin embargo, ahora tengo un nuevo problema. Agregu茅 un efecto a la imagen en la publicaci贸n y cuando aplico el efecto, todas las publicaciones se bloquean. 驴Puedes mirar mi c贸digo para ver mi error? Creo que es todo un problema de CSS y mi CSS no es bueno. Puedes ver las publicaciones desbordadas de su tarjeta en el enlace de mi primera publicaci贸n
<style>
h1{
text-align:center;
margin-bottom:50px;
margin-top:50px;
}
.blog-card-blog {
margin-top: 30px;
}
.blog-card {
display: inline-block;
position: relative;
width: 100%;
margin-bottom: 30px;
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card .blog-card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: 6px;
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.blog-card .blog-card-image img {
width: 100%;
height: 100%;
border-radius: 6px;
pointer-events: none;
}
.blog-card .blog-table {
padding: 15px 30px;
}
.blog-table {
margin-bottom: 0px;
}
.blog-category {
position: relative;
line-height: 0;
margin: 15px 0;
}
.blog-text-success {
color: #28a745!important;
}
.blog-card-blog .blog-card-caption {
margin-top: 5px;
}
.blog-card-caption {
font-weight: 700;
font-family: "Roboto Slab", "Times New Roman", serif;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.blog-card-caption, .blog-card-caption a {
color: #333;
text-decoration: none;
}
p {
color: #3C4857;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
.blog-card .ftr {
margin-top: 15px;
}
.blog-card .ftr .author {
color: #888;
}
.blog-card .ftr div {
display: inline-block;
}
.blog-card .author .avatar {
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;blog-
}
.blog-card .ftr .stats {
position: relative;
top: 1px;
font-size: 14px;
}
.blog-card .ftr .stats {
float: right;
line-height: 30px;
}
</style>
<style>
body {
background: black;
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'feathericons';
src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;
width: 48%;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/* Individual effects */
/*---------------*/
/***** Ruby *****/
/*---------------*/
figure.effect-ruby {
background-color: #17819c;
}
figure.effect-ruby img {
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
figure.effect-ruby:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-ruby h2 {
margin-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-ruby p {
margin: 1em 0 0;
padding: 3em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-ruby:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-ruby:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
@media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<!-- <div class="col-md-2"> -->
<div class="blog-card blog-card-blog col-md-4" style="height: 100vh;">
<div class="blog-card-image">
<!-- <a href="#"> <img class="img" src=<?php //the_post_thumbnail(); ?>> </a> -->
<div class="grid">
<figure class="effect-ruby">
<img src="https://menlike.club/wp-content/uploads/2015/05/tumblr_nnpudcxIXt1r98nzso1_1280.jpg" alt="img13"/>
<figcaption>
<h2>Glowing <span>Ruby</span></h2>
<p>Ruby did not need any help. Everybody knew that.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div
<?php the_post_thumbnail('medium', array('class' => 'img')); ?>
<div class="ripple-cont"></div>
</div>
<div class="blog-table">
<h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
<h4 class="blog-card-caption">
<a href="#"><?php the_title(); ?></a>
</h4>
<p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<div class="ftr">
<div class="author" >
<!-- <a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
--> </div>
<div class="stats"> <i class="far fa-clock"></i> 10 min </div>
</div>
</div>
</div>Esta respuesta fue modificada hace 11 meses, hace una semana por.
(@sumanm)
Hace 11 meses, 1 semana
@ helvetica123 En su c贸digo, muestra el mismo CSS m煤ltiple. Elimina ese CSS. La imagen no es visible. Cambie el tama帽o de la imagen y luego verifique el efecto de la imagen. Simplemente cambio la imagen y la reviso, muestra el efecto de imagen adecuado.
https://ibb.co/4s7q1VK
Espero que esto ayude 馃檪
(@ helvetica123)
Hace 11 meses, 1 semana
@sumanm 驴C贸mo te fue? 驴Podr铆as explicarme de nuevo cuando cambi茅
<!-- <a href="#"> <img class="img" src=<?php //the_post_thumbnail(); ?>> </a> -->
<?php the_post_thumbnail('medium', array('class' => 'img')); ?>a
<img src="<?php the_post_thumbnail('medium', array('class' => 'img')); ?>"/>
pero aun as铆 se estrella
(@sumanm)
Hace 11 meses, 1 semana
@ helvetica123
Revise sus publicaciones, 驴se muestra una imagen en una publicaci贸n de blog, si no, cargue una imagen de sus publicaciones? La imagen que se muestra en las tarjetas de blog no existe. Una vez que tenga una imagen, se mostrar谩 como el enlace de muestra que compart铆 contigo. Hasta ahora, pru茅belo con una etiqueta de imagen est谩tica y una URL de imagen y tan pronto como el dise帽o sea bueno, c谩mbielo con este c贸digo
<?php the_post_thumbnail('medium', array('class' => 'img')); ?>
(@ helvetica123)
Hace 11 meses, 1 semana
No pude 馃檨 Cambi茅 y agregu茅 miniaturas pero sigue siendo lo mismo. 驴Puedo subir el php, me pueden editar? https://gofile.io/?c=n1BR3z La parte inferior del archivo contiene c贸digos HTML
(@sumanm)
Hace 11 meses, 1 semana
@ helvetica123
Por favor, consulte este enlace.https://gofile.io/?c=5MU466
(@ helvetica123)
Hace 11 meses, 1 semana
@sumanm sigue siendo un accidente
http://www.themeforest-deneme2.deniz-tasarim.site/elementor-703/
(@sumanm)
Hace 11 meses, 1 semana
@ helvetica123
(@ helvetica123)
Hace 11 meses, 1 semana
@sumanm gracias que funciona. Yo controlar茅 los c贸digos
驴Solucion贸 tu problema??
0 / 0