We Keep Coding

Items in slick slider are not rendered properly

I have a problem with Slick Slider (js) that is loading the clones of the slides right after the original, so that slide and its clone are shown one after the other (see img).
This is how I initialize the slider on $(document).ready():
$('.carousel').slick({
dots: false,
infinite: true,
speed: 600,
slidesToShow: 2,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="mdi mdi-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="mdi mdi-chevron-right"></i></div>'
})
The html code for slides is called via php.
Edit:
#EdLucas this is the HTML code:
$html = '<div class="carousel" id="'.$client.'">';
$html .= '<div class="prod" id="'.$id.'">
<a href="'.$offerUrl.'" class="'.$id.'" data-lbc="'.$data.'" onclick="filterClick(event)">
<figure class="prod-image">
<img src="'.$imgUrl['newurl'].'" width="'.$imgUrl['dim'].'" height="'.$imgUrl['dim'].'" loading="lazy" />';
if($fprice != null && $fprice > $price):
$html .= '<span class="discount">'.-floor(100 - $price/$fprice * 100) .'&percnt;</span>';
endif;
$html .=
$html .= '</figure>
<div class="prod-meta">
<span>'.$name.'</span>
<span class="price">'.$offer->price.$currency.'</span>
<h4>'.$title.'</h4>
</div>
</a>
</div>
</div>';

I am using Owl Carousel - Filter on projects as per category so i want to show the category description on every category button click

I have category table field and project table field in db i am fetching data or project as per category ID and showing them using php codedigniter in Owl Carousel - Filter Javascript.
below are the detail mention. include image view.
What actually i want i am trying to show the category detail under the projects on category button click
I assign the same class to the category button and the project by concatenating the category Id and projects category Id. So when we click on button the projects having same button class are appear perfectly but it not showing the category detail while click on specific category button click. for more information i am attaching my code as well. please have look. and help me. if you understand the problem.
my PHP Codeigniter Code is:
<div style="margin-bottom:10px; text-align: center;">
<div class="btn-filter-wrap">
<button class="btn-filter" data-filter="*">All</button>
<?php $categorydetail = ""; ?>
<?php if (!empty($categorydata)) { foreach ($categorydata as $category) {
$categoryclass = "category".($category['id']);
$categoryname = ($category['shortname']);
$categorydetail = ($category['detail']);
?>
<button class="btn-filter" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>
<?php }} ?>
</div>
<div class="project-slick categories">
<?php if (!empty($projectdata)) { foreach ($projectdata as $project) {
$projectclass = "category".($project['categoryid']);
$title = ($project['title']);
$detail = ($project['detail']);
$image = ($project['userfile']);
?>
<div class="item view view-eighth <?php echo $projectclass; ?>">
<img class="img-responsive" src="<?php echo base_url('fassets/images/projects/'. $image);?>" />
<div class="mask">
<h2><?= $title ?></h2>
<div><?php echo (strlen($project['detail'])>50)?(substr($project['detail'],0,200).'...'):$project['detail']; ?></div>
<a class="info ajax projects" href="<?php echo base_url("maincontroller/pdetail/".$project['id']);?>" >In Large</a>
</div>
</div>
<dir id="catdetail"><?= $categorydetail;?></dir>
<?php }} ?>
</div>
</div>
this is my javascript code is:
$(function() {
var owl = $('.categories').owlCarousel({
rel: 'gal',
width: "100%",
initialWidth: "0",
initialHeight: "0",
height:"100%",
// loop :false,
// margin :10,
// nav :false,
previous: "<i class='fa fa-chevron-left'></i>",
next: "<i class='fa fa-chevron-right'></i>",
close: "<i class='fa fa-times'></i>",
current: "",
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
})
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
var filter_data = $(this).data('filter');
/* return if current */
if($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
owl.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})

i solved this problem by creating javascript function
JS Func
function cat_detail(str) {
document.getElementById("cat_detail").innerHTML = str;
// alert(str);
}
After that i call event click on button and pass the string to the function.
<button class="btn-filter" onclick="cat_detail('<?= $categorydetail ?>')" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>
and create a div with ID "cat_detail" which display the detail. :)

Want to change color of post<h1> title if it has no featured image set for that post

So on my wordpress blog and most other wordpress blogs, you can set a featured image. If you don't set a featured image I have it default to a background image that says "new update" however the default background image i have set is much less eye grabbing than the custom ones made for the post.
To solve the issue of posts with custom featured images getting more attention that those that have the default image - I would like to make it so all blog post titles with posts that do not have a featured image to change their color code.
For example something like..
My pseudo code: - I'm don't know jquery/javascript very well but I could probably figure out the basic javascript to make it work.
IF
('post > featured-image') = 'NONE';
THEN ('.post-list h1.entry-title a') = 'RED';
ELSE ('.post-list h1.entry-title a') = 'DEFAULT';
But that being said how would i even reference the POST not having a FEATURED IMAGE in wordpress via jquery or some function? I am open to any solutions!
Thanks so much for any help!

From the code you supplied your theme is already checking for the presence of a thumbnail on your posts using the wordpress function has_post_thumbnail. We can leverage this existing if:else statement to change a string value that we will apply to our h1 tags. You can find the string value under the variable $header_class_name.
First we default the value to "has-thumbnail" (Line 18)
Then we override the default to "no-thumbnail" in the event that the post has no thumbnail (Line 33)
Lastly, we apply the class to the h1 tag (Line 72)
PHP CODE
<?php
/**
* The template part for displaying content.
*
* #package azera-shop
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( apply_filters( 'azera_shop_content_post_class_filter','border-bottom-hover' ) ); ?> itemtype="http://schema.org/BlogPosting" itemtype="http://schema.org/BlogPosting">
<header class="entry-header">
<div class="post-img-wrap">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php
// default the $header_class_name to 'has-thumbnail'
$header_class_name = 'has-thumbnail';
if ( has_post_thumbnail() ) {
?>
<?php
$image_id = get_post_thumbnail_id();
$image_url_big = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-big', true );
$image_url_mobile = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-mobile', true );
?>
<picture itemscope itemprop="image">
<source media="(max-width: 600px)" srcset="<?php echo esc_url( $image_url_mobile[0] ); ?>">
<img src="<?php echo esc_url( $image_url_big[0] ); ?>" alt="<?php the_title_attribute(); ?>">
</picture>
<?php
} else {
// override the default $header_class_name in the case that there is no thumbnail
$header_class_name = 'no-thumbnail';
?>
<picture itemscope itemprop="image">
<source media="(max-width: 600px)" srcset="<?php echo azera_shop_get_file( '/images/no-thumbnail-mobile.jpg' );?> ">
<img src="<?php echo azera_shop_get_file( '/images/no-thumbnail.jpg' ); ?>" alt="<?php the_title_attribute(); ?>">
</picture>
<?php } ?>
</a>
<?php azera_shop_post_date_index_box_trigger(); ?>
</div>
<div class="entry-meta list-post-entry-meta">
<?php azera_shop_content_entry_meta_top_trigger(); ?>
<span itemscope itemprop="author" itemtype="http://schema.org/Person" class="entry-author post-author">
<span itemprop="name" class="entry-author author vcard">
<i class="fa fa-user" aria-hidden="true"></i><a itemprop="url" class="url fn n" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author"><?php the_author(); ?> </a>
</span>
</span>
<span class="posted-in entry-terms-categories">
<i class="fa fa-folder-open-o" aria-hidden="true"></i><?php _e( 'Posted in','azera-shop' ); ?>
<?php
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( esc_html__( ', ', 'azera-shop' ) );
$pos = strpos( $categories_list, ',' );
if ( $pos ) {
echo substr( $categories_list, 0, $pos );
} else {
echo $categories_list;
}
?>
</span>
<a href="<?php comments_link(); ?>" class="post-comments">
<i class="fa fa-comment-o" aria-hidden="true"></i><?php comments_number( esc_html__( 'No comments','azera-shop' ), esc_html__( 'One comment','azera-shop' ), esc_html__( '% comments','azera-shop' ) ); ?>
</a>
</div><!-- .entry-meta -->
<?php
// add the $header_class_name value to the h1 (PS consider using a similarly styled h2)
the_title( sprintf( '<h1 class="entry-title '.$header_class_name.'" itemprop="headline">', esc_url( get_permalink() ) ), '</h1>' ); ?>
<?php echo apply_filters( 'azera_shop_header_underline','<div class="colored-line-left"></div><div class="clearfix"></div>' ); ?>
</header><!-- .entry-header -->
<div itemprop="description" class="entry-content entry-summary">
<?php
$ismore = strpos( $post->post_content, '<!--more-->' );
if ( $ismore ) : the_content( sprintf( esc_html__( 'Read more %s …','azera-shop' ), '<span class="screen-reader-text">' . esc_html__( 'about ', 'azera-shop' ) . esc_html( get_the_title() ) . '</span>' ) );
else : the_excerpt();
endif;
?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'azera-shop' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
CSS
article header h1.no-thumbnail{
color:red;
}
You can then apply CSS by referencing either class name

on your single.php file, or the page you use to display the single blog post you need to to an if statement check if the post have a thumbnail then if it does printout the style, or else let the default style will take place
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
echo "<style type=\"text/css\">";
echo ".post-list h1.entry-title a{
color: red !important ; /*any color of your choice*/;
}
</style>";
}
else {
// Default style will take place
}
?>
Make sure that you add thumbnail support on your functions.php file.
To add thumbnail support on your functions.php just add add_theme_support( 'post-thumbnails' );

Replace this line
<header class="entry-header">
with
<header class="entry-header <?= has_post_thumbnail() ? 'my-hasfeatured-img' : '' ?>">
and then add CSS rule in style.css like:
.my-hasfeatured-img h1{
//your code
}
Hope this helps!

replacing link text text for mobile

This code creates my back/next links for my Wordpress website.
function.php
" class="">
<?php if ( is_single() ) : // navigation links for single posts ?>
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x( get_next_post()->post_title, 'Previous post link', 'bnNav' ) ); ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', _x( get_previous_post()->post_title, 'Next post link', 'bnNav' ). '<span class="fa fa-chevron-up icn"></span>'); ?>
...
html (output)
<div class="navigation">
<div class="nav-previous"> ... </div>
<div class="nav-next"> ... </div>
</div>
This creates a link for both the next and previous post. It outputs the title of the link in the div aswell with 'get_next_post()->post_title'.
When on mobile I want to change what the links say to just 'back' and 'next'

If your themes running with bootstrap, then you're best to use their helper classes for this sort of thing.
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x( get_next_post()->post_title, '<span class="hidden-sm hidden-xs">Previous post link</span><span class="hidden-xl hidden-lg hidden-md">Prev</span>', 'bnNav' ) ); ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', _x( get_previous_post()->post_title, '<span class="hidden-sm hidden-xs">Next post link</span><span class="hidden-xl hidden-lg hidden-md">Next</span>', 'bnNav' ). '<span class="fa fa-chevron-up icn"></span>'); ?>

Do you know about css media queries?
One easy way to do this is using css media queries. You can do some like this:
<?php if ( is_single() ) : // navigation links for single posts ?>
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="fa fa-chevron-up icn"></span>' . _x( get_next_post()->post_title, '<span class="desktop">Previous post link</span><span class="mobile">back</span>', 'bnNav' ) ); ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', _x( get_previous_post()->post_title, '<span class="desktop">Next post link</span><span class="mobile">next</span>', 'bnNav' ). '<span class="fa fa-chevron-up icn"></span>'); ?>
...
And in your css, you put some like this:
#media screen and (min-width: 680px) {
.mobile {
display: none !important;
}
.desktop {
display: block !important;
}
}
#media screen and (max-width: 680px) {
.mobile {
display: block !important;
}
.desktop {
display: none !important;
}
}
Note: I define 680px the min width to be considered a mobile. You will have to define this number according to your needs.

Bootstrap navigation not working in php - arrows show but no action

I have a php that looks like this
<?php
echo "<html><head><meta charset='utf-8'>";
echo "<script type='text/javascript' src='scripts/bootstrap.js'></script>";
echo "<script type='text/javascript' src='scripts/jquery_latest.js'></script>";
echo "<link rel='stylesheet' type='text/css' href='css/style.css'>";
echo "<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>";
//echo "<script type='text/javascript' src='scripts/gallery.js'> - other gallery
echo "<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>";
echo" <title>Gallery Display</title></head><body>";
echo "<div id ='wrapper'>";
echo "<header>";
echo "<h1>The Ultimate Gallery Compiler</h1>";
echo "<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>";
echo "</header>";
echo "<div id='content'>";
echo "<h2>Browse Gallery</h2>";
$subfolder = $_POST["category"];
$text = $_POST["category_text"];
if ($subfolder == "0"){
echo("Please <a href='gallery.html'>go back</a> and select a category");
echo "</div><br><br>";
echo "<footer>";
echo "<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>";
echo "</footer>";
echo "</div>";
exit();
}
$countcontents = file_get_contents("categories.txt"); //read file to get count
$countarray = explode('*', $countcontents); //get count of each category into an array
//get array using array_push
$folders = glob('images/*');
$categories= array();
foreach($folders as $folder) {
$folder = pathinfo($folder);
array_push($categories, $folder["filename"]);
}
//output title according to if the gallery has images in it or not
for($i=0; $i< count($countarray); $i++)
{
if ($subfolder == $categories[$i]){
if (intval($countarray[$i]) == 0) {
echo "<h3>No images have been uploaded for the " .$text. " category yet</h3>";
}
else
{
echo "<h3>Here are the images for the " .$text. " category</h3>";
echo "<p>There are ".$countarray[$i]." photos in this category</p><br>";
}
}
}
$folder = "images/".$subfolder."/";
// Open the appropriate subfolder, and display its contents.
if ($dir = opendir($folder)) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($dir);
}
$count=0;
$class= '';
echo'<div id="myCarousel" class="carousel slide">';
// <!-- Carousel items -->
foreach($images as $image) {
$count++;
if ( $count == 1 ){ $class = 'active ';}
else{ $class='';}
echo'<div class="carousel-inner">';
echo"<div class='".$class."item'>";
echo "<img src='".$folder.$image. "'</img></div>";
echo '</div>';
}
//<!-- Carousel nav -->
echo'<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo'<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
echo '</div>';
echo '<ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol>';
echo"<br><br>";
echo "<p>&nbsp</p><a href='gallery.html'>Reselect</a>";
echo "</div>";
echo "<footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer>";
echo "</div>";
echo "</body></html>";
?>
As you can see bootstrap (min) is included, along with the combined css and jquery 11.3. the bootstrapgallery.js is a function that i took from a fiddle
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slide', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
I have the link being tested out here. The first image shows but neither the arrows or the buttons work. I feel like i must be missing something blatantly obvious, but the code is the same as my fiddle so i don't understand!
Help! Thanks :) And Merry Christmas hohoho
EDIT:
this is my source:
<!doctype html>
<html><head><meta charset='utf-8'>
<script type='text/javascript' src='scripts/jquery_latest.js'></script>
<script type='text/javascript' src='scripts/bootstrap.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>
<!---echo "<script type='text/javascript' src='scripts/gallery.js'>-->
<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>
<title>Gallery Display</title></head><body>
<div id ='wrapper'>
<header>
<h1>The Ultimate Gallery Compiler</h1>
<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>"</header>
<div id='content'>
<h2>Browse Gallery</h2>
<h3>Here are the images for the Fashion/Lifestyle category</h3><p>There are 9 photos in this category</p><br><div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class='active item'><img src='images/1/dress3_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/after_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/partydress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151219.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/shoesforwedding_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/pyjamas_20151215.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/interviewdress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151221.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/jacket_20151213.jpg'</img></div></div><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div><ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol><br><br><p>&nbsp</p><a href='gallery.html'>Reselect</a></div><footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer></div></body></html>

Your HTML structure should look like below, but you have a carousel-inner class wrapping each item in your HTML loop, which should not be.
Should be like this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="" alt=""/>
</div>
<div class="item">
<img src="" alt=""/>
</div>
</div>
</div>
Yours looks like this:
<div id="myCarousel" class="carousel slide">
<div class="item">
<img src="" <="" img="">
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
</div>