i'm trying to edit the output of add image in posts the normal code from wordpress is
<img src="http://huemix.ly/wp-content/pics/pic.jpg" />
i want to replace that output with
<div class="huemix">
<img class="posts-img" src="http://huemix.ly/wp-content/pics/pic.jpg" />
<a href="http://huemix.ly/wp-content/pics/pic.jpg" class="fancybox" ></a>
<div class="fancy"></div>
</div>
all my try goes down :(
You need to search proper chunk of code in wordpress functions file. The file should be named post.php and should be located in wp-includes. The function name should be wp_insert_attachment().
Or using filters:
<?php
add_filter( 'image_send_to_editor', 'my_image_func', 10, 7);
function my_image_func($html, $id, $alt, $title, $align, $url, $size ) {
$url = wp_get_attachment_url($id); // Grab the current image URL
$html = "<img src="$url" class="uhuhu"/>";
return $html;
}
?>
Related
I want to re-title my image's alt tags etc based on the page they are being displayed on. For SEO Purposes.
I've tried to write a PHP function to do so and call the function on page load with "alt=<?php echo $post_title ?>" and "title=<?php echo $post_title ?>" but nothing is working.
How would you do it? PHP or jQuery... or?
Here's one of the functions I tried to manipulate and turn into something that works... I did get it to change the alt tags but I havent had any success beyond that.
function isa_add_img_title( $attr, $attachment = null ) {
$img_title = trim( strip_tags( $attachment->post_title ) );
$attr['title'] = $img_title;
$attr['alt'] = $img_title;
return $attr;
}
add_filter('wp_get_attachment_image_attributes','isa_add_img_title', 10, 2);
It appears this post may have had the answer but the link in the answer is now broken:
Dynamically filling image alt tags with the page title, PHP
Thanks so much! Appreciate any help.
This will set the alt and title of every image on the page to the post title.
function duck_diver_add_img_title( $attr, $attachment = null ) {
// Fetch the global post object. This is what the page it's on is.
global $post;
// Get the post title.
$img_title = wp_kses_post( $post->post_title );
$attr['title'] = $img_title;
$attr['alt'] = $img_title;
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'duck_diver_add_img_title', 10, 2 );
<!DOCTYPE html>
<?php
$test ="Test";
?>
<html>
<head>
<title><?php echo "$test" ?></title>
</head>
<body>
<div class="center">
<img src="ribbn2.jpg" alt=<?php echo "$test" ?> width="100%" height="100%">
I would like to use alt attribute tags with image on the main site.
I use code that calls for pictures on my index page from latest wordpress posts. I use this code for index.php:
<img src="<?php echo catch_that_image() ?>" width="250" alt="">
The code in the functions.php file for catch that image is:
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
What I want to achieve is to get the alt tag from that post, not only the image. Actually some kind of "catch that alt". The new code in index.php would be
<img src="<?php echo catch_that_image() ?>" width="250" alt="text from wordpress post">
How can can I add anything to functions.php to get that alt text together?
The purpose is that google often search for images and doesn't find alt tags on the main site but only on individual wordpress posts.
you can add the following code in your functions.php to enable that.
function add_img_title($attr, $attachment = null) {
$img_title = trim(strip_tags($attachment->post_title));
$attr['alt'] = $img_title;
$attr['title'] = $img_title;
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'add_img_title', 10, 2);
Short story:
I'm trying to get the ID of the Header Image in Wordpress.
All I found was this guide, which dosn't seem to work anymore:http://nickohrn.com/2013/09/get-attachment-id-wordpress-header-image/
Long Story
I'm trying to make the WP Header responsive with an srcset. so I don't want to use this code
<img id="masthead-bg" src="<?php header_image() ?>" alt="">
...but instead want to use the wp_get_attachment_image_srcset function to get the srcset of my header image. Only problem: I need an Image ID for this function -> The ID of my Header image.
<img id="masthead-bg"
src="<?php header_image() ?>"
srcset="<?php echo wp_get_attachment_image_srcset( image_id(), 'thumbnail' ); ?>"
sizes="100vw" alt="">
Any suggestions?
Try this...
// Get the header image data
$data = get_object_vars(get_theme_mod('header_image_data'));
// Now check to see if there is an id
$attachment_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
if($attachment_id) {
// Put your image code here, user whatever function to get image by id you need
}
Note: if you use a proper WordPress function to get the image it should add in all the srcset etc stuff for you, to allow for responsive images.
To answer the original question, I've found the simplest way to get the ID while I was filtering the markup that gets outputted by <?php the_header_image_tag(); ?> (introduced in v4.4).
function header_img_markup( $html, $header, $attr) {
// we can get the image ID by passing its src url to this method
$header_img_id = attachment_url_to_postid($attr['src']);
// now we can get its metadata from the db
$header_img_data = wp_get_attachment_metadata($header_img_id);
// now we can use the data
$customSizeWidth = $header_img_data['sizes']['my-custom-size']['width'];
// ...your custom output here...
return $html;
}
add_filter('get_header_image_tag', 'header_img_markup', 20, 3);
Responsive Wordpress Header Image with fallback:
if (get_header_image() !== '') {
$attachment_id = attachment_url_to_postid(get_header_image());
echo wp_get_attachment_image($attachment_id, 'large');
}
if (get_header_image() == '') {
echo '<h1>'.get_bloginfo( "name" ).'</h1>';
echo '<h2>'.get_bloginfo( "description" ).'</h2>';
}
This is my first post here. I'm not sure if the title of my post is the most descriptive way of showing my problem, sorry in advance!
Anyway, I've got a Facebook RSS feed on my site using simplepie - I'm displaying posts with a brief summary of its content and an accompanying image, both coming from the feed itself.
I've got a single div that displays this information and is repeated according to the number of stories I've set to display, in my case 3, so the HTML page outputs three div's each with a different story/accompanying image.
<div class="block">
<a href="<?php echo $image_url ?>" target="_blank">
<img src="<?php echo $image ?>" alt="" />
</a>
</div>
The problem is Facebook RSS feeds only show tiny thumbnails generated from the original image (either external or from Facebook's server), but I want them in their original resolution.
I've succesfully replaced the thumbnails coming from Facebook's server by changing the name of the image (from "something_s.jpg" to "something_n.jpg"):
$image = str_replace("_s.jpg", "_n.jpg", $image);
I tried with ltrim to remove the Facebook URL appended before the external image's URL (e.g. https://fbexternal-a.akamaihd.net/safe_image.php?d=AQDZORAaPpbr5COr&w=154&h=154&url=http://example.com/image.jpg). So, I thought this would do it:
$image = ltrim(stristr(str_replace("_s.jpg", "_n.jpg", $image), '&url='), '&url=');
Oddly enough, external images showed up in their original resolution (e.g. example.com/image.jpg inside <img src="">) but those coming from Facebook (e.g. 10153970_10153145169383306_1966565627_n.jpg) did not anymore. The img src attribute is just empty!
What am I doing wrong here? Any help is appreciated.
(BTW, this is simplepie code in my page):
<?php
require_once('../php/autoloader.php');
$feed = new SimplePie();
$feed->set_feed_url(array('https://www.facebook.com/feeds/page.php?format=rss20&id=40796308305'));
$feed->set_item_limit(3);
$feed->init();
function returnImage ($text) {
$text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
$pattern = "/<img[^>]+\>/i";
preg_match($pattern, $text, $matches);
$text = $matches[0];
return $text;
}
function scrapeImage($text) {
$pattern = '/src=[\'"]?([^\'" >]+)[\'" >]/';
preg_match($pattern, $text, $link);
$link = $link[1];
$link = urldecode($link);
return $link;
}
$feed->strip_htmltags(array('embed','center','strong'));
$feed->handle_content_type();
foreach ($feed->get_items() as $item):
$feedDescription = $item->get_content();
$image = returnImage($feedDescription);
$image = scrapeImage($image);
$image = ltrim(stristr(str_replace("_s.jpg", "_n.jpg", $image), '&url='), '&url=');
$image_url= $item->get_permalink();
$description = $item->get_description();
$description = preg_replace('/\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|$!:,.;]*[A-Z0-9+&##\/%=~_|$]/i', '', $description);
endforeach;
?>
Mr.Rod
use this custom function to change Image src Attribue..
<?php
function ChangeImageSrc($image , $Newsrc){
$regex = '#src="(([^"/]*/?[^".]*\.[^"]*)"([^>]*)>)#';
$Content = preg_replace($regex, $image, 'src="'.$Newsrc.'"');
return $Content;
}
// Useage
$markup = "<img src='fb.com/blahblah.jpg'>";
// Change Src
$toNewSrc = ChangeImageSrc($markup , 'http://example.com/newsrc.png');
print $toNewSrc;
?>
after adding this function to your script
change this line
$image = ltrim(stristr(str_replace("_s.jpg", "_n.jpg", $image), '&url='), '&url=');
to
$image = ChangeImageSrc('src="_n.jpg"', '_s.jpg');
you have to more customize this function to match your needs .
Please click here to view image
In this image the black dot is another image on background image . I am able to embed that black dot on that post image.
$embedCode ='div id="mainCHImage"style="position:relative;height:'.$heightOrg.'px;width:'.$widthOrg.'px;">'.
'<img style="background:none;border:none;height:'.$heightOrg.'px !important;width:'.$widthOrg.'px !important;"'. "src=\"{$matches[1]}\";>".'
</div>
<img id="Icon" style="position:relative;left:'.$imgWidth.'px;top: '.$imgHeight.'px;padding-left: 10px;z-index:9999;cursor:pointer;background:none;border:none;" src="/Icon.png" onClick="showProducts(event,'."'{$matches[1]}'".')"></div>
This is code i am replacing for an image of post image in order to bring that black dot on that background image.
Now the problem is onclick of black dot i want to run a javascript function but in wordpress it is wrapped under anchor tag with href of background image and hence not getting the click event .But i have disabled the link on images then its working but its not the right way ..Below i m pasting the inspect element response of this code...
<a href="http://localhost/wordpress/wp-content/uploads/2013/04/9.jpg">
<img id="Icon" style="position:relative;left:130px;top: -30px;padding-left: 10px;z-index:9999;cursor:pointer;background:none;border:none;"
src="/Icon.png" onclick="showProducts(event,'http://localhost/wordpress/wp-content/uploads/2013/04/9.jpg')">
I m not getting where that anchor tag is coming from ..I have nt added in my code ..
add_filter( 'the_content', 'attachment_image_link_remove_filter' );
function attachment_image_link_remove_filter( $content ) {
$content =preg_replace(array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}','{ wp-image-[0-9]*" /></a>}'),array('<img', '" />'), $content);
return $content;
}
/*place this code in your functions.php*/
/*if you wanna remove anchor tags which has image links, follow below code*/
add_filter( 'the_content', 'attachment_image_link_remove_filter' );
function attachment_image_link_remove_filter( $content ) {
global $post;
$exceptional_cjtypes = array("Mashup");
$cjtype = wp_get_post_terms($post->ID, "cjtype");
if(!in_array(strtolower($cjtype[0]->name), array_map('strtolower', $exceptional_cjtypes))) {
$content =preg_replace(
array('{<a href="(.*?(gif|jpeg|jpg|png))"><img}',
'{ wp-image-[0-9]*" /></a>}'),
array('<img', '" />'),
$content
);
}
return $content;
}