I have a LAMP-driven database that generates a lot of php-driven web pages with images on them. The images are reduced to thumbnails on the main pages.
I would like to create an HTML / JavaScript / PHP method or code that basically makes EVERY image clickable, and if it is clicked, the image is open in a "_blank" window by itself, at full size. I do not want to have to create this code for every possible image, but can do so if necessary.
This would be the equivalent action in Chrome of right-clicking an image, and choosing "Open Image in New Tab"
Any way to do this?
In php, you can do something like this.
<?php
$images = Array('one.png','two.png','three.png');
foreach ($images as $k=>$v) {
echo '<a target="_blank" href="'.$v.'">';
echo '<img class="image" src="'.$v.'" />';
echo '</a>';
}
?>
Related
I have created a custom field for Post type which I want to show up in the loop which I managed to do with the help of Advanced posts of Ultimate add-on for beaver builder. Now I want the link to be embedded in a button so that users may click the button and it open ups the value under url custom field.
Since I do not prefer core php method for greater control over my web content hence want to know if there is anyway around in html, bootstrap or shortcode to do so ?
I'd recommend setting up a Link field, and following the examples from ACF, pass the $link_url into the anchor's href, click here . Source: ACF | Link
Here's the code they recommend using, which is of the same format that I generally use:
<?php
$link = get_field('link');
if( $link ):
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ? $link['target'] : '_self';
?>
<a class="button" href="<?php echo esc_url($link_url); ?>" target="<?php echo esc_attr($link_target); ?>"><?php echo esc_html($link_title); ?></a>
<?php endif; ?>
If you're using the fields within a Repeater or a Group, use get_sub_field() instead of get_field().
I need to add a shadow effect png picture to the top banner in my Magento website tamween.biz, I could do this on my local server using firebug by adding a new class in the right coding area and I have made all selector properties in the bootstrap.css file.
This test was very successful, The problem is I don't know where to locate the real HTML file in the server to edit these changes?
HTML code that calls image is in root/app/design/frontend/<package>/<theme>/template/page/html/header.phtml
Image's path is stored in System => Configuration => General => Design => Header => Logo Image Src
Any skin is located in root/skin/frontend/<package>/<theme>/css
Magento HTML page is made up of blocks, and each block has a template file.
To find out where each block template file is you can add some code to the core and get rid of it after you are done.
Open app/code/core/Mage/Core/Block/Template.php:241. This should be in the method fetchView and then edit the line having the include code to the following
if (strpos($includeFilePath, realpath($this->_viewDir)) === 0 || $this->_getAllowSymlinks()) {
echo "<!-- template hint start\n";
echo $includeFilePath."\n";
echo get_class($this)."\n";
echo "-->";
include $includeFilePath;
echo "<!-- template hint end\n";
echo $includeFilePath."\n";
echo get_class($this)."\n";
echo "-->";
} else {
This will add HTML comments telling you about the template file path and what $this means in that context.
(Reference)
In magento go to System - > configuration and set template hints yes.
This way you will see each template section from where static blocks will come from.
If you have created your custom theme then go to
root/app/design/frontend//yourtheme/template/page/html/header.phtml
if not then go to
root/app/design/frontend/base/default/template/page/html/header.phtml
and the n search for
<img src="<?php echo $this->getLogoSrc() ?>">
this is the code that output the image.you can add css class to it.
I am currently working on a semi dynamic page where I use some GET functionality to personalize it. I also echo the date a couple of places. At the bottom of this page, I would like to have a button that gives the visitor the option to download/open this page as PDF. Without the header. I have integrated DOMPDF, but I simply cant get it to work properly and need some help. I have tried a couple of things found here on Stackoverflow, with no success.
In basic, I need the whole page printed in the PDF, but it should not open when page is loaded. But triggered by the button. And then without the header (one spesific div). Is this possible?
<?php
require_once("dompdf/dompdf_config.inc.php");
$html =
'<html><body>'.
'<p>This is a test for '.
'<?php echo htmlentities(substr(urldecode($_SERVER["QUERY_STRING"]), 1)); ?> </p>'.
'<p>Thank you for reading.</p>'.
'</body></html>';
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("the_inquiry.pdf");
return true;
?>
<html>
<body>
<div class="shouldnotPrintToPDF">
Content.
</div>
<div class="shouldPrintToPDF">
Sensitive content.
Open or save as PDF
</div>
</body>
</html>
This is basically our one page presentation. And contains a lot of text, so I will not present all of that here. But in this way, I have to write the page twice, in $html = as well as inside the actual tag. And the PDF save/open option pops up right from the start, which it should not. I also wish to append the echo htmlentities part to the actual pdf-name.. is this possible? The PDF opens and contains what put into the $html = just fine. But not triggered by the link.
Update:
When i do exactly what you perform here, I get an error "The requested URL /inquiry.php&pdf=1 was not found on this server." I have the page I am trying to print in pdf on root level, but the DOMPDF is in /dompdf.. I dont know if that has anything to do with it?
Update:
When i edited the link, i get all this information up in a new page, like below.
[_parse_properties(margin:=1.2cm)(empty)_parse_properties]
[_parse_sections[section[_parse_properties(display:=-dompdf-page)
(counter-reset:=page)(empty)_parse_properties]#html#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]
_parse_sections][_parse_sections[section[_parse_properties(display:=block)
(empty)_parse_properties]#div##map##dt##isindex#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]
_parse_sections][_parse_sections[section[_parse_properties(page-break
-before:=avoid)(display:=block)(counter-increment:=page)
(empty)_parse_properties]#body#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(margin:=1em
0)(empty)_parse_properties]#p##dl##multicol#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(margin-left:=40px)
(empty)_parse_properties]#dd#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(margin:=1em
40px)(empty)_parse_properties]#blockquote#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(font-style:=italic)
(empty)_parse_properties]#address#section]
[section[_parse_properties(empty)_parse_properties]#empty#section]_parse_sections]
[_parse_sections[section[_parse_properties(display:=block)(text-align:=center)
(empty)_parse_properties]#center#section]
Do you have any idea what it might be caused by?
Breakthrough:
When I activated DOMPDF_DPI it actually opens as PDF, but now all of the text comes on first line of the second page of the PDF. Like, all the text comes out on top of each other. Also, when it opens the PDF, the ?&pdf=1 are included in the htmlentities query string, which looks very messy since it is supposed to be a personalized page as well as the PDF.
You can set dompdf to parse CSS #media queries for standard media types (screen, print, voice, etc.). By default dompdf parses the "screen" media type styles, but you can change this in the configuration file. See the DOMPDF_DEFAULT_MEDIA_TYPE configuration setting. Then you just need to pass the original URL querystring with an appended variable telling the page to render to PDF. If your original URL is something like the_inquiry.php?name=Joe then your PDF URL could be the_inquiry.php?name=Joe&pdf=1.
Your code would then look similar to the following:
<?php
ob_start();
?>
<html>
<head>
<style>
#media print {
.shouldnotPrintToPDF, .pdflink { display: none; }
}
</style>
</head>
<body>
<div class="shouldnotPrintToPDF">
Content.
</div>
<div class="shouldPrintToPDF">
Sensitive content.
Open or save as PDF
</div>
</body>
</html>
<?php
if ( isset( $_GET['pdf'] ) ) {
require_once 'dompdf/dompdf_config.inc.php';
$html = ob_get_clean();
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("the_inquiry.pdf");
}
?>
I have a page which includes details of the registered users.
Every html table includes 80-90 users.
For every user there is a $username variable.
I normally show their pictures in a table like the code below.
print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\">
<img src=\"big-avatar-$username.jpg\">
</a>";
But the user can open images in a new tab. I want to show big avatars easily.
My first choice was lightbox-jquery. But because i use twitter-bootstrap in my site, i decided to use default bootstrap and jquery features.
I saw that there is "bootstrap-modals". When user clicks link, i don't plan to show anything more than i big picture.
I tried this:
print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" >
<img src=\"small-avatar-$username.jpg\" ></a>";
print '</td>';
.
print "<div id=\"$username\" class=\"modal\">";
<img src=\"big-avatar-$username.jpg\">
print "</div>";
.
<script type="text/javascript" id="js">
$('#username').modal();
</script>
I suppose putting $('#username').modal();
for every user to my page will make HTML file huge.
But then I tried class name of anchor like this: $('.img-modal').modal();
But this didn't work.
What would you recommend in this situation?
I would recommend you to use a HTML5 Custom Data Attributes in your <a> tag to identify the username and keep your img-modal class.
"<a href="#myModal" data-username='".$username."' class="img-modal">...
Trigger the call to modal on click on .img-modal (you don't need the data-toggle="modal")
$('.img-modal').click(function(event) {
You can get the value of the username by using
var username = $(this).attr('data-username')
Since you have the username you can replace the src property of your <img> tag in your unique modal with something like.
$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg")
And open your modal
$('#myModal').modal('show')
And finally, make sure bootstrap-modal.js or boostrap.js is included.
There is some HTML code which appears on the page as the result of AJAX request/response. This HTML contains GET requests to another php script. Links containing this requests are not working while "real" HTML (added on the page manually) works normally.
When I open the page source with Ctrl+U I see empty div's (but they actually have HTML retrieved via AJAX) and the full-fledged HTML code added manually. Can't figure out how can I make the AJAX-retrieved links working.
This is how I try to form the HTML code which must be added to the page as the result of AJAX response.
<?php
//some selections from the database...
//all subsequent varibles are the members of $row = mysql_fetch_array($query) array;
$html_to_be_inactive =
'<li id="productID_' . $productID . '">
<a href=work.php?action=deleteFromBasket&productID=' . $productID . ' onClick="return false;">
<img src="images/delete.png" id="deleteProductID_' . $productID . '">
</a> ' . $productName . '(' . $totalItems . ' items) - $' . ($totalItems * $productPrice) . '</li>';
echo $html_to_be_inactive;
?>
And that is it, result of 'echo' appears on the page after successful AJAX request as the simple HTML, and it does nothing when I click the link.
I do not perform DOM 'append' methods as I'm not familiar with DOM yet. I can see all the elements mentioned in $thml_to_be_inactive but the link seems to be really inactive. Also this HTML is absent in the "Ctrl+U" output, I can see it only when I select "Inspect element" in the browser.
The HTML which was added manually operates the same items as usual, but I need AJAX-retrieved HTML to be working as well.
I suspect I need to perform some 'append' method via JavaScript or jQuery, but I don't know how to do it in a proper way.
Thanks.
You need to put your href in quotes.
onClick="return false;" will override the default action (go to href) of your link. You need to bind an other event to the link, or just remove `return false'.
Your links use relative paths.
You're probably inserting the HTML into a page in a different directory, breaking the relative paths.
If so, you need to switch to absolute paths.