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-->
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 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");
Im new to symfony3 and I need a bit of help,I have a timeline page that contains posts and every post has a comment field so in order to do that I've installed the FOSCommentBundle following all the steps in this documentation https://github.com/FriendsOfSymfony/FOSCommentBundle/blob/master/Resources/doc/index.md and then I integrated it with the FOSUserBundle, and I did the following changes in the async.html.twig file :
<div id="fos_comment_thread">#comments</div>
<script type="text/javascript">
// thread id
var fos_comment_thread_id = 'pub';
// api base url to use for initial requests
var fos_comment_thread_api_base_url = 'localhost/Outdoors5/web/app_dev.php/threads';
// Snippet for asynchronously loading the comments
(function() {
var fos_comment_script = document.createElement('script');
fos_comment_script.async = true;
fos_comment_script.src = '{{ asset('bundles/foscomment/js/comments.js') }}';
fos_comment_script.type = 'text/javascript';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(fos_comment_script);
})();
</script>
but in the end I got very confused on how I use this ,I passed hours trying to understand and searching for tuto, but no luck.
this is my view
<section id="timeline">
{% for publication in publications %}
<div id="result"></div>
<div class="page-content page-app page-profil " >
<div class="profil-content">
<div class="row">
<div class="row">
<div class="item item-comment">
<div class="user">
<h5 class="name">{{ publication.idProfil.nom }}</h5>
<div class="clearfix">
<p class="time">{% if publication.dateCreation %}{{ publication.dateCreation|date('Y-m-d') }}{% endif %}</p>
</div>
<div class="comment">
<p class="c-primary m-b-0"><strong>{{ publication.texte }}</strong></p>
</div>
</div>
<div class="more">
<div class="row">
<div class="col-sm-4 like">
<i class="fa fa-heart"></i> Like
</div>
<div class="col-sm-4 more-comments">
<div class="comment-number">
<i class="icon-bubble"></i> Comments<span class="pull-right badge badge-dark">3</span>
</div>
</div>
<div class="col-sm-4 more-share">
<i class="icon-share"></i> Share
</div>
</div>
<div class="row comments">
<div class="col-sm-12">
<ul>
<li class="clearfix">
<div class="clearfix">
<div class="info">
<div class="name"><strong class="primary-font"></strong></div>
<div class="date"></div>
</div>
<p>
comment 1
</p>
</div>
</li>
<li></li>
</ul>
</div>
</div>
<div class="row share">
<div class="share-facebook">
<i class="fa fa-facebook"></i>
</div>
<div class="share-twitter">
<i class="fa fa-twitter"></i>
</div>
<div class="share-google">
<i class="fa fa-google-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</section>
Could you point me to the right direction?
thank you
There is no need to modify async.html.twig. You just need to add the following code in your twig view:
{% include 'FOSCommentBundle:Thread:async.html.twig' with {'id': 'foo'} %}
To sum up, after doing the following steps:
Step 1: Setting up the bundle
Step 2: Create your Comment and Thread classes
Step 3: Import FOSCommentBundle routing
Step 4: Enable comments on a page
For the FOSUserBundle integration you just have to extend the Comment class as explained in Step 6: Integration with FOSUserBundle
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 have been struggling with a problem for a while now. I've made a simple html gallery using CSS and a # href to essentially swap out different div ID's containing gallery images. The problem is that when you select the "next" or "previous" buttons in the gallery it jumps the page up in the browser so the gallery is aligned at the top of the page. Does anybody have any ideas how to prevent this?
Here is what the code for the gallery looks like:
<div id="pic1">
<img src="click/pic1.jpg" alt="" />
<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
</div>
<div id="pic2">
<img src="click/pic2.jpg" alt="" />
<a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"> <b>Next</b></a>
</div>
<div id="pic3">
<img src="click/pic3.jpg" alt="" />
<a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
</div>
<div id="pic4">
<img src="click/pic4.jpg" alt="" />
<a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"> <b>Next</b></a>
</div>
<div id="pic5">
<img src="click/pic5.jpg" alt="" />
<a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
</div>
<div id="pic6">
<img src="click/pic6.jpg" alt="" />
<a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
</div>
<div id="pic7">
<img src="click/pic7.jpg" alt="" />
<a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
</div>
<div id="pic8">
<img src="click/pic8.jpg" alt="" />
<a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
</div>
<div id="pic9">
<img src="click/pic9.jpg" alt="" />
<a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
</div>
<div id="pic10">
<img src="click/pic10.jpg" alt="" />
<a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"> <b>Next</b></a>
</div>
Any help would be greatly appreciated!
Instead of linking to #, link to javascript:void(0);
<a class="previous" href="javascript:void(0);">Next</a>
Or, prevent the default event with Javascript
$("a.previous, a.next").on("click", function(e) {
e.preventDefault();
});
You will need to use JQuery after you set
<a class="previous" href="javascript:void(0);">Next</a>
then call the JS:
$(document).ready(function(){
$('a.previous').click(function(e){
var picID= parseInt($(this).parent().attr("id").substr(3));//gets the pic id count
$("#pic"+(picID)).hide(); //hide the current div
$("#pic"+(picID-1)).show(); //show the previous div
});
$('a.next').click(function(e){
var picID= parseInt($(this).parent().attr("id").substr(3)); //gets the pic id count
$("#pic"+(picID)).hide(); //hide the current div
$("#pic"+(picID+1)).show(); //show the previous div
});
});
see: http://jsfiddle.net/uZ6g5/