Question
Hi, I am trying to print the first two categories images with col-xl-6, and the remaining categories images with col-xl-4. The size of the first two images is different from the last three. Please let me know how it will work. If you can share code it'll be awesome! Thanks.
Blade-File
#foreach ($categories as $cat)
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 column">
<a href='/products/{{$cat->id}}'>
{{-- style="height: 460px; width:345px; --}}
<div class="img">
<img class="cat-img mx-2" id="cat-img" src="/uploads/categories/{{$cat->image_url}}" />
</div>
</a>
<div class="title text-center">
<h2>{{$cat->title}}</h2>
<a href='products/{{$cat->id}}'>Shop Now</a>
</div>
</div>
#endforeach
There is a $loop variable available that you can check if the index of current item with.
https://laravel.com/docs/8.x/blade#the-loop-variable
#if ($loop->index === 0 || $loop->index === 1)
// do stuff
#endif
Related
I'm trying to make a calendar app with a header row and header column, which shows six days in columns and has a fixed number of time periods per day.
<div class="row">
<div class="col-md col-sm-12 mt-3 border border-secondary" style="background-color:lightgray">
<div class="row text-center"><strong>Period</strong></div>
#foreach ( config('enums.class_periods') as $key => $class_period)
<div class="row border-top border-secondary text-center d-flex align-content-stretch flex-wrap"><strong>{{ $class_period }}</strong></div>
#endforeach
</div>
#foreach ($week_array as $weekday)
<div class="col-md col-sm-12 mt-3 border border-secondary {{$weekday==$today ? "border-primary" : "" }}" style="{{ $loop->even ? "background-color:lightgray":"" }}">
<div class="row text-center"><strong>{{ $weekday }}</strong></div>
#foreach ( config('enums.class_periods') as $key => $class_period)
<div class="row border-top border-secondary text-center"><p>-</p></div>
#endforeach
</div>
#endforeach
</div>
I need to make the rows in the header (first) column the same height as the rows in the day columns. This is because the data in the day columns' rows will be dynamic so that it can stretch a lot. I know I could change the layout to row by row instead of a column by column, but that will make the wrapping on smaller screens not the way I'd like it to be. I've played with several different suggestions that I found online but didn't find one that will work for me. Any help and guidance will be appreciated.
Thanks to all of you that viewed the question.
I've found a way to do this with jQuery by adapting the answer in this thread: Bootstrap equal height rows inside equal height columns
I've adapted it this way:
<div class="row">
<div class="col-md col-sm-12 mt-3 border border-secondary h-auto" style="background-color:lightgray">
<div class="row text-center"><strong>Period</strong></div>
#foreach ( config('enums.class_periods') as $key => $class_period)
<div class="row border-top border-secondary text-center Row{{$loop -> iteration;}}"><strong>{{ $class_period }}</strong></div>
#endforeach
</div>
#foreach ($week_array as $weekday)
<div class="col-md col-sm-12 mt-3 border border-start-0 border-secondary" style="{{ $loop->even ? "background-color:lightgray;":"" }} {{$weekday==$today ? "background-color:lightblue" : "" }}">
<div class="row text-center" style="background-color: lightgray"><strong>{{ $weekday }}</strong></div>
#foreach ( config('enums.class_periods') as $key => $class_period)
<div class="row border-top border-secondary text-center Row{{$loop -> iteration;}}"><p>-</p></div>
#endforeach
</div>
#endforeach
</div>
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
var periods = #json(config('enums.class_periods'));
$.each(periods, function( index, value ) {
var maxHeightRow = -1;
$('.Row'+index).each(function() {
maxHeightRow = maxHeightRow > $(this).height() ? maxHeightRow : $(this).height();
});
$('.Row'+index).each(function() {
$(this).height(maxHeightRow);
});
});
});
</script>
I have multiple custom taxonomies in custom post type. I am printing the custom posts with their multiple taxonomies in loop. I am able to done that. But the taxonomies are printing in random order like this:
This is what printing in loop:
As you can see some data of job type is printing in Company field, Some company is printing in Skills field. How can i print them in order.
Here is my code:
$args=array("post_per_page"=>-1,"post_type"=>"jobs");
$loop=new WP_Query($args);
if($loop->have_posts()){
while($loop->have_posts()):$loop->the_post();
$custom_terms=wp_get_object_terms(get_the_ID(),array('companies','job-type','skills'),array('orderby' => 'name', 'order'=>'ASC','fields'=>'all'));?>
<div class="col-md-12" style="box-shadow:0px 3px 5px 2px #f4f4f4;margin:10px;background:#fff;">
<div class="media col-md-3" style="margin-top:2%;">
<figure class="pull-left">
<?php the_post_thumbnail('small',array('class'=>'media-object img-rounded img-responsive'));?>
<h5 class="list-group-item-heading" style="font-weight: 400;color: #0db294;margin-bottom:3%;border-bottom:1px solid rgb(98,59,204,0.1);padding:5px;"><?php echo the_title();?> </h5>
</figure>
</div>
<div class="col-md-6" style="margin-top:3%;">
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Company</label><br/><span style="text-transform:capitalize"><?php echo $custom_terms[1]->name;?></span></div>
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Job Type</label><br/><?php echo $custom_terms[0]->name;?></div>
<div class="col-md-4 col-xs-12 text-center"><label style="color: #0db294;">Skills</label><br/><?php echo $custom_terms[2]->name;?></div>
</div>
<div class="col-md-3 col-xs-12 text-center"><br/>
View Details
</div>
</div>
<?php endwhile;
}
Use get_the_term_list to get all terms for specific taxonomy. You can also modify this to get first one if there are multiple ones.
Like this ID, 'companies', 'Company: ', ', ' ); ?>
You are getting all and ordering by name then getting by position. That is causing issues. Get each one like this manually.
Here is the solution as #boris suggested
$args=array("post_per_page"=>-1,"post_type"=>"jobs");
$loop=new WP_Query($args);
if($loop->have_posts()){
while($loop->have_posts()):$loop->the_post();
$comp=get_the_term_list(get_the_ID(),'companies','',',');
$jobt=get_the_term_list(get_the_ID(),'job-type','',',');
$skil=get_the_term_list(get_the_ID(),'skills','',',');
?>
<div class="col-md-12 col-xs-12" style="margin:10px;background:#fff;margin-left:0;">
<div class="media col-md-4 col-xs-12" style="margin-top:2%;">
<figure class="pull-left">
<!-- <img class="media-object img-rounded img-responsive" src="" alt="placehold.it/350x250" style="height:70px;width:auto;margin:0 auto" > -->
<h2 class="list-group-item-heading" style="font-weight: 400;font-size:19px;color: #2A5A8E;margin-bottom:3%;padding:5px;"><?php echo the_title();?> </h2>
</figure>
</div>
<div class="col-md-6" style="margin-top:3%;">
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Company</label><br/><span style="text-transform:capitalize"><?php echo $comp;?></span></div>
<div class="col-md-4 col-xs-12 text-center b-right"><label style="color: #0db294;">Job Type</label><br/><?php echo $jobt;?></div>
<div class="col-md-4 col-xs-12 text-center"><label style="color: #0db294;">Skills</label><br/><?php echo $skil;?></div>
</div>
<div class="col-md-2 col-xs-12 text-center"><br/>
View Details
</div>
</div>
<?php endwhile;
}
?>
how can i integrate load more button that loads next 10 posts from custom query ?
I've tried with bunch of plugins, css and js ways, but can't seem to load it.
How would you load more posts on load click?
Any tip is very much appreaciated
<div class="container">
<div class="row featured-akcije">
#foreach(get_field('actions') as $action)
#php($query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)))
#php($query->the_post())
<div class="col-md-4 col-xl-3 action">
<div class="box-shadow-posts hoverPic">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<div class="col-4 col-md-6 col-xl-6">
<div class="action-img">
<img src="{{ get_the_post_thumbnail_url() }}" class="img-fluid">
<p class="action">action</p>
</div>
</div>
<div class="col-8 col-md-6 pl-md-0">
<div class="row info-action">
<div class="col-md-12"><h2 class="title">
{{ the_title() }}
</h2></div>
<div class="col-md-12 price-info">
<div class="divider">
</div>
<?php if( get_field('price_off') ): ?>
<p class="price">price from <?php the_field('price_from'); ?>e</p>
<?php endif; ?>
<p class="detail"><a href="{{ the_permalink() }}"><span class="nav-border"></span><span>detail <i
class="fas fa-arrow-right"></i></span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#php(wp_reset_postdata())
#endforeach
</div>
</div>
I implemented load more functionality for custom query like this:
Create wp ajax endpoint which is called be javascript on load more button click
Endpoint gets offset which post to load? For example from 11 to 20 and returns html with rendered posts
Javascript appends return html to html of the page in proper place
How to create endpoint? Here are examples for creating endpoint and calling it from javascript: https://codex.wordpress.org/AJAX_in_Plugins In endpoint you should call fetching posts like this: $query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)) with proper offset passed in params, render html template and return it.
I am working on an acceptence test to see if I can go from homepage to categories however no matter what I try I does see the link but I can't click it.
<?php
$I = new AcceptanceTester($scenario);
$I->wantTo('I click category');
$I->amOnPage('/');
$I->seeLink('Categories', '/categories');
$I->click('category');
?>
The HTML:
<div class="col s12 m4">
<a href="/categories" >
<div class="card">
<div class="card-content">
<div class="teal-text center-align" name="category">
Categories
</div>
</div>
</div>
</a>
</div>
</div>
I don't know if Codeception is looking for the 'name' attribute of html tag. Rather than this, you should try other ways of use of click method: http://codeception.com/docs/03-AcceptanceTests#Click
Also you can try this:
$I->click(['name' => 'category']);
I'm having this piece of code in my Laravel's Blade view:
#foreach ($questions as $question)
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
#if(isset($question->task))
<h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4>
#endif
<blockquote >
<a class="nostyle" href="{{URL::action('showQuestion',$question->id)}}" ><p
#if($question->status==1)
class="text-success"
#endif
>{{$question->text}}</p></a>
<footer>Gevraagd door <strong>{{$question->Author->getFullName('mij') }}</strong> op <strong>{{DateConverter::dateToString($question->created_at)}}</strong></footer>
#if($question->status==1)
<span class="label label-success">Beantwoord</span>
#endif
</blockquote>
</div>
#endforeach
Showing all the questions. I want them to be displayed in nice rows of 3. However, some texts ($question->text) are longer than others, therefore they won't always perfectly start a new row, but append to the shortest previous grid, as you can see in the screenshot.
What I want would be more like a table, three columns, and then a new row on the same height with three new items.
So I'm looking for a way to
either return all the columns the same height
or automatically adding and closing a row div after each three columns.
What would be the best way to do this?
You may try something like this:
#foreach(array_chunk($questions->all(), 3) as $threeQuestions)
<div class="row">
#foreach($threeQuestions as $question)
// Do everything here
#if(isset($question->task))
<h4> <span class='glyphicon glyphicon-file'></span> {{$question->Task->name}}</h4>
#endif
// ...
#endforeach
</div>
#endforeach
Here, $threeQuestions contains three items per iteration, so .row will keep each three items within a div like this:
<div class='row'>
item-1
item-2
item-3
</div>
<div class='row'>
item-4
item-5
item-6
</div>