I have a string that contains text and some html elements. I want to find the img elements that have the class size-thumbnail and add some html around it.
For example, From:
<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">
To:
<div style="width:150px;" class="article-image">
<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">
<span style="width:150px;" class="article-image-content">BLABLA</span>
</div>
The widths on the div and span elements are taken from the width of the image.
Whats the best way of doing this, and how?
I thought of using regex to get the height but I don't know how to add everything else on the right position.
You can use http://www.php.net/manual/en/class.domelement.php DOM Element for finding and manipulating HTML.
Also im using and recommending http://framework.zend.com/manual/en/zend.dom.query.html Zend_Dom_Query for finding and manipulating html. It works perfectly.
(If you want to make this manipulation on same page you need to buffer, manipulate and flush it to browser.)
You could always throw jQuery at it. Have your theme enqueue jquery, and add this to your header.
jQuery(document).ready( function () {
jQuery(".size-thumbnail").wrap("<div style='width:150px;' class='article-image'/>");
jQuery(".size-thumbnail").after("<span style='width:150px;' " +
"class='article-image-content'>BLABLA</span>");
});
Not the most elegant solution, but it would have the desired outcome...
Related
How to get a img of uppper leve a tag href?
I need to change my content img src.
So, I want to get the uppper leve a tag href first.
In my limited experience with that
Now Code
<img src="test.png">
I want change to
<img src="data/abc.png">
I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve this.
any suggest? should me neef to use preg_replace?
Using jQuery you can do like below:
$(document).ready(function() {
$('img').attr('src', $('img').parent('a').attr('href'));
});
Working snippet:-
$(document).ready(function() {
$('img').attr('src', $('img').parent('a').attr('href'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="data/abc.png">
<img src="test.png">
</a>
Note:- if your document have multiple <a> with <img> in it, above code will change src of all.So be careful.
In PHP (update your code like below):
<a href="<?php php code to get href value ?>">
<img src="<? write the same php code to get href value ?>">
</a>
I have searched high and low for a solution to this. I want to change the markup of an uploaded image in WordPress from this:
<div id="attachment_906" style="width: 590px" class="wp-caption aligncenter">
<img class="size-full wp-image-906 " title="Image Alignment 580x300" alt="Image Alignment 580x300" src="http://localhost/sandbox/wp-content/uploads/2013/03/image-alignment-580x300.jpg" width="580" height="300">
<p class="wp-caption-text">Look at 580×300 getting some <a title="Image Settings" href="http://en.support.wordpress.com/images/image-settings/">caption</a> love.</p>
</div>
To something more like this:
<figure class="center">
<img class="gallery-img" src="http://lorempixel.com/300/500/">
<figcaption>
<span>A slightly longer caption for the image, which is significantly smaller than the last one. pretty neat!</span>
</figcaption>
</figure>
I understand that much of the markup in the original post needs to stay, but is there any way to customize any of this? Even if I could get the same basic structure (a wrapper, the image, a caption wrapper, the caption) I could take it from there with CSS.
Since I'm developing a theme, I need the options to work with the native WordPress tools. If that isn't the case, I can't work with it.
I had hoped that there would simply be a filter or action that I could apply to do this, but I have had no luck in finding such a thing.
Thanks in advance!
You need to use the image_send_to_editor filter. https://developer.wordpress.org/reference/hooks/image_send_to_editor/
That could look something like this in any one of your active theme or plugin's php files (like functions.php);
function filter_image_send_to_editor($content) {
$content .= '<figure class="center">(Generate your markup here)</figure>';
return $content;
}
add_filter('image_send_to_editor', 'filter_image_send_to_editor');
You'll have to write your own code inside that function, of course.
I have htm file called user.htm. Here i will display my user details.When i'm trying to add link to user image i have one problem. span tag is exist in the image link.
For ex,
$img_link= '/image/users/44.jpg'.I want to remove the span tag from $img_link in user.htm.
my code is:
<img src="http://www.mysite.com/Imprenta/{$ruta_value}" height="50px" width="150px" />
Here the value of {$ruta_value} is => '/user/images/44.jpg'
I can not use PHP functions like str_replace or strip_tags here. how to do it?
You can very much use strip_tags in smarty like this ,
{$img_link|strip_tags}
So in your case, it will be like
<img src="http://www.mysite.com/Imprenta/{$ruta_value|strip_tags}" height="50px" width="150px" />
if you want to remove span tag from HTML give it an ID <span id="userSpan"> </span>
then use little JavaScript here
var span = document.getElementById("userSpan");
span.parentNode.removeChild(span);
I have a div structure that looks like this...
<div class="gallery_lightview">
<div id="lg_image">
<a href="http://www.website.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" class="lightview_main" title="TITLE HERE">
<img class="alignnone" src="HEADER.jpg" alt="" />
</a>
</div>
</div>
What I want to do is remove the <a> tags that show up ONLY between div class "gallery_lightview" and leave the <img> tag. So once its all stripped out it would look like...
<div class="gallery_lightview">
<div id="lg_image">
<img class="alignnone" src="HEADER.jpg" alt="" />
</div>
</div>
Basically making this a non clickable image. Is this possible?
$('.gallery_lightview').find('img').unwrap();
Find the element with class gallery_lightview, find all of its children elements (no matter how deeply nested) that are 'img' elements, then remove each of their immediate parent elements (in this case 'a' tags).
$('img').insertAfter('a');
Get and insert the element 'a' after 'img'
$('a').remove();
Remove the element 'a'
Sorry, just thought about it a little more. It's actually going on a mobile site. So...I choose not to use jQuery (cut down on the load and because I won't need most of the jQuery functionality).
Anyway this can be done in a self contained Javascript, no in the <head>?
I was thinking it would sit right before the Wordpress "the_content" call, since this is where the div is in. Any help?
Sorry for the confusion.
I have a div structure that looks like this...
<div class="gallery_lightview">
<div id="lg_image">
<a href="http://www.website.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" class="lightview_main" title="TITLE HERE">
<img class="alignnone" src="HEADER.jpg" alt="" />
</a>
</div>
</div>
What I want to do is remove the tags that show up ONLY between div class "gallery_lightview" and leave the tag. So once its all stripped out it would look like...
<div class="gallery_lightview">
<div id="lg_image">
<img class="alignnone" src="HEADER.jpg" alt="" />
</div>
</div>
Basically making this a non clickable image. Is this possible? Its going on a Mobile site and I don't want this to be in the header. Really wanted it to be a self contained Javascript that sat above the "the_content" Wordpress call (which is where the "gallery_lightview" div code is.
I choose to not use a jQuery because, since its mobile it would add to the load. And literally the only thing the library would be doing was removing the <a> tag.
Any ideas?
Could you do something like take the innerHTML of the inner element and make it the innerHTML of the grandparent. So:
var div = document.getElementById('lg_image');
var img = div.childNodes[0].childNodes[0];
div.innerHTML = img.innerHTML;
This isn't pretty, but it's lightweight and works. The more elegant option might be to pare down jQuery or find a similar, lighter-weight library.
Pure JS solution - I've given the target <a> an id of "target". You can grab the object however you wish:
HTML:
<div class="gallery_lightview">
<div id="lg_image">
<a href="foo" rel="bar" class="baz" title="TITLE HERE" id='target'>
<img class="alignnone" src="HEADER.jpg" alt="" />
</a>
</div>
</div>
Javascript:
// Grab anchor object
var target = document.getElementById('target');
// Grab img object, using tagName to avoid possible text nodes
var img = target.getElementsByTagName("IMG");
// Append the image object as a direct child of the parent
target.parentNode.appendChild(img[0]);
// Remove the anchor (empty except for text nodes)
target.parentNode.removeChild(target);
If you wish to do this to many nodes, you can use the getElementsByTagName() to grab all <a>s, and then loop through using this process.
EDIT
The appendChild line was missing an array index [0], now added.
UPDATE
http://www.jsfiddle.net/steve/yTcxn/ is a simplified version, thoroughly commented, and tested working on FF, IE, and Chrome. It should do exactly what you want with a little personalization.