I am checking if there is a Thumbnail image in a blog post using has_post_thumbnail(), if no thumbnail image, a JavaScript script function is called to change the layout of .blog-post to display from flex to block.
To do this: I am using a JavaScript function with the conditional statement. Like below:
content.php
<div class="blog-post">
<?php /* POST FEATURED THUMBNAIL*/
if(has_post_thumbnail()) { ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('feature-image'); ?>
</div>
<?php } else { ?>
<script type="text/javascript"> alert("asdsas"); xfullWidthPostWithThumbnail(); </script>
<?php } ?>
<article class="post-article para-text">
<p id="blog-title"><?php the_title(); ?></p>
<p id="blog-info-text"><?php the_time('F jS, Y'); ?> | By <?php the_author();?> | Posted In
<?php
$categories = get_the_category();
$seperator = ", ";
$output = '';
if($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $seperator;
}
echo trim($output, $seperator);
}
?></p>
<p><?php echo get_the_excerpt(); ?> Read more ยป</p>
<p></p>
</article>
</div>
JavaScript function
/* INDEX PAGE -- ADD DISPLAY BLOCK FOR FULL WIDTH OF POST EXCERPT IF NOT POST THUMBNAIL */
function xfullWidthPostWithThumbnail() {
alert("hhhhhhhhhhhhhhhh");
jQuery(".blog-post").css("display","block !important");
jQuery(".blog-post").css("color","red !important");
}
The problem: Currently the error I am getting:
Uncaught ReferenceError: xfullWidthPostWithThumbnail is not defined
at (index):155
Why is the function not defined? Any ideas??
There is no need to use Javascript to do this - its adding unnecessary processing on the client side.
All you want to do is change the CSS for .blog-post, so create a separate CSS class, and apply it if there is no thumbnail.
Create a new CSS class for the rules you want to apply
Check if the thumbnail exists.
If it doesn't, add your new class to the div
If it does, display as normal
CSS:
Create a class called no_thumbnail to add your styles. FYI You should avoid using !important.
.blog-post.no_thumbnail{
display: block !important;
color: red !important;
}
PHP:
/* declare a variable for your extra class */
$blogpostclass = "";
/* If thumbnail doesn't exist, add your 'no_thumbnail' class */
if(!has_post_thumbnail()) $blogpostclass = "no_thumbnail"; ?>
/* add the class variable to your blog-post div */
<div class="blog-post <?php echo $blogpostclass; ?>">
/* If there is a thumbnail, add it as usual */
<?php
if(has_post_thumbnail()) { ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('feature-image'); ?>
</div>
<?php } ?>
[...]
</div>
you should do in this way
$("".blog-post"").css("display","block !important");
Related
I'm trying to display an image (thumbnail) on the left and some text (in a h3 tag) on the right.
Here's my code:
CSS
/* Create two equal columns that floats next to each other */
.techrbunrelatedarticlescolumn {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.techrbunrelatedarticlesrow:after {
content: "";
display: table;
clear: both;
}
PHP
<?php while (have_posts()) : the_post(); ?>
<?php if (has_post_thumbnail()):?>
<a href="<?php the_permalink(); ?>" rel="bookmark">
<div class="techrbunrelatedarticlesrow">
<div class="techrbunrelatedarticlescolumn" style="padding-right:10px;">
<img height="200" max-width="300" title="<?php the_title(); ?>" src="<?php the_post_thumbnail_url(); ?>">
</div>
<div class="techrbunrelatedarticlescolumn">
<h3><?php the_title(); ?></h3>
</div>
</div>
</a>
<br/>
<?php endif; ?>
<?php endwhile; ?>
This works absolutely fine normally. But, when I activate the amp plugin (which removes all the elements that are not allowed in AMP), the image starts to display above the text, which breaks the structure.
Can anyone help me figure out a way such that it works without violating the limitations of AMP?
The actual problem was that I was unaware that you can't just declare blocks anywhere you want to.. AMP just allows one style block per page. Fixed the issue by putting all the CSS under a single block!
After the user submits a form the .php file is supposed to display only certain parts of the forum depending on if cc_owner has a value of personal or something else. I have the contents to be displayed in two separate div elements one called CreditContent_ID and the other called BillContent_ID the inline css sets both div display elements to 'none'. I am trying to use php to check whether the value of cc_owner is personal or something else. If it's personal I want it to change the CreditContent_ID display to block.
I think the problem is with this line:
echo 'document.getElementById("CreditContent_ID").style.display="block"';
Here is my code:
<style>
.CreditContent{
display:none;
}
.BillContent{
display:none;
}
</style>
<body>
<?php
if($_POST['cc_owner']=='personal'){
echo '<script language="javascript">';
echo 'document.getElementById("CreditContent_ID").style.display="block"';
echo '</script>';
}else{
echo '<script language="javascript">';
echo 'document.getElementById("BillContent_ID").style.display="block"';
echo '</script>';
}
?>
<div class=CreditContent id="CreditContent_ID">
//I have other code here.
</div>
<div class=BillContent id="BillContent_ID">
//more code here
</div>
</body>
<style>
.hideContent {
display: none;
}
</style>
<body>
<div class="CreditContent <?php echo $_POST['cc_owner'] != 'personal'? 'hideContent': ''; ?>"
id="CreditContent_ID">
//I have other code here.
</div>
<div class="BillContent <?php echo $_POST['cc_owner'] == 'personal'? 'hideContent': ''; ?>"
id="BillContent_ID">
//more code here
</div>
</body>
Add css class hideContent to div based on cc_owner value.
I use a foreach loop to get some tabs with different id's. This way I get tabs with ids tab1, tab2, tab3, etc. Than, when I want to get the id of each tab using javascript, it returns only the id of the first tab and uses this for all tabs. It does not loop as php do. Why?
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div id="divid" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var dividvalue = document.getElementById('divid').innerHTML;
alert(dividvalue);
});
</script>
<?php
}
?>
Change the id in your HTML to class, and use getElementsByClassName instead of getElementById your in JavaScript.
Your div:
<div class="divid"> <!-- etc -->
and your JS..
var dividvalue = document.getElementsByClassName('divid')[0].innerHTML;
Also consider changing divid to divclass for consistency's sake.
Full edited code:
<script>
var i = 0;
</script>
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div class="divclass" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var divclassvalue = document.getElementsByClassName('divclass')[i].innerHTML;
alert(divclassvalue);
i++;
});
</script>
<?php
}
?>
I want to check the class of the html (there are posts and every category got a own class for background color) and then set the background.
I wanted to to it with jQuery but it doesn't work because the first one is true so all get the same background.
My php code:
<div class="grid" >
<?php
$args = array( 'post_type' => 'post' );
$query = new WP_Query( $args );
while ($query->have_posts()) : $query->the_post() ; ?>
<div class="post grid-item <?php foreach((get_the_category()) as $category) { echo $category->cat_name; } ?>" style='background: url("<?php if (has_post_thumbnail()) { the_post_thumbnail_url(); } ?>"); background-color:<?php ?>' >
<h1><?php the_title(); ?></h1>
</div>
<?php endwhile;
wp_reset_query();
?>
</div>
my jQuery code that doesn't work
//post background
var back_engagement = jQuery('.grid div').hasClass('engagement');
var back_unternehmen = jQuery('.grid div').hasClass('unternehmen');
var back_forum = jQuery('.grid div').hasClass('forum');
if (back_engagement){
jQuery('.grid-item').css({"backgroundColor": "#959595"});
}
else if (back_unternehmen) {
jQuery('.grid-item').css({"backgroundColor": "#96A306"});
}
else if (back_forum) {
jQuery('.grid-item').css({"backgroundColor": "#215270"});
}
For me it doesn't mater if the solution is with php or jQuery
You can set the CSS property based on simple selector.
jQuery('.grid div.engagement').css({"backgroundColor": "#959595"});
jQuery('.grid div.unternehmen').css({"backgroundColor": "#96A306"});
jQuery('.grid div.forum').css({"backgroundColor": "#215270"});
However I would recommend you to set them using classes in CSS
.engagement{ background-color: #959595;}
I made a simple image gallery, I'm adding a password protected upload. With some help I'm using this php (thanks to sulthan-allaudeen). Attached the code I'm using.
The problem is that I can't find a way to have on the left side the thumbnails of all the images in the folder, but with this code I have the full-width images only. any idea?
thanks
<body>
<div id="containerfoto">
<div id="gallery">
<div id="minipics">
<?php
$dir = 'Images/photo/';
$files = scandir($dir);
$i = 1;
foreach ($files as $key)
{
if ($i>3)
{
$j = $i-3;
echo "<a href='Images/photo/".$key."'><img src ='Images/photo/".$key."'>".$key."</a>";
}
$i++;
}
?>
<div style="clear:left"> </div>
</div>
<div id="zoom">
<img src="Images/foto/foto7.jpg" id="bigimage" alt="">
<h3 id="titolo">Click to enlarge images.</h3>
</div>
</div>
</div>
<script>
window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getElementsByTagName("a");
for(i=0;i<links.length;i++)
links[i].onclick=function(){Show(this);return(false)}
}
function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.title));
}
</script>
</body>
Scandir() put's the file names within your directory into an array. Therefore, we can print each image using a for loop. I've given you an example below:
<?php
$dir = 'Images/photo/';
$files = scandir($dir);
for($number = 0; $number <= count($files); $number++) { ?>
<div class="thumbnail">
<img src="<?php echo $dir; echo $files{$number} ?>">
</div>
<?php } ?>
Now you just need to apply some css to the .thumbnail class and it should do the trick. For starters, you just need to apply some width and height to .thumbnail img, let me know if you need help with that too.