I am having issues trying to add an image before the content on my WordPress website. The image error icon keeps popping up after I try the code below. The image itself is in the plugin folder. Hope you can help, and thanks for taking a peek at my post!
Original code:
<?php
function before_after($content) {
$beforecontent = '<img src="stayhealthylogo.jpg" />';
$aftercontent = '<h2>Wordpress</h2>';
$fullcontent = $beforecontent . $content . $aftercontent;
return $fullcontent;
}
add_filter('the_content', 'before_after');
?>
Edit with updated code, I am now getting a syntax error, possibly has to do with the quotes? Can someone help me with this?
Updated code:
<?php
function before_after($content) {
$beforecontent = '<img src="<?php echo plugin_dir_url( __FILE__ ) . 'stayhealthylogo.jpg'; ?>">';
$aftercontent = '<h6>WordPress</h6>';
$fullcontent = $beforecontent . $content . $aftercontent;
return $fullcontent;
}
add_filter('the_content', 'before_after');
?>
If what you are seeing is the broken image icon, then the src attribute of your img element is incorrect. You'll need to make sure the full path to your image matches the image location on your server.
This question/answer seems related: https://wordpress.stackexchange.com/questions/60230/how-to-call-images-from-your-plugins-image-folder
UPDATE:
This should fix your syntax error:
<?php
function before_after($content) {
$beforecontent = '<img src="' . plugin_dir_url( __FILE__ ) . 'stayhealthylogo.jpg">';
$aftercontent = '<h6>WordPress</h6>';
$fullcontent = $beforecontent . $content . $aftercontent;
return $fullcontent;
}
add_filter('the_content', 'before_after');
?>
Related
I am creating a wordpress theme for a friend and am trying to add some markup before and after an image that has been inserted using the media button on a post.
Here is what I have so far but it's giving me an error. Any suggestions or help would be much appreciated!
add_filter ('the_content', 'wpse264886_content_insert_html', 10, 1);
function wpse264886_content_insert_html ($content) {
$html1 = 'before ... ';
$html2 = 'after ...';
$content = preg_replace('/(<a.*?)><(img.*?)/', '$1>' . $html1 . '<$2>' . $html2, $content);
return $content;
}
Thanks!
Ponte
I have following code
function source2(){
?> <p>hello world</p> <?php
}
//add beore after content
function wpdev_before_after($content) {
$beforecontent = 'This goes before the content. Isn’t that awesome!';
$aftercontent = source2();
$fullcontent = $beforecontent . $content . $aftercontent;
return $fullcontent;
}
add_filter('the_content', 'wpdev_before_after');
"Hello World" suppose appear after content.
However, it shows before the content instead, even before the $beforecontent.
If I insert plain text rather than calling a function, it works fine.
How can I fix this?
Thanks
Here is the modified version of the output to be displayed as per your requirement. You Need to return the string inorder to concatenate it. Unless the string is returned it will not be displayed.
OUTPUT: First Text/ Center Text /Last Text to be displayed
<?php
function source2(){
$string = 'Last Text to be displayed';
return $string;
}
//add beore after content
function wpdev_before_after($content) {
ob_start();
$beforecontent = 'First Text';
$aftercontent = source2();
$fullcontent = $beforecontent.$content.$aftercontent;
return $fullcontent;
}
add_filter('the_content', 'wpdev_before_after');
$word="/ Center Text /";
echo wpdev_before_after($word);
?>
Hope so you need to start the output buffer and clear the output and print it again. Have a try at this .
function source2(){
?> <p>hello world</p> <?php
}
//add beore after content
function wpdev_before_after($content) {
ob_start();
$beforecontent = 'This goes before the content. Isn’t that awesome!';
$aftercontent = source2();
$fullcontent = $beforecontent . $content . $aftercontent;
$fullcontent = ob_get_clean();
return $fullcontent;
}
add_filter('the_content', 'wpdev_before_after');
I'm trying to remove the "img src" tag from the php so it'll simply display the images url, rather than displaying the actual image. This is the code I've got so far and it works perfectly, but when it's rendered it shows thumbnails instead of urls.
<?php $pics = get_post_meta( $post->ID, 'pics', true );
foreach( $pics as $pics)
{
$image_attributes = wp_get_attachment_image_src( $pics['pictures'] );
echo '<img src="' . $image_attributes[0] . '" />';
}
?>
I know theres a way to do this, but I don't know how to remove the tags without breaking the image code. Any help is appreciated.
If you just want to echo the image src and not display it as an image then change
echo '<img src="' . $image_attributes[0] . '" />';
to
echo $image_attributes[0];
<?php
$pics = get_post_meta( $post->ID, 'pics', true );
foreach( $pics as $pics)
{
$image_attributes = wp_get_attachment_image_src( $pics['pictures'] );
echo $image_attributes[0];
}
?>
So do you want to show on the page the "html code" with the tag and the src attribute?
Have you tried to enclose "img" tag within "pre" tag?
echo '<pre><img src="' . $image_attributes[0] . '" /></pre>';
In the past, I used this custom function to create an image carousel on my WordPress blog with Thesis theme
function top_carousel() {
echo '<div id="topcarousel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'4'
));
while ($the_query->have_posts()) : $the_query->the_post();
$do_not_duplicate = $post->ID;
$post_image = thesis_post_image_info('thumb');
echo '<div class="carouselu">';
echo '' . $post_image['output'] . '<br />' . get_the_title() . '';
echo '</div>';
echo '<div style="clear:both"></div>';
echo '</div>';
}
add_action('thesis_hook_before_content_box', 'top_carousel');
It has been a while since I used the code, and, having recently setup a new WordPress blog, I discovered it doesn't work anymore, in that the image isn't getting displayed with the link to the post.
Someone suggested to me that this might be because I'm using featured images in my new WordPress blog. Following that tip and looking at the code on the WordPress code, I changed part of the custom function above to look like this
$post_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'small');
echo '<div class="carouselu">';
echo '' . $post_image[0] . '<br />' . get_the_title() . '';
echo '</div>';
This results in a little progress. Now a link to the image appears above the headline, rather than the actual image. For example,
http://localhost:8888/wp-content/uploads/2013/12/Screen-Shot-2013-12-27-at-9.37.49-AM.png
How do I get the image to show, rather than just a link to where the image is uploaded?
Update
Using the first answer to this post, I tried this code unsuccessfully
$post_image = get_the_post_thumbnail($post_id, 'small');
echo '<div class="carouselu">';
echo '' . $post_image['output'] . '<br />' . get_the_title() . '';
echo '</div>';
I also tried this unsuccessfully
$post_image = wp_get_attachment_image_src( get_the_post_thumbnail($post_id, 'small'));
echo '<div class="carouselu">';
echo '' . $post_image['output'] . '<br />' . get_the_title() . '';
echo '</div>';
Neither of those solutions output anything, whereas my attempt at least output a link to the uploaded image. Am I using the function incorrectly?
You should use the function get_the_post_thumbnail, refering to the doc : http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
Usage:
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
To enable Post Thumbnails, the current theme must include
add_theme_support( 'post-thumbnails' ); in its functions.php file
I have a Wordpress blog and am trying to implement the foresight.js image script. In short, I need to target all post images, swap out the src, width, & height attributes with data-src, data-width, & data-height attributes. I then need to duplicate the image line and wrap it in <noscript> tags. This is the structure I'm trying to have Wordpress generate/create:
<img data-src="wordpress/image/url/pic.jpg" data-width="{get width of image with PHP & pass-in that value here} data-height="{get height of image with PHP and pass-in that value here}" class="fs-img">
<noscript>
<img src="wordpress/image/url/pic.jpg">
</noscript>
More info can be found at foresight.js' website.
I have searched the Wordpress codex and the best possible route I can find are to use filters (ie. 'get_image_tag' & 'image_tag') for modifying the html that Wordpress outputs for each image. I'm thinking that one of these options should work, or that I can do some pattern matching with regex (I know, not ideal), throw in a preg_replace and then inject this back into the_content filter.
I have tried some of these options but cannot get any to work. Could someone please offer some help?
'get_image_tag' attempt:
Found this particular one on the web, but it would need modified to fit my logic (see above structure)...can't make sense of what the preg_replace array is doing on my own.
<?php function image_tag($html, $id, $alt, $title) {
return preg_replace(array(
'/'.str_replace('//','\/\/',get_bloginfo('url')).'/i',
'/\s+width="\d+"/i',
'/\s+height="\d+"/i',
'/alt=""/i'
),
array(
'',
'',
'',
alt='"' . $title . '"'
),
$html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);
?>
Another 'get_image_tag' attempt:
<?php function get_image_tag($id, $alt, $title, $align, $size='full') {
list($width, $height, $type, $attr) = getimagesize($img_src);
$hwstring = image_hwstring($width, $height);
$class = 'align' . esc_attr($align) . ' size-' . esc_attr($size) . ' wp-image-' . $id;
$class = apply_filters('get_image_tag_class', $class, $id, $align, $size);
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" data-width="' . $width . '" data-height="' . $height . '" class="' . $class . ' fs-img" />';
$html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size);
return $html;
}
?>
Pattern-matching attempt:
Tried creating my own regex on this one, but not sure if it's correct.
<?php function restructure_imgs($content) {
global $post;
$pattern = "/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)(|\")(.*?)>/i";
list($width, $height, $type, $attr) = getimagesize($2$3.$4$5);
$hwstring = image_hwstring($width, $height);
$replacement = '<img$1data-src=$2$3.$4$5 title="'.$post->post_title.'" data-width="'.$width.'" data-height="'.$height.'" class="fs-img"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'restructure_imgs');
?>
Unfortunately can't get any of these examples to work. Any help or sharing your pre-written scripts/functions would be much appreciated! Thanks for helping a student learn!!
Your approach is before the page rendering and i think is not impossible in wordpress, however you can do the same after the page was rendered with javascript.
I tried to do that with jQuery and ti seems to work:
<!-- Example image -->
<img src="http://fotografia.deagostinipassion.com/resources/photos/2/2n/ilCielo.JPG" width="200px" height="300px">
<!-- Import jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("img").wrap(function() {
$(this).wrap(function() {
var newimg = '<img data-src="' + $(this).attr('src') + '" data-width="' + $(this).attr('width') + '" data-height="' + $(this).attr('height') + '" class="fs-img">';
return newimg;
});
return '<noscript>';
});
});
</script>
If you need more help, ask me.