Extract image 'rel' and 'title' in functions.php WordPress
- SOLVED
Hey,
Im looking to extract the 'rel' tag and title from the uploaded images using the functions.php.
At the moment, the problem is that using this code (below) ignores everything I have added into the <a> tag with the Wordpress editor.
function getImage($num) {
global $more;
$more = 1;
$link = get_permalink();
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$postOutput = preg_replace('/width="([0-9]*)" height="([0-9]*)"/', '',$postOutput);;
$image[$i] = $postOutput;
$start=$imgBeg+$imgEnd+1;
}
if(stristr($image[$num],'<img')) {
preg_match('/src\s*=\s*\"([^\"]+)/', $image[$num], $m);
$imglink = $m[1];
echo '<a class="image-post" href="'.$imglink.'" rel="">'.$image[$num]."</a>";
}
$more = 0;
}
I hope this makes sense,
Thanks
Answers (3)
Merne Asplund answers:
To be clear: You want to take the img tags provided and wrap them with an anchor with the proper href? Or do you have the anchors and are looking to add the images?
What exactly is your hoped end result?
Rob Cleaton comments:
Sorry I didnt make it clear.
So I want to do, is keep the href thats produced with the functions.php as this links to the individual image. But also add a 'rel' tag so I can add to a lightbox gallery.
Is this possible?
Many thanks
Merne Asplund comments:
OK. I am still unclear, but lets have a go:
With jquery you can add an attribute to each image tag.
<script type="text/javascript">
$(document).ready(function() {
$('a.image-post img').attr('rel', 'your-rel-label')
});
</script>
If you want a rel in your anchor and you have the following code:
if(stristr($image[$num],'<img')) {
preg_match('/src\s*=\s*\"([^\"]+)/', $image[$num], $m);
$imglink = $m[1];
echo '<a class="image-post" href="'.$imglink.'" rel="">'.$image[$num]."</a>";
Can't you just add the rel value in here?
If I am getting this wrong again, please send me a link to the front end of where this lives. I would like to see the HTML output.
Rob Cleaton comments:
Hey,
This is the page: [[LINK href="http://www.thelondonpolice.co.uk/wordpress/gallery"]][[/LINK]]
How this is working at the moment is each column is a single post, pulling in all images within it. You will notice the post name appear on rollver.
- Firstly I would like the rollover to pull in the title value to each image so every image has different rollover text.
Clicking these images will load the lightbox, so I will need more than one rel value, ideally the ability to add when uploading.
Hope this helps,
Merne Asplund comments:
This will pull the title from the img and put it on the anchor:
<script type="text/javascript">
$(document).ready(function() {
var imgTitle = $('a.image-post img').attr('title');
$('a.image-post').attr('title', imgTitle);
});
</script>
You can use a similar script to grab the rel value from the img tag and add a rel to the anchor tag:
<script type="text/javascript">
$(document).ready(function() {
var imgRel = $('a.image-post img').attr('rel');
$('a.image-post').attr('rel', imgRel);
});
</script>
Altogether:
<script type="text/javascript">
$(document).ready(function() {
var imgTitle = $('a.image-post img').attr('title');
$('a.image-post').attr('title', imgTitle);
var imgRel = $('a.image-post img').attr('rel');
$('a.image-post').attr('rel', imgRel);
});
</script>
Merne Asplund comments:
Is the code provided not what you are looking for or what?
Rob Cleaton comments:
Woohoo!
That worked like a charm, thanks very much for you're help.
Valentinas Bakaitis answers:
Hi,
I would suggest to do this using JavaScript (jQuery):
jQuery('.some_selector img').attr('rel','group');
Buzu B answers:
Actually, I think with jQuery it would be
<script type="text/javascript">
$(document).ready(function() {
$('a.image-post').attr('rel', 'your-rel-label')
});
</script>
Since the rel attributes goes in the anchor, not in the image. Now, it gets a bit more complicated if you are grouping images to create different sets of galleries. Are you doing that? or you just want to add the rel="lightbox"?
Buzu B comments:
Now, if you are going to use jquery, you might as well just want to change the href with jquery leaving all the other attributes untouched. In that case you wouldn't need your getImage() php function. You would only do something like:
$(document).ready(function() {
$('a.image-post').each(function(){
$(this).attr('href', $(this).children().first().attr('src'));
})
});
and that would be it.
Rob Cleaton comments:
Yeah I would like to create different sets
Buzu B comments:
Ok, Is there any way to take a look at your current code? I think is better if you just do it all with either javascript or php, but not mixing both.