I'm trying to automatically switch my background image in wordpress depending on the visitors screen size. If he/she has a big screen, he/she gets the big version of the image. If the screen is small, he/she gets the smaller version. (Just for loading time reduction. The image will be resized to fill the screen afterwards, but that's already working.)
What isn't working is the check wether or not the smaller version even exists. If it doesn't exist, the script should fall back to the bigger version and just use that image. I get a background image, but it's only the big one (wordpress field name "BG_value". The url of the small image is stored in "BG_value-medium").
The images DO exist and the paths passed through the wordpress fields are fine, too, so that is NOT the problem. :/
But, without further ado, I present you the code (from my header.php from wordpress).
<body>
<!-- Wordpress Loop -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<script type="text/javascript">
if (($(window).width() < 1340) && (<?php
if(file_exists(bloginfo('template_url').get_post_meta($post->ID, 'BG_value-medium', $single = true))){
echo "true";
}else{
echo "false"; } ?> )){
<?php $bgimg = get_post_meta($post->ID, 'BG_value-medium', $single = true); ?>
} else {
<?php $bgimg = get_post_meta($post->ID, 'BG_value', $single = true); ?>
}
</script>
<div id="bgimage"> <img class="stretch" src="<?php bloginfo('template_url'); ?><?php echo $bgimg; ?>" alt="" /> </div>
<?php endwhile; endif; ?>
I'm sorry if this looks a bit messy, I've been working on this for the last few hours, changing it over and over again.
Any ideas what's going wrong here? Check out the page
You have a big logical error in this. You want to set the bg image with an javascript function, but you never try to set it with javascript, only with an php echo. Take a look at the sourcecode of this javascript snippet in your browser, and you will see what i mean.
You should store the image-pathes in javascript variables inside the then and else, and use them to set the bg image.
Untested:
<script type="text/javascript">
if (($(window).width() < 1340) && (<?php if(file_exists(bloginfo('template_url').get_post_meta($post->ID, 'BG_value-medium', $single = true)))){
echo "true";
}else{
echo "false"; } ?> )){
var bgimage="<?php echo get_post_meta($post->ID, 'BG_value-medium', $single = true); ?>";
} else {
var bgimage="<?php echo get_post_meta($post->ID, 'BG_value', $single = true); ?>";
}
document.getElementById("bgimageimg").src=bgimage;
</script>
<div id="bgimage"><img id="bgimageimg" class="stretch" src="" alt="" /></div>
I've tried to clean up that mess to see what is happening. The following is untested, but if something doesn't work you can now atleast see why it doesn't work.
<?php
if (have_posts()) {
while (have_posts()) {
the_post();
echo '<script type="text/javascript">';
$url = bloginfo('template_url');
$img = get_post_meta($post->ID, 'BG_value-medium', $single = true);
$file_exists = 'false';
if (file_exists($url.$img)) {
$file_exists = 'true';
}
echo 'var bgimg = '.get_post_meta($post->ID, 'BG_value', $single = true).';';
echo 'if ($(window).width() < 1340 && '.$file_exists.') {';
echo ' bgimg = '.get_post_meta($post->ID, 'BG_value-medium', $single = true).';';
echo '}';
echo '$("#bgimage").attr("src", bgimg);';
echo '</script>';
}
}
?>
Related
I wrote a code for a loop but it disrupts everything for me, I have a file
file.php that is inside my template (let's say it's called test)
Now I call the file from the function (function file by include_once ('file.php'); )
Now it works, but my elementor display is broken and I can't update anything, and it also ruins my main pages, but the post pages look great
<?php
function video() {
echo '<link rel="stylesheet" href="/style.css">';
$x = 1;
$number = get_field_object('number');
echo '<div class="col-lg-2-1">
<div class="carousel">
<div class="video"><iframe src="" allowfullscreen frameborder="0" name="slider1"></iframe></div>
<span class="kfir">';
while($x <= $number['value']) {
$prak = 'video '.$x;
$num = 'chapter_'.$x;
$chapter1 = get_field_object($num);
echo '<div class="text">'.$prak.'</div>';
$x++;
}
echo '
</span>
</div>
</div>';
}
add_shortcode('video_live', 'video');
?>
Does anyone know where my mistake is?
And can someone guide me how to make it work only within the posts pages?
I'm building a WordPress custom file uploader in my custom theme and now I need to be able to delete each file when a button is clicked.
I have this so far:
<?php
$attachments = get_posts(
array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
)
);
foreach ( $attachments as $attachment ) {
$file_link = wp_get_attachment_url($attachment->ID, "full");
$file_img = wp_get_attachment_image($attachment->ID);
$file_title = get_the_title($attachment->ID);
$size_media = filesize(get_attached_file($attachment->ID));
$total_size = ($size_media) / 1000;
?>
<div>
<a href="http:<?php echo $file_link; ?>" target="_blank">
<div>
<?php if (strpos($file_link, '.png') !== false || strpos($file_link, '.jpg') !== false || strpos($file_link, '.gif') !== false || strpos($file_link, '.tif') !== false ) {
echo '<span class="material-icons">insert_photo</span>';
} else {
echo '<span class="material-icons">description</span>';
}
?>
</div>
</a>
</div>
<div>
<a href="http:<?php echo wp_get_attachment_url($attachment->ID, "full"); ?>" target="_blank">
<p><?php echo $file_title; ?></p>
</a>
<p>Size: <?php echo $total_size; ?>KB</p>
Delete
</div>
<?php } ?>
}
What is happening is that when the Delete link is pressed ALL the files are deleted. I don't want that. I need only that one file where the link was pressed to be deleted.
You are making a wrong assumption about php-functions included in html. What php does is, it outputs some html. In your case what you are doing is:
Delete
This tells Wordpress to delete the attachment immediately. It then returns nothing, so you html will look like this:
Delete
What you need is a javascript function that does an ajax request to tell the server-side php to delete a specific attachment. You can call this in the html:
Delete
This will result in the following html:
<a onclick="deleteFile(30);">Delete</a>
Now you can go and write a javascript function called deleteFile and takes the attachment id as argument. It should send the id to the server and call wp_delete_attachment( $_GET['id'] ).
I am trying to display an image on my webpage using a PHP script to determine which image is displayed.
The image link is as follows:
......
My PHP script is thus:
<?php
$result = $_GET['image'];
echo '<img src="images/gallery/'.$result.'.jpg">';
?>
So what I am trying to achieve in terms of HTML is:
<img src="images/gallery/image01.jpg">
The result I am getting is '"; ?>' displayed on the page.
Any help would be much appreciated!
You have to change your code like this
<?php
$result = $_GET['image'];
?>
<img src="images/gallery/<?php echo $result; ?>.jpg">
<?php
$result = filter_input ( INPUT_GET , 'image' );
if (isset($result) && !empty($result)) {
echo '<img src="images/gallery/'.$result.'.jpg">';
}
?>
You used echo wrong, here is how you should use it.
<?php
$result = $_GET['image'];
?>
<img src="images/gallery/<?php echo $result ?>.jpg">
I would change the gallery.php to this:
<?php $result = $_GET['image']; ?>
<img src="images/gallery/<?php echo $result; ?>.jpg">
That would simply it a little bit. You should echo out the result to see what you are getting when the variable is passed to the gallery page.
echo"<img src='{$image}'>";
$image = uploads/myImage.jpg
I think this is the simplest code. To use a php variable while echoing out html, use curly {} brackets to insert any php variable. For instance, a file upload...
<?php
if(isset($_POST['submit'])){
$filename=$_FILES['file']['name'];
$temp_dir=$_FILES['file']['tmp_name'];
$image = "img/".$filename;
}
?>
<?php if($row2['pack1']==1){ echo "<img src=".BASE_URL."images/1seo.png"; } ?>
Hey guys i have this code
<?php $jthumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if ($jthumb> "0")
{
echo $jthumb;
}
else
{
echo "http://placehold.it/350x250&text= Jedcore";
}
?>);background-attachment:fixed;">
What i wanted to do is to replace the
http://placehold.it/350x250&text= Jedcore with an image inside my wordpress theme like
<?php bloginfo('template_url'); ?>/images/theimage.png
But i just cant replace it liek that i will prompt an error,
I'm no expert with php :)
try this:
echo '<img src="'. bloginfo('template_url') . '/images/img.jpg" alt="">';
try after this
change
echo "http://placehold.it/350x250&text= Jedcore";
to
echo get_bloginfo('template_url').'images/theimage.png';
I am trying to create some text based share buttons for my Wordpress that also output the shared amount. So far I got it working with Facebook and Delicious but I am not sure how to get it going with Twitter.
This is what I did for Delicious.
<?php
$shareUrl = urlencode(get_permalink($post->ID));
$shareTitle = urlencode($post->post_title);
$deliciousStats = json_decode(file_get_contents('http://feeds.delicious.com/v2/json/urlinfo/data?url='.$shareUrl));
?>
<a onclick='window.open("http://delicious.com/save?v=5&noui&jump=close&url=<?php echo $shareUrl; ?>&title=<?php echo $shareTitle; ?>", "facebook", "toolbar=no, width=550, height=550"); return false;' href='http://delicious.com/save?v=5&noui&jump=close&url=<?php echo $shareUrl; ?>&title=<?php echo $shareTitle; ?>' class='delicious'>
<?php
if($deliciousStats[0]->total_posts == 0) {
echo 'Save';
} elseif($deliciousStats[0]->total_posts == 1) {
echo 'One save';
} else {
echo $deliciousStats[0]->total_posts.' saves';
}
?>
</a>
I also got the API Url which calls the tweeted numbers and URL.
http://urls.api.twitter.com/1/urls/count.json?url=SOMESITEURLHERE&callback=twttr.receiveCount
Basically it calls the JSON encoded file, and then gives you the option to share the link in <A></A> tags but instead of showing some text such as Share, it will show the count instead. I'm basically creating some CSS share buttons.
Just use Twitter's own tweet button.
It does that for you and you can style it with .twitter-share-button
(I would post this as a reply but I don't have the privilege.)
Probably you have figured out a solution yourself by now. I just had the same problem and solved it this way:
$handle = fopen('http://urls.api.twitter.com/1/urls/count.json?url=nu.nl', 'rb');
$twitCount = json_decode(stream_get_contents($handle));
fclose($handle);
print_r($twitCount->count);
function get_tweets($url) {
$json_string = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $url);
$json = json_decode($json_string, true);
return intval( $json['count'] );
}
function total($url){
return get_tweets($url); }
Then, use this to get the twitte share count in required place.
<?php echo total("http://website.com/"); ?>