I would be very very grateful for help with this:
I have a bootstrap carousel that I want to include pictures from a database. I want it to appear as background image like this:
<div class="carousel-item" style="background-image: url('link to image')">
This is the PHP-snippet that I want to put in place for the above 'link to image':
<?php
$img_url = "images/programpics/"; {
echo '<img src="' . $img_url . $row_firstrow[ 'show_tix_phone' ] . '"id="pic1" alt="Something here" />';
}
?>
'Link to image' is a part of style, not allow html tags like 'img' and angle brackets. Example syntax:
background-image: url('images/bg.jpg')
With this in mind you code must be like this:
<div class="carousel-item" style="background-image: url('<?php
$img_url = "images/programpics/";
{
echo $img_url . $row_firstrow[ 'show_tix_phone' ];
}
?>')" id="pic1" alt="Something here" />';
Hope help:
<div class="carousel-item" style="background-image: url(<?php echo $img_url . $row_firstrow[ 'show_tix_phone' ] ?>)">
Related
I have a loop with different json. Inside the json, there are images some of which have a description and some do not. I want when the description is "Main image" then to bring specific url. But when the description is different from "Main image", then bring another image which I have set.
Τhe problem is that it shows me both images, because in some json there is a blank description but also this description is "Main image"
My code is:
$no_image = get_stylesheet_directory_uri().'/img/no_image.png';
$images = $json->images;
foreach ($images as $img){
if($img->description == 'Main image'){
$main_image = $img->url;
?>
<div class="card__image" style="background-image: url(<?php echo $main_image;?>)"></div>
<?php
}else if($img->description==""){
<div class="card__image" style="background-image: url(<?php echo $no_image;?>)"</div>
}
}
There is no need to have else if (another condition) if you just want to display no_image if description is not "Main Image", just use else
Hence, Change
if($img->description == 'Main image'){
$main_image = $img->url;
?>
<div class="card__image" style="background-image: url(<?php echo $main_image;?>)"></div>
<?php
}else if($img->description==""){
<div class="card__image" style="background-image: url(<?php echo $no_image;?>)"</div>
}
to
<?php
if($img->description == 'Main image'){
$main_image = $img->url;
?>
<div class="card__image" style="background-image: url(<?php echo $main_image;?>)"></div>
<?php }else{ ?>
<div class="card__image" style="background-image: url(<?php echo $no_image;?>)"</div>
<?php } ?>
This bit needs two ==. one = assigns not checks if equal.
}else if($img->description==""){
I have the following expression, to get the post thumbnail, and if the post has no thumbnail, it should set a default image as the <div> background.
<?php $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');if(empty($backgroundImg)) $backgroundImg = APP_URL . "images/common/no-image.png";?>
<div class="ach_img" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat;"></div>
The problem is that it's returning style="background: url('h') no-repeat;. I guess the problem is in <?php echo $backgroundImg[0]; ?>, but I can't figure out how to correct it.
$backgroundImg[0] will return only the first character of APP_URL if no featured image. Try this instead.
<?php
$backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); $bgimg=$backgroundImg[0];
if(empty($backgroundImg)) $bgimg = APP_URL . "images/common/no-image.png";
?>
<div class="ach_img" style="background: url('<?php echo $bgimg; ?>') no-repeat;"></div>
Based on the following information of the official code reference:
returns an array (url, width, height, is_intermediate), or false, if no image is available.
source: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
You can try the following solution:
<?php
$att_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
if ($att_image === false) {
$imgPath = APP_URL.'images/common/no-image.png';
} else {
$imgPath = $att_image[0];
}
?>
<div class="ach_img" style="background: url('<?= $imgPath ?>') no-repeat;"></div>
$post_id = get_the_ID(); // Get current page ID
$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'full' ); // To get source path of featured image.
$image_url = $feat_image[0]; // This will return thumbnail image path
Now check admin user has selected featured image or not. If it is empty, it means not selected.
if(empty($image)){
$bgimg_path = "Your Image Path";
echo '<div class="bgimage-section" style="background: url('<?php echo $bgimg_path; ?>') no-repeat;"></div>';
}
Hope this code will help you.
You can use var_dump($backgroundImg) to see the result returned, and edit from there.
I am completely confused about the way I should use PHP code in this line:
<div class="post-img" style="backgroung-image:url(' <?php echo $thumbnail[0] ?> ')"></div>
It seems to me that it is read as a text in my example.
I also have tried another approach which also didn't work for the same reason, I believe...
<?php echo '<div class="post-img" style="backgroung-image:url(' . $thumbnail[0] . ')"></div>' ?>
$thumbnail variable contains a link to the main image of a Wordpress post:
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ) );
Please, give me an advice, how can I apply a dynamic link to a Wordpress post image?
If your div has no content then you have to add height in CSS like this:
<div class="post-img" style="background:url('<?php echo $thumbnail[0]; ?>')no-repeat; height:200px;">
Try this
<div class="post-img" style="backgroung-
image:url('<?php
wp_get_attachment_image_src(
get_post_thumbnail_id($post_id )[0] ); ?>')">
</div>
Some WordPress function directly display the string. No need to echo them.
generall, the results will be like this,
array{
[0] => url,
[1] => width</em>
[2] => height</em>
[4] => is_intermediate
}
you can do something like this
<?php echo '<div class="post-img" style="backgroung-image:url(' . $thumbnail[0] . ') . $thumbnail[2] ."></div>' ?>
ADyson and Nobita gave me the solution in comments to my question, which is:
echo '<div class="post-img" style="background-image:url(\'' . $thumbnail[0] . '\')"></div>';
I have this code
echo "<img src='" . $image[0] . "'>";
And this
<img src="images/preview-kv/1.jpg" alt="">
I need to convert this to php with dynamic image... pls
Try these. I have taken Your path and src in variable as example
$path = "/images/preview-kv/1.jpg";
$src = "images/preview-kv/1.jpg";
echo '<img src="'.$src.'" alt="">';
or
<img src="<?php echo $src ?>" alt="">
$image is an array.
Assume $image = array("/images/preview-kv/image1.png","/images/preview-kv/image2.png");
foreach($image as $image_path)
{
?>
<!--$image_value is dynamically changed-->
<img src="<?php echo $image_path; ?>" alt="">
<?php
}
I have this code in my php file.
<div class="the-avatar">
<div class="flash"></div>
<div class="avatar">
<img src="avatar/default-avatar.jpg" alt="">
</div>
I want to do this:
if file upload/user_avatar.jpg exist
show upload/user_avatar.jpg
else
show avatar/default-avatar.jpg
Save it to a dB if you ask me, checking everytime seems awkward.
Anyways,
$filename = 'upload/user_avatar.jpg';
if (file_exists($filename)) {
echo '<img src="'. $filename .'" alt="" />';
} else {
echo '<img src="avatar/default-avatar.jpg" alt="" />';
}
Straight from http://nl3.php.net/file_exists
You can use
<?php
if (file_exists('upload/user_avatar.jpg')) {
echo "<img src='upload/user_avatar.jpg'>";
} else {
echo "<img src='avatar/default-avatar.jpg'>";
}
?>
Your question shows no effort of research, so it is off-topic, though, here's the solution.
<div class="the-avatar">
<div class="flash"></div>
<div class="avatar">
<img src="<?php
If (file_exists('upload/user_avatar.jpg')) {
echo 'upload/user_avatar.jpg';
} else {
echo 'upload/default_avatar.jpg';
}
?>" alt="">
</div>