I'm using Wordpress and the PODS plugin and created the pod project. In project i've created a set of fields. One of those is project_slide. If this field has a value, I want to show this in a RoyalSlider on my frontpage.
I've started with this piece of code (= one slide).
<?php
$project = pods('project', array('limit' => -1));
while ($project->fetch()) {
echo '<div class="rsContent">';
echo '<img class="rsImg" src="' . $project->display('project_slide') . '" alt="' . $project->display('project_title') . '">';
echo '</div>';
}
?>
The problem is: each project I add, displays in the slider. Even if project_slide has no value. Any idea how to resolve this?
Just add an if-statement to the loop.
Hide Image example
In my example, I only add the slide when the value isn't [empty string]
while ($project->fetch()) {
if( $project->display('project_slide') !== ""){
echo '<div class="rsContent">';
echo '<img class="rsImg" src="' . $project->display('project_slide') . '" alt="' .$project->display('project_title') . '">';
echo '</div>';
}
}
Expand with a detection if the image actually exists
You could expand it with a file_exists to also check if it exists (for the items with value, but the image itself doesnt exists). Just make sure the file_exists is 2nd, that way it only checks if the file is present if the string is not empty (if-statements go from left to right)
$project->display('project_slide') !== "" && file_exists($_SERVER['DOCUMENT_ROOT'].$project->display('project_slide')`
Default image method:
Instead of showing it only when there is an image, you could always show it, but build a default-image logic:
$defaultImage = '/some/image.jpg'; // set a default image outside of the loop
while ($project->fetch()) {
$src= $project->display('project_slide') !== "" ? $project->display('project_slide') : $defaultImage; // set a default umage
echo '<div class="rsContent">';
echo '<img class="rsImg" src="' . $src . '" alt="' .$project->display('project_title') . '">';
echo '</div>';
}
Related
I've been trying to display an image with ACF code and have just got it working, but I can't work out why some code works and some doesn't.
if(get_row_layout() == 'bq_product'):
$image = the_sub_field('affiliate_image');
$affiliate_url = the_sub_field('affiliate_url');
?><img src="<?php echo $image ?>"/><?php //This line doesn't work and just displays the raw URL on the front end
?><img src="<?php the_sub_field('affiliate_image') ?>"/><?php //This line works and shows the image
?>Link //Similarly, this line doesn't use the URL set in affiliate_url, but does if I pass "the_sub_field('affiliate_url')"
How do I use the variable names within the image src without it just showing the raw URL on the front end?
I've tried using "get_sub_field" variations but they don't seem to make a difference.
Exactly as #Stender commented, attempting to store variables using ACF the_sub_field() will not work.
Use get_sub_field() instead to store returned ACF field data to your variables.
Then access variable data based on what you have set the ACF fields to return with... array, ID or URL
See example below (based on affiliate_image ACF field return format URL)
// if row layout is 'bq_product'
if(get_row_layout() == 'bq_product'):
// sub field vars
$affiliate_image = get_sub_field('affiliate_image');
$affiliate_url = get_sub_field('affiliate_url');
// if $affiliate_image variable is not boolean false
if($image) {
echo '<img src="' . $affiliate_image . '" alt="" />';
}
// if $affiliate_url is not boolean false
if($affiliate_url) {
echo 'Link';
}
endif;
See example below (based on affiliate_image ACF field return format array)
// if row layout is 'bq_product'
if(get_row_layout() == 'bq_product'):
// sub field vars
$affiliate_image = get_sub_field('affiliate_image');
$affiliate_url = get_sub_field('affiliate_url');
// use this to dump $affiliate_image array to see data for image sizes etc
// echo '<pre>' . print_r($affiliate_image, true) . '</pre>';
// if $affiliate_image variable is array
if(is_array($affiliate_image) {
echo '<img src="' . $affiliate_image['url'] . '" alt="' . $affiliate_image['alt'] . '" />';
}
// if $affiliate_url is not boolean false
if($affiliate_url) {
echo 'Link';
}
endif;
What I want to do is have images display on each blogposts, the images that will be displayed will be what the post was tagged with, for example I will tag 1 post with 2 tags, design and print, I would like 2 small images to appear on that posts page.
This is the code that I have managed to scrape together, the else statement is displaying so a post will have the same amount of default-author.jpg showing as there are tags.
This makes me think that something in the foreach is not working but I'm still trying to learn and this is puzzling me, any help would be much appreciated.
<div class="image_wrap">
<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL
// Check if tag-slug.png exists and display it.
if ($posttags) {
foreach($posttags as $tag) {
$upload_dir = wp_upload_dir();
$image_relative_path = "/wp-content/uploads/2017/06/" . $tag->slug .".png";
$image_path = $upload_dir['basedir'] . $image_relative_path;
$image_url = $upload_dir['baseurl'] . $image_relative_path;
if (file_exists($image_path)) {
echo '<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>';
// If no image found, output something else.
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="image missing"/>
<?php }
}
}
?>
Does anyone have any ideas on how I can achieve the effect I want, images to be displayed on a blogpost [in wordpress] depending on what tag it has?
I am using Genesis framework and I want to add advance custom field just after the post, I did some code but the field is not coming just after the post.
Here is the code:
add_action('genesis_entry_content', 'add_content_after_content');
function add_content_after_content() {
echo '<div class="tips-text-image">';
echo '<img src="' . get_field('image') . '">';
echo the_field('text');
echo '</div>';
}
You can use this http://genesistutorials.com/visual-hook-guide/ or install this plugins on your site https://wordpress.org/plugins/genesis-visual-hook-guide/
You can add extra content after content on this hooks.
add_action('genesis_entry_footer', 'after_new_content');
add_action('genesis_after_entry', 'after_new_content');
add_action('genesis_after_endwhile', 'after_new_content');
add_action('genesis_after_loop', 'after_new_content');
add_action('genesis_after_content', 'after_new_content');
add_action('genesis_after_content_sidebar_wrap', 'after_new_content');
function after_new_content(){ echo 'new content'; }
Set your fields as variable first, then use the variables in the echo's. Many times when you directly grab the data it places it outside of the container, thus pushing it to the top. Try this:
add_action('genesis_entry_content', 'add_content_after_content');
function add_content_after_content() {
$image = get_field('image');
$theText = get_field('text');
echo '<div class="tips-text-image">';
echo '<img src="' . $image . '">';
echo $theText;
echo '</div>';
}
Screenshot of the code:
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
require ('../../mysqli_oop_connect.php'); //Connect to the database.
$errors = array(); // Initialize an error array.
// Check for an isbn:
if (empty($_GET['isbn'])) {
$errors[] = 'You forgot to enter the ISBN-13.';
} else {
$isbn = $mysqli->real_escape_string(trim($_GET['isbn']));
}
if (empty($errors)) {
//Make the query:
$q = "SELECT * FROM books WHERE isbn=$isbn";
$r = $mysqli->query($q);
$num = $r->num_rows;
if ($num == 0) { // If it fails to run:
echo "<br /><br /><p>This book is currently not listed in our database. Would you like to add it?</p>\n";
//HERE IS WHERE IT NEEDS TO REDIRECT TO A PAGE THAT ALLOWS THE CONTENT TO BE ADDED TO THE DB LIKE REGISTER.PHP DOES.
} else { //If it suceeds then run the query:
echo '<h1>Is this your book?</h1>';
while ($row = $r->fetch_object()) { // POST DATA FROM DB.
echo '<img src="$row->image" height="100" width="100">' . '<br />' . $row->name . '<br />' . $row->isbn ;
The rest of the code is just closing the DB connection.
I don't know what that icon means or where the issue is in the code. The DB is setup with three columns in a table: image, isbn, and name. The goal is to get the book to display the data being retrieved from the database. It is displaying all three items from the database based on the query, except the image is something else. The HTML is recognizing that there is an image being retrieved because when I just do $row->image it freaks out and posts random nonsense, as it should when there is an image being displayed like that. Any help is greatly appreciated.
echo '<img src="'.$row->image.'" height="100" width="100"><br />' . $row->name . '<br />' . $row->isbn ;
Try this way, and better you print your image path and check if it does exist or does not exist, and yes you can also inspect image element and check path of the image.
Its not clear in the question whether there is image link saved in the db or image data in base64. Answer is given assuming db has image link.
I'd guess from your comments about 'freaks out and posts random nonsense' that your image is stored in your database, rather than the path to your image. If so, you can't simply echo the image data in your <img> tag. The src attribute requires a URL, which you can create in one of two ways: create a script that serves the image with appropriate headers and use the URL of that script as your src attribute; or, create a data URI and include the data in your page. The latter is probably the simplest, but could increase the load time of your pages. Here's how:
// base64 encode image data and prepend the header
$imgURL = "data:image/png;base64,".base64_encode($row->image);
echo '<img src="'.$imgURL.'" height="100" width="100">' .
'<br />' . $row->name . '<br />' . $row->isbn ;
Note - you'll need to change the dataURL header to send the correct image type: image/jpg, image/png, etc.
You cannot have string substitution with single quotes. It will simply place the text $row->image in the echo:
echo '<img src="$row->image" height="100" width="100">' . '<br />' . $row->name . '<br />' . $row->isbn ;
Try this instead:
echo "<img src='$row->image' height='100' width='100'>" . '<br />' . $row->name . '<br />' . $row->isbn ;
Or this:
echo '<img src="' . $row->image . '" height="100" width="100">' . '<br />' . $row->name . '<br />' . $row->isbn ;
Personally, I prefer using sprintf like this:
echo sprintf('<img src="%s" height="100" width="100">', $row->image) . '<br />' . $row->name . '<br />' . $row->isbn ;
But on top of that, to make your debugging life even easier, I recommend formatting your PHP code to be easier to read like this:
echo sprintf('<img src="%s" height="100" width="100">', $row->image)
. '<br />'
. $row->name
. '<br />'
. $row->isbn
;
The cleaner your code is from the beginning, the easier it is to spot flaws & bugs when they arise.
I'm looking to add rel="image_src" to all of the image tags that appear on a post in wordpress. I have tried editing /wp-includes/media.php from:
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" '.$hwstring.'class="'.$class.'" />';
to
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" rel="image_src" title="' . esc_attr($title).'" '.$hwstring.'class="'.$class.'" />';
but to no avail. Am I in the right spot, or is there something else that I should be editing?
Much thanks
It's probably VERY bad to do it this way, as HTML regular expressions are generally frowned upon, but it's the first thing that jumps to mind. Untested, but it should get you started.
add_filter('the_content', 'add_img_src', 20);
function add_img_src($content)
{
preg_match_all('/<img(.*?)>/', get_the_content(), $matches);
if(count($matches[1]) && is_single())
{
foreach($matches[1] as $count => $match)
{
str_replace($match, $match.' rel="image_src"', $content);
}
}
return $content;
}
I would go for Jquery rather modification in wordpress core files. I would probably use below js:
<script>
jQuery(document).ready(function ($) {
$("img").attr("rel","image_src");
});
</script>