I'm coding a site in WordPress and I'd like to have a bookmark star shown before a course name.
The thing is that the code works fine, I can see that it translates to the right place where the image is, but the image appears to not be found.
Is there any configuration I need to do to make this image to show or anything I'm doing wrong?
Code:
$estrela = get_stylesheet_directory() . '/images/estrela.png';
$estrelaFavorito = get_stylesheet_directory() . '/images/estrela-favorito.png';
if ($isFavorito) {
$img = $estrelaFavorito;
} else {
$img = $estrela;
}
if (is_user_logged_in()) { ?>
<div class="add-remove-bookmark" onclick="addToBookmark(<?php echo $user_id ?>, 'course', <?php echo $course_id ?>)" >
<img src="<?php echo $img; ?>" alt="favoritos" width="20" height="20"/>
</div>
<?php }
Results in:
<div class="add-remove-bookmark" onclick="addToBookmark(x, x, x)">
<img src="/home/xxx/www/wp-content/themes/wplms_child/images/estrela-favorito.png" alt="favoritos" width="20" height="20">
</div>
Edit:
If I change to the code below, it works, but not really best practice:
$estrela = 'https://www.xxx.com.br/wp-content/themes/wplms_child/images/estrela.png';
$estrelaFavorito = 'https://www.xxx.com.br/wp-content/themes/wplms_child/images/estrela-favorito.png';
Solution:
I've replaced the variables $estrela and $estrelaFavorito for the code below and now it works!
$estrela = get_stylesheet_directory_uri() . '/images/estrela.png';
$estrelaFavorito = get_stylesheet_directory_uri() . '/images/estrela-favorito.png';
Replace:
//Returns an absolute server path
get_stylesheet_directory()
by
// return theme directory url
get_stylesheet_directory_uri()
https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
Related
I wrote a code which is retrive image paths and display on the website in bootstrap grid style.But it does not showing the image. Code is working fine, Please help me. here is my code
<div class="row">
<?while ($row = mysql_fetch_assoc($query)) {?>
<div class = "col-md-3">
<?php echo $row['keywords'];?>
<?php $imagePath = $row['video_url'];?>
<?php echo $imagePath;?>
<div id="video_thumbnail">
<a href="#" class="thumbnail">
<?php echo '<img src="' . $imagePath . '">'; ?>
<img src="<?php echo file_dir . '/' . $imagePath; ?>" height="100" width="100"/>
</a>
</div>
</div>
<?php } ?>
</div>
unless file_dir is a constant using DEFINE, I suspect it's because you didn't put a $ in front of it $file_dir
You are also displaying two files. One with the file path and one without.
Chances are, the mysql query is returning a path which is not linked ....
ie <image src="myImage.jpg" /> is not the same as <image src="images/myImage.jpg" />
As #pmahomme said, right click the element and check the pat and if need be add the additional requirements
I'm attempting to add social follow icons to a BuddyPress site using a section of code that I found here:
https://buddypress.org/support/topic/display-users-social-follow-buttons-in-profile/
I followed the suggestion downthread and added the code to a bp-custom.php file in my plugins directory and the icons are showing up where they should but the link to the social profile is showing as text and when I click on the link it returns a 404 page.
I'm sure I have something wrong but I'm just too clueless new to spot it.
<?php
//Social Media Icons based on the profile user info
function member_social_extend(){
$dmember_id = $bp->displayed_user->id;
$fb_info = xprofile_get_field_data('facebook', $dmember_id);
$google_info = xprofile_get_field_data('googleplus', $dmember_id);
$linkedin_info = xprofile_get_field_data('linkedin', $dmember_id);
$twitter_info = xprofile_get_field_data('twitter', $dmember_id);
echo '<div class="member-social">';
if($fb_info||$google_info||$linkedin_info||$twitter_info){
echo 'My Social: ';
}
if ($fb_info) {
?>
<span class="fb-info"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/facebook.png" /></span>
<?php
}
?>
<?php
if ($google_info) {
?>
<span class="google-info"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/googleplus.png" /></span>
<?php
}
?>
<?php
if ($linkedin_info) {
?>
<span class="linkedin-info"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/linkedin.png" /></span>
<?php
}
?>
<?php
if ($twitter_info) {
?>
<span class="twitter-info"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/family-openstrap-child/images/twitter.png" /></span>
<?php
}
echo '</div>';
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' );
?>
Thanks!
Looks like xprofile_get_field_data() creates its own <a> tag, so you don't have to write one out like you've done there. Try this instead:
$fb_info = xprofile_get_field_data(
'<img src="' . bloginfo('wpurl') . '/wp-content/themes/family-openstrap-child/images/facebook.png" />',
$dmember_id
);
...
<span class="fb-info"><?php echo $fb_info; ?></span>
Not sure if xprofile_get_field_data() will let you pass HTML in the first parameter there, so if that doesn't work quite right, you could fall back to something simpler (no image) like:
$fb_info = xprofile_get_field_data('Facebook', $dmember_id);
I am new in this so I'll try to be clear as I can.
I want to display\output, using php, page an image link html tag if user filed not empty like this on client side:
<a href="[dynamic from user filed]" title="My facebook">
<img src="images/facebook.png" alt="facebook" /></a>
so I wrote this but it always displays on html (client) the filed data as text without the all the html code (no html on client):
<div>
<?php
$Usr_Url = bp_member_profile_data('field=facebook' );
if ( !empty( $Usr_Url )) { ?>
<a href="<?php $Usr_Url; ?>" title="My facebook">
<img src="images/facebook.png" alt="facebook" /></a>
<?php } ?>
</div>
I suppose it is security issue so I need to make the code a server side code or something, can you give an advice please?
the current output seems to be always the user filed on html: www.facebook.com/try
*(need to add the I am retrieving buddypress field bp_member_profile_data(filed='filedname') and that sections works)
You are doing it the wrong way. Do it like this:
<?php
$Usr_Url = bp_member_profile_data('field=facebook' );
if ( !empty( $Usr_Url ))
{
echo "<a href=".$Usr_Url."title='My facebook' <img src='images/facebook.png' alt='facebook' /></a>";
}
?>
Comment if there are errors.
If wanting to output text from inside a PHP code block you need to use echo:
<?php
$Usr_Url = 'http://example.com';
echo 'Example URL';
...
?>
Or alternatively, you can mix in PHP code blocks into your HTML:
<?php $Usr_Url = 'http://example.com'; ?>
Example URL
...
You can't just stick HTML elements into your PHP code blocks though, as this breaks the syntax as in the original post.
To rework your code:
<div>
<?php
$Usr_Url = bp_member_profile_data('field=facebook' );
if ( !empty( $Usr_Url )) {
echo '<a href="'.$Usr_Url.'" title="My facebook">';
echo '<img src="images/facebook.png" alt="facebook" /></a>';
} ?>
</div>
You can try this out. It displays the image when Usr_Url is NOT empty:
<?php
$Usr_Url = bp_member_profile_data('field=facebook' );
if ( $Usr_Url != "" ) {
echo '<img src="images/facebook.png" alt="facebook" />'; } else { echo '$Usr_Url is empty...'; }
?>
I hope it helps :)
I want to check if the file exists before I use it on the page. From what I understand something like this should work but nothing appears so I am assuming I have not coded it correctly.
<?php
$url = get_bloginfo('template_directory');
$page_id = get_queried_object_id();
if(file_exists( $url . '/images/footerImage' . $page_id . '.png')) { ?>
<img class="footerImage" src="<?php echo get_bloginfo('template_directory'); ?>/images/footerImage<?php echo $page_id; ?>.png" />
<?php } ?>
I want it to check to see if the file exists and if it does create the image tag, if not do nothing. Why is this not showing any images? I know I have the images because it was working before I had the if statement but creating a broken image on a page that I did not have an image for.
get_bloginfo('template_directory') function returns the Absolute URL. But you need to supply the Relative path in order to check the file existence file_exists()
if(file_exists( TEMPLATEPATH . '/images/footerImage' . $page_id . '.png')) { ?>
<img class="footerImage" src="<?php echo get_bloginfo('template_directory'); ?>/images/footerImage<?php echo $page_id; ?>.png" />
<?php } ?>
I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?
This is my code of thumbnails:
<div class="thumbs">
<?php foreach (wppa_get_thumbs() as $tt) : global $thumb; $thumb = $tt; ?>
<img src="<?php wppa_thumb_url(); ?>" alt="*" />
<?php endforeach; ?>
</div>
and this is the code of specific photo:
<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
<a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
</a><br />
<?php } ?>
And this is the function that creates links:
// get link to photo
function wppa_photo_page_url($return = FALSE) {
global $thumb;
$url = get_permalink() . wppa_sep() . 'album=' . $_GET['album'] . '&photo=' . $thumb['id'];
if ($return) {
return $url;
} else {
echo $url;
}
}
I tried to remove the link code but does not work.
The act of opening a link in a new window is usually associated with the "target" attribute of an anchor. For example, this would put links in new windows:
text
But the code you've pasted above does not appear to include target attributes in , so I suspect the behaviour is controlled in your CSS, which you didn't include in your question.
Check your CSS files, and look for "target". The W3C has published documentation that describes how this works.
It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:
function load_image(image_path)
{
var image = new Image();
image.src = image_path;
return image;
}
You can pull the url to the image from the link that they click on.
Then, append that image to a hidden div you have and make it visible. If you're using jQuery:
var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();
This is untested, but should work.
You could use a jQuery plugin like Lightbox to pop the content dynamically over the current page.