i've got the following problem. I've been moving a large amount of content by hand and while inserting images, i put the lightbox class on the tag - unfortunately for the images to properly work, they would need an anchor around them specifying the url to the full image size - for example
<img src="images/myimage.jpg">
All I've got now is :
<img src="images/myimage.jpg" class="lightbox">
Is it possible to automatically set an anchar around every image found inside a specific <div> element and also properly close it? I would need something like
foreach image in <div> prepend and append
Any solution in PHP or jQuery would greatly be appreciated!
You can use jQuery's .wrap() method:
$('div img').each(function(){
$(this).wrap('');
});
DEMO: http://jsfiddle.net/bztvw/
With jQuery use .wrap():
$.each($('img'), function(){
$(this).wrap('')
});
It would be better if you specify the container div of these images then only those images will be wrapped. Something like this:
$.each($('#lighboximgwrapper img'), function(){
$(this).wrap('')
});
Use RegExp
Pattern:
<img(.*)src="([\w\/\.]+)"(.*)>
Replace with:
<img src="$2" alt="" />
preg_replace PHP Function
Personally, I would fix the code generating the source. Just use the regex find/replace in your IDE and fix the source. Don't rely on some javascript or PHP hack to "fix" this mistake.
Related
In my website using PHP and Laravel, I'm using the method Html::linkAction to route various requests given. The linkAction then is converted to an <a> element. Suppose I want to add more html tags inside that <a> content, how to do this? Or, is there a way to do this using this method?
I tried just {{ Html::linkAction('Controller#method', '<img src=..>'}} but then it shows literally the whole string <img src=..> instead of the actual image. Thanks in advance.
You can use URL::action() instead:
<img src=..>
See this link.
I'm using PHP. I would like to use file_get_contents to get an .svg file, and convert it for use as a data uri in an image tag. Something along these lines:
Controller:
$mylogo = file_get_contents(FCPATH.'app/views/emails/images/mylogo.svg');
View:
<img src="data:image/svg+xml;utf8,<?= $mylogo ?>">
I need to convert it into something (base64?) as right now it is just dumping it in tags and all and though the image does appear, it makes a mess of the img tag surrounding it.
<svg> elements can be echoed directly onto a web page like any other element; there's no need to include it as an img src attribute. PHP's include can be used for this (ie. include('/path/to/image.svg')), amongst a myriad of other methods.
Alternatively, if for some reason you need to include the svg as an actual img tag, there's no need for file_get_contents or similar functions; an SVG can be linked as a source path like any other image type (ie. <image src="/path/to/image.svg">).
Solution
Controller
$encodedSVG = \rawurlencode(\str_replace(["\r", "\n"], ' ', \file_get_contents($path)));
View
<img src="data:image/svg+xml;utf8,<?= $encodedSVG ?>">
⚠️ Do not convert to base64
It's less efficient in CPU time and also makes longer requests in size!
Know more about why
I want to remove the <a> tag that is wrapped around the <img> tag. No link, only the image show up, no <a> html tag at all. But, without remove the <a>directly in php
I tried using css a{display:none;}, but that will remove everything. Do you think is that possible to do what I ask in PHP?
See the code below.
<img src="" />
php is a server side language. Unless you are planning to pass your entire HTML code to PHP, it most likely will not achieve what you are trying to do.
On the other hand, there are several ways which you can do it in jquery. One way to do it is to call unwrap() on the img element.
$("img").unwrap();
This will remove the parent a element.
You should use jquery.unwrap
<script>
$(document).ready(function(){
$("img").each(function(){
var parent = $(this).parent();
if(parent.is("a")){ //Remove only if the parent is "a" tag
$(this).unwrap();
}
});
});
</script>
You can chain contents() into unwrap():
contents() will return all the children of , including nodes, and unwrap() can be applied to nodes.
Use : $("a").contents().unwrap();
I have an html file with this line:
<div >%%GLOBAL_ProductThumb%%</div>
and live it generates this:
<img width="200px" height="200px" alt="" src="[I removed the URL]">
In a PHP file, I see the variable being assigned on this line
$GLOBALS['ProductThumb'] = ImageThumb200x200($rowimg['imagefile']);
I don't know much about PHP, but how can I add fill the "alt" property with text? In what step/where would this occur? If this were Java I wouldn't have a problem figuring out how to set the property of an object, but I'm not quite sure what's going on here. If the context helps, it's custom shopping cart software designed for our business.
PHP has no standard means to add some HTML attribute to a HTML tag. All you can do is build the HTML code as a string, then printing out the string. Which is something your software does by grabbing some other variables, giving you little direct influence on the generated code.
That said, the only thing you can do is inspecting what exactly all those custom functions are returning. If you are lucky, you find the exact HTML code that will land on the page in the end somewhere. From there, it's just a matter of programmatically searching and replacing before handing the final string further down the line.
A jquery hack can do that for you. If you can penetrate that third party app. You can embed a Jquery code that can take care of it on DOM Ready event.
Example:
<script type="text/javascript">
$(document).ready(function(){
$("img[width='200px'][height='200px']").prop("alt", "Your ALT value");
})
</script>
I created a html site that has images that are links,
the images change on mouseover. I use a jquery function for this.
It all works perfect in HTML, but Im not sure how to combine the anchor and base_url to them when converting them to codeigniter.
I have been at this all day Id really appreciate any help, I am new to codeigniter I could not find any answers on their page or with a google search.
HTML code (works fine):
<a href="hotel.html">
<img src="img/image.png" hover="img/hoverimage.png" class="rollover"/>
</a>
I can get as far as linking the src image and can apply the class=rollover I just can not figure out how to add the hover="img/hoverimage.png"
<?php echo anchor('hotel', img('img/image.png'), array('class'=>'rollover' ));?>
Finally got it working. In short, I had to put the full address of the images rather than calling the base_url within an anchor. Probably a more accurate way of doing it but I spent so much time on this I am just happy it works....
<?php echo anchor('homepg/page/hotel', '<img src="http://localhost/websitefolder/img/image1.png" hover="http://localhost/websitefolder/img/imagehover.png" class="rollover"/>'); ?>
First, you don't need to use CodeIgniter's helpers to generate HTML. If you have working HTML already, then use it. Sometimes using CI's helpers can make the code more complicated, especially if other people need to figure out what it's doing.
To answer your question, the img() function accepts an associative array for the image's attributes. So you can specify the attributes similar to the anchor() function.
echo anchor('hotel', img(array('src' => 'img/image.png', 'class' => 'hover', 'hover' => base_url('img/hoverimage.png'))));
Note that this uses the base_url() function from the URL helper.