We Keep Coding

Unset img src if no url is provided vue.js

I'm learning vue.js
I'm testing how it works with ajax and the wp rest api, I'm creating a custom panel theme and I want to show the content on the right side of the screen in a scrollable panel and the pages on the left side of . the screen without the possibility to scroll.
I'm able to display the content of the posts and pages, I'm getting also the featured image, and I placed it inside an <img> tag. I need to understand how to tell vue.js that if there isn't any url data to show the featured image, the src of the image element needs to be unset. Is this possible ?
<?php get_header(); ?>
<div class="container-fluid content-wrapper" style="overflow:hidden;height:100vh;">
<div class="row" id="app" style="margin:2em 0 2em 0;">
<!-- Sidebar Top Area -->
<div class="col-sm-12 col-md-4 col-lg-4" id="navPanel" style="padding:2em;">
<?php $links = new WP_Query( array('post_type' => 'page', 'posts_per_page' => -1) ); ?>
<?php if( $links->have_posts() ): while( $links->have_posts() ): $links->the_post(); ?>
<h1 class="home-claim" style="font-size:2em;">
<a class="" href="#" v-on:click.prevent="getContent(<?php echo get_the_ID(); ?>)" ><?php the_title(); ?></a>
</h1>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
<!-- Post/Pages Content -->
<div class="col-sm-12 col-md-8 col-lg-8" id="contentPanel" style="padding:0 0 2em 0;overflow:auto;height:100vh;">
<!-- Image here -->
<img class="img-fluid w-100" v-if="featuredImage" v-bind:src="featuredImage" />
<div class="" id="" v-html="content"></div>
</div>
<!-- Sidebar Bottom Area -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
(function($){
$(document).ready(function(){
var app = new Vue({
el: '#app',
data: {
content: null,
featuredImage: null,
},
mounted: function(){
},
methods: {
getContent: function(id){
console.log('method Fired!');
var self = this;
console.log(id);
var url = 'wp-json/wp/v2/pages/'+id+'?_embed';
$.getJSON( url, function(data){
console.log(data);
self.content = data.content.rendered;
self.featuredImage = data._embedded["wp:featuredmedia"][0].source_url;
//console.log(data._embedded["wp:featuredmedia"][0].source_url);
//console.log(data.content.rendered);
});
}
}
});
}); // doc ready
}(jQuery));
</script>
<?php get_footer(); ?>
I've also noticed that only for a page I have, the wp api will return a 401 code for the featured image.
Any help will be appreciated.

Unset the featuredImage before doing the load:
(function($){
$(document).ready(function(){
var app = new Vue({
methods: {
getContent: function(id){
var self = this;
// unset the image before you are loading.
// this way it will also unset when the loading fails.
self.featuredImage = null;
var url = 'wp-json/wp/v2/pages/'+id+'?_embed';
$.getJSON( url, function(data){
self.featuredImage = data._embedded["wp:featuredmedia"][0].source_url;
});
}
}
});
});
}(jQuery));

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. :)

slick setting active slide

I have implemented slick (http://kenwheeler.github.io/slick/) and everything is fine except the first slide is the first image shown rather than the one clicked on from the list of images, say image 5, image 1 would be displayed. I am using PHP to try and automate the process.
The col-sm-4 while loop displays all the images on the page, then when clicked a modal with the slick will popup and display the images inside the modal. As I said this process works fine, except the position of the image that is clicked. For eg, I click image 6 from the col-sm-4 list of images, but image 1 is displayed.
I would appreciate any assistance from the community. Thanks
**UPdate .. add a data/var and counter menuid to each div, I am just not sure how to access it in the Slick JS initialSlide option shown below: **
<div class="row">
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery);
while ($row = mysqli_fetch_array($value))
{ ?>
<div class='col-sm-4'>
<a title='<?php echo($row[0]); ?> href='#'>
<img class='thumbnail img-responsive images' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
<p class='images text-center'><?php echo($row[0]); ?></p>
<p id="demo"></p>
</a>
</div>
<?php } ?>
<div class='modal' id='modal-gallery' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' type='button' data-dismiss='modal'>×</button>
<h3 class='modal-title text-center'></h3>
</div>
<div class='modal-body'>
<div id='modal-carousel' class='text-center'>
<div class='your-content'>
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery); $counter = 0;
while ($row = mysqli_fetch_array($value))
{ ?>
<div id="menulist" data-menuid="<?php echo $counter++; ?>">
<h1>'<?php echo($row[0]); ?>'</h1>
<img class='modal-thumbnail' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
</div>
<?php } ?>
</div>
</div>
<div class='modal-footer'>
<button class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/slick/slick/slick.js"></script>
<script>
$('.thumbnail').click(function(){
$("#modal-gallery").modal("show");//.modal('show')/.modal('hide');
});
var menulist = $("#menulist");
var menuid = menulist.data("menuid");
$( "#menulist" ).click(function() {
var myId = $( "#menulist" ).data("menuid");
$( "#menulist" ).attr("menuid", myId);
});
$(document).ready(function(){
$('.your-content').slick({
/* lazyLoad: 'ondemand', */
/* centerMode: true, */
dots: true,
/* infinite: true, */
speed: 500,
fade: true,
adaptiveHeight: true,
focusOnSelect: true,
cssEase: 'linear',
/* initialSlide: 1, */
setPosition: 1,
/* slickGoTo: 8, */
initialSlide: menuid
});
});
</script>

Passing custom field content to fancybox title/custom area

My goal is to use ACF plugin to pass custom content to fancybox title area.
I load fancybox when there is images to display.
Currently i have this code to start with. How can i use ACF fields with fancybox so that every image gets its own custom field content?
For example output a link inside customHTML and a custom title using $color_desc .
Thanks!
<?php if (get_field('c_i')) { ?>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.js"></script>
<script src="<?php echo THEME_BASEURL?>/js/jquery.fancybox.pack.js"></script>
<link href="<?php echo THEME_BASEURL?>/js/jquery.fancybox.css" rel="stylesheet">
<script type="text/javascript">
$(".fancybox").fancybox({
openEffect: "fade",
nextEffect: "fade",
prevEffect: "fade",
padding: 0,
helpers: {
title: {
type: 'inside'
}
},
beforeShow: function () {
var customContent = "<div class='customHTML'>My custom content</div>";
this.title = this.title ? this.title + customContent : customContent;
},
afterShow: function () {
$(".fancybox-outer").after($(".fancybox-title"));
}
});
</script>
<div class="color_img">
<ul>
<?php
if( have_rows('c_i') ):
while ( have_rows('c_i') ) : the_row();
$image = get_sub_field('c_if');
$color_desc = get_sub_field('c_d');
$image_url = $image['sizes']['colors'];
$image_url_larger = $image['sizes']['large'];
?>
<li>
<a class="fancybox" rel="gallery01" href="<?php echo $image_url_larger; ?>"><img src="<?php echo $image_url; ?>"></a>
<div><?php echo $color_desc; ?></div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>
</div>
<?php } ?>

Dynamically load an image inside modal

Below is my code. I am attempting to load a picture in a modal. The picture exists on the page and I am able to get the source. Is there a way to simply load the image into a modal on click as I am trying to do here? I am able to click on an image and ALERT out the source; but when I try to plug the source into the function; nothing happens.
I am using ZEND but I do not believe that is relevant to the situation at hand and so I did not tag the question with the ZEND tag.
Can anyone explain what I need to do in order to load my image in a MODAL on click?
<?php
$this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css'));
$this->jQuery()->onLoadCapturestart();
?>
<!-- Modal Done Here -->
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
alert(pic1);
$(pic1).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
<?php $this->jQuery()->onLoadCaptureEnd(); ?>
<div id="designGroup">
<div id="title">
<?php echo strtoupper($this->object->GetType()); ?>
</div>
<div id="boxText">
<?php echo $this->object->GetDescription(); ?>
</div>
<?php $links = $this->object->GetLinks(); ?>
<div id="pictureBox">
<ul id="grid">
<li>
<a href="#">
<img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>

This is how to build a variable that holds my IMG.
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
The below is the now fixed and complete JSCRIPT -
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
$(catIMG).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
I was able to find this information here https://stackoverflow.com/a/10788966/1583066