I am trying to style the post in the loop in alternate styling using Custom Content Short code plugin. Some what like this.
Example image of post styling using bootstrap col-offset
This is what i'm trying
<?php start_short(); ?>
[loop type=service orderby=date order=ASC]
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
[/loop]
<?php end_short(); ?>
What I want to display is:
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
How can I achieve this?
The above code was generating a loop of post in WordPress with single class of col-md-offset-7 to every post.
What I did was use jQuery even function to delete class from alternate post.
$("div.service-post:even").removeClass("col-md-offset-7");
Related
So I'm struggling to format an accordian in bootstrap 4 which I'm using alongside django
The basic issue with my formatting is illustrated in the picture below. The headline in the text is spilling over to outside the column of the accordian. I feel like this should be a simple fix but I can't figure it out. Code pasted below
<div class='col-xs-12 col-md-4'>
<h3> ATP tennis </h3>
<hr/>
<div id="accordion">
{% for obj in tennis %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="first1 btn btn-link collapsed newwrap" data-toggle="collapse"
data-artid="{{obj.id}}" data-target="#tnis_{{ obj.id }}" aria-expanded="false"
aria-controls="tnis_{{ obj.id }}">
{{obj.headline}}
</button>
</h5>
</div>
<div id="tnis_{{ obj.id }}" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body body_pad"><a href='{{obj.url}}' target="_blank" class='body_col'>
{{obj.summary}} </a><br>
<div class="rght3">
<i id="{{obj.id}}" class="likes fa fa-thumbs-up" data-artid="{{obj.id}}" style="font-size:25px;color:#6666ff;"></i>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I feel like this should in theory be a pretty simple fix. Any help would be much appreciated. The {{obj.headline}} is the culprit that is spilling over (which sits within a button tag)
I've created a pods template for my pods archive and I use a shortcode inside of a new wordpress page for diplaying it. I'de like to display a pagination but when I use pagination=”true” pagination_type=”advanced” nothing happend. Can you please tell me what's wrong ?
Here my shortcode :
[pods name="seminaire2" orderby="ezdatedebut asc" template="archive_template_seminaire" limit="5" where="t.post_status in('publish')" pagination=”true” pagination_type=”advanced” ]
My pods template :
<div class="portfolio oceans terres atmosphere" style="display: inline-block;" data-bound="">
<div class="item_paysage">
<a class="item_link" a href="?p={#ID}">
<div class="vignette">
[if ezvignette ]
<img class="img-fluid " src="{#ezvignette._src}" alt="event_img" />
[else]
<div class="substitute_img fa fa-users"></div>
[/if]
<!--<img class="masque" src="http://wordpress.localhost/wp-content/themes/ipsltheme/ipsl/img/masque_paysage.png" alt="Masque IPSL"> -->
<img class="masque noprint" src='[masque name="portrait"]' alt="Marque IPSL">
</div>
</a>
<figcaption>
<div class="img_title">{#post_title}</div>
<div class="propos_img">{#ezdescription} </div>
</figcaption>
<button class="btn nuance-1"><span class="btn_title">Voir + </span></button>
<!--<button class="btn nuance-1"><i class="fa ipsl_sphere"></i><span class="btn_action">Site dédié</span></button>-->
</div>
</div>
<!--FIN PORTFOLIO ITEM-->
I have the following code in my node/express file:
{{#each allimages}}
<div class="col m3 14">
<div class="card hoverable">
<div class="card-image">
<a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
<img src="/uploads/{{imageName}}">
</a>
</div>
<div class="card-action2 right-align">
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light red">
<i class="material-icons">delete</i>
</button>
</form>
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light blue">
<i class="material-icons">edit</i>
</button>
</form>
</div>
</div>
</div>
{{/each}}
I can see my delete button in red but when I click on it it does not delete the file. When I am using and type is set to submit it works perfectly with my route and deletes the file. How can I use the materialize css delete style to submit my delete request form?
Thanks guys for any help!
You need to make it a button, not an anchor. You can just add the relevant class definitions to use the styles of a Materialize button:
<div class="card-action2 right-align">
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light red">
<i class="material-icons">delete</i>
</button>
</form>
<a href="2.html">
<i class="material-icons blue-grey-text">edit</i>
</a>
</div>
I'm trying to create a view where I show the bootstrap thumbnails on the same line, I've tried different methods and I'm showing thumbnails type list.
Here is my method in the controller:
public function show($id)
{
$properties = Property::find($id);
$files = File::where('property_id', $properties->id)->get();
return view('properties.show', compact('properties', 'files'));
}
This is my method in the view:
#foreach($properties->files as $index=>$file)
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
</div>
#endforeach
This way they are showing the images as thumbnails:
This should be the right way:
Can someone guide me to correct this small inconvenience?
You should loop inside your .row. The foreach method just repeats every code inside of it. So it was repeating <div class="row">...</div> every single time.
<div class="row">
#foreach($property->files as $index => $file)
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>
i got a template site when i bought a package and it has a built in chat function, however you need to press a "send" button each time to send chat messages, this is the script used, i guess it is kinda easy to do it but in not good at scripting :/
<div class="col-lg-4 border-left affix-items scrollbar" id="room-items">
<div id="dropboxy">
<?php
?>
</div>
</div>
<div class="col-lg-6 affix-players" style="padding:10px;">
<div id="playersdropboxy">
<?php include_once("players.php"); ?>
</div>
<div id="affix-players" class="scrollbar">
<div id="rooms"></div> </div> </div> <div class="col-lg-5 affix-right">
<div class="col-xs-24 chat"> <div class="row chat-container">
<div class="row chat-buttons"> <div class="col-xs-24"> <div class="media-body"> <div class="input-group">
<input type="text" class="form-control chat-message" id="text-massage" style="margin-left:6px;" maxlength="300"> <span class="input-group-btn">
<?php if(isset($_SESSION['steamid'])) { ?>
<button class="btn btn-primary" type="submit" data-loading-text="<i class='fa fa-spinner fa-spin'></i> WAIT..." id="send_massage" style="margin-right:6px;">SEND</button>
<div class="sml-bnt" id="smile"></div>
<? }
else { ?>
<form method="get" action="index.php"><input type="hidden" name="login" value=""/><input type="submit" class="btn btn-primary" value="Log in to chat" style="margin-right:6px;"/></form>
<?php }
?>
</span> </div> </div> </div> </div>
<div class="col-xs-24 messages messages-img" style="width:250px;">
<?php if(isadmin($_SESSION['steamid'])){
echo'Admin tools: [clear chat], [turn '. (chaton() ? 'off' : 'on').']';
} ?>
<? include ('mini-chat.php'); ?>
</div> </div>
</div>
<div id="raffle"><div class="col-xs-24 raffle"> <div class="cont"> <div class="circle"> <img id="raffle-img"> </div> <h4 class="name" id="raffle-name"></h4>
<h4 id="countdown-raffle-timer" data-countdown="2020-08-08"></h4>
<a class="btn btn-default" href="?login">LOG IN</a> </div> </div> </div> </div> </div>
Try change method="get" to method="post"