3
Very good afternoon, I’m new here at stackoverflow and have a question related to a wordpress theme, I have the following programming in php:
if ($i == 0 || ($i % 3 == 0)){
echo '<div class="item '.esc_attr($active).'"><div class="row">';
$open = 1;
}
?>
<div class="col-xs-12 col-sm-4 col-md-4">
<div data-link="<?php echo esc_js(esc_url($e['permalink'])); ?>" class="qw-itemscarousel-item">
<div class="row">
<div class="col-xs-12 col-md-12 qw-hideoverflow qw-dynamiccovers">
<div class="qw-cover-fx-container">
<?php
echo '<img src="'.esc_url($image).'" class="img-responsive hidden-xs" alt="'.esc_attr($page->post_title).'">';
?>
<div class="qw-cover-actions qw-animated qw-verydark">
<a href="#" class="qticon-play" data-addtoplaylyst data-releasedata="<?php echo esc_js(esc_url(add_query_arg( array('qw_get_json_data' => '1'), $e['permalink'] )));?>" data-toggle="tooltip" title="<?php echo esc_attr__('Add to playlist','_s'); ?>"></a>
<a href="#" class="qticon-search qwjquerycontent" data-qwjquerycontent="<?php echo esc_js(esc_url($e['permalink']));?>" data-toggle="tooltip" title="<?php echo esc_attr__('Tracklist','_s'); ?>"></a>
</div>
<div class="qw-itemscarousel-text qw-cover-fx qw-animated qw-negative">
<p class="qw-itemscarousel-title qw-caps">
<a data-toggle="tooltip" title="<?php echo esc_attr__('Go to page','_s'); ?>" href="<?php echo esc_url($e['permalink']); ?>"> <?php echo esc_attr($e['title']); ?></a>
</p>
<div class="qw-separator-mini hidden-xs qw-animated"></div>
<p class="qw-itemscarousel-detail qw-small qw-caps">
<?php echo esc_attr($e['releasedate']); ?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
if (($i+1) % 3 == 0){
echo '</div></div>';
$open = 0;
$col++;
}
$active = '';
$i ++;
endwhile;endif;
//}/*foreach*/
if(isset($open)){
if($open == 1) {
?>
</div> </div>
<?php
$col++;
}
}
?>
</div>
</div>
</div>
<?php
wp_reset_postdata();
wp_reset_query();
That returns me a carousel with 3 images of the same size, according to: col-Xs-12 col-Sm-4 col-Md-4!
My question is, I’d like to change this way the images appear, I’d like them to appear like this:
grid http://marcelotakano.com.br/downloads/grid_carrossel.jpg
Whose programming would be:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row">
<div style="width:100%; height:400px; background: blue;" class="col-md-12">
<span>IMAGEM 1 GRANDE</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div style="width:100%; height:200px; background: red;" class="col-md-12">
IMAGEM 2 PEQUENA
</div>
</div>
<div class="row">
<div style="width:100%; height:200px; background: yellow;" class="col-md-12">
IMAGEM 3 PEQUENA
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div style="width:100%; height:200px; background: silver;" class="col-md-12">
IMAGEM 4 PEQUENA
</div>
</div>
<div class="row">
<div style="width:100%; height:200px; background: gray;" class="col-md-12">
IMAGEM 5 PEQUENA
</div>
</div>
</div>
</div>
However I am not able to insert this programming inside the code, because it returns me this new grid infinitely.
Did anyone understand my problem and can help me?
Thank you very much.
if you put if ($i == 0 || ($i % 5 == 0)){... and there at the end if (($i+1) %5 == 0){.... what happens if?
– user60252
In doing so, return a 5-item carousel, based on grid col-Xs-12 col-Sm-4 col-Md-4! , my problem is to be able to change this grid and make the items appear in the way I would like, like in the image above @Leocaracciolo
– Marcelo Takano
Make sure I understand, making the modification return 5 items (carousel with 5 images) but not in the way you want. If true then you have to act in CSS.
– user60252
it would be easier for you to rewrite the entire code.
– Raphael Ramos
It would be easier for you to rewrite the entire code. From what I understand, you will have 5 images per slide [1 large + 4 small] The logic is you iterate under the post array, making a simple validation, to know which frame should be inserted. The idea here is to use the rest of the index division of the array by 5. , and if the rest will give you the square type it will be [Grand or Small] Being that: [0] = large [1,2,3,4] = small.
– Raphael Ramos