I am building a blogging website and I am facing troubles when I try to upload a photo. I need the photo to be pasted in the webpage. I know that javascript can do that, but it only affects the current session of the webpage. I need to permanently embed that image into the webpage as a child of this div element, for example:
<div id="img-wrapper"></div>
Everything is OK with PHP file uploads. How can I do that with PHP?
I assume its not an advisable solution as it increases the page size, but you can do this in the following manner:-
Some examples:
HTML:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Here is a sample code
https://jsfiddle.net/casiano/xadvz/
For an online image to base 64 encode Click here
Related
I recently started a new position as a graphic designer for a local nonprofit. I have a little background in HMTL and CSS, but their website runs on PHP and I'm already struggling to work with the code.
I need to add an inline frame to embed a webpage within a specific page on our website. The programmers who built our site didn’t build a user friendly interface where we can embed HTML, so I'm told that I need to add the iframe snippet into the PHP for that page. However, the page I want to edit does not have it's own PHP file. It is a subpage under one of the site's main nav categories. I was able to find a PHP file which corresponds to that main nav category that this subpage falls under. I believe that this is where I would need to add the code. It appears to be a template which structures all of the pages inside of this broader nav category.
Can anyone help me with this? I'm not sure if you can just add HTML to a PHP file as is, or if it needs to be altered a bit. Also I need to know how I could have the PHP template selectively load the desired iframe only on the page that actually needs it - I don't want that iframe to appear in all the other pages that fall within the broader nav category.
The code I need to embed looks like this:
<iframe width="100%" height="800px" src="https://google.com" frameborder="0" scrolling="yes"></iframe>
you can use html as it is on php page.
point 2: you want to show iframe on specific page only...
e.g. on page xyz.php
<?php
$basename = basename($_SERVER['PHP_SELF']); /* Returns The Current PHP File Name */
if ($basename == 'xyz.php'){ ?>
<iframe width="100%" height="800px" src="https://google.com" frameborder="0" scrolling="yes"></iframe>
<?php } ?>
How can I resize an image on mouse hover using PHP with $_GET? I know that this can easily be done with css or js but I want to know how to do it with php. I don't want to upload a file either. So let's say I have html code with an <img> tag and an image, how can I use PHP or $_GET to resize that image on hover?
EDIT:
What i mean is to put the image between <a> tags and then when clicked it refreshes the page but adds the the name of the image to the url so then I could use $get to access and echo a style to resize it.
Resize question on Stack Overflow
PHP is server side and you would have to refresh your page to display a resized image on hover(although I'm not sure if you can implement action on hover without js) and if you don't want to refresh you need to use AJAX(and that requires Javascript)
Going off of your edit, are you looking for something like this?
<?php
if(isset($_GET['image'])){
echo "<img src={$_GET['image']} style='height: 100px; width: 100px;' />";
}
?>
<img src="image_name.jpg" />
Hi I would like to give my clients who use a CMS for their website the ability to add their own background image. My CMS doesn't allow clients to edit the background-image directly so I would like to enable them to do it by using some php or other script. I would like them to be able to upload an img as normal (this image will be hidden from view on the webpage but will be visible in the CMS) and then use the script to take the img src and put it into the background-image:url('...');
Here is my code:
<div id="maincontentcontainer" style="background-image:url('...');background-size:100%;background- attachment:fixed;">
<img src="..." alt=""/>
Looking forward to any answers, thanks!
The js part, as I assume that's what you're asking for, is quite simple. You'll have to make sure your CSS is there to make sure it's not visible though. Also assuming jQuery...
var $image = $('.uploaded-image'),
src = $image.attr('src');
$image.remove();
$('#maincontentcontainer').css('background-image', 'url('+src+')');
Fiddle: http://jsfiddle.net/61znv2a3/
I have an account with Simple In/Out. We have 50+ employees and display their statuses (In/Out of office) on a TV at the receptionist desk. However we can't fit all of the employees on the screen without scrolling.
Simple In/Out provides very limited styling to how the list is shown. With CSS I could remove dead space and visually improve the list.
At first I would inspect element and make a few changes however the screen would get refreshed and all changes lost.
I am trying to simply make a .html page that displays an iFrame of the List with Local CSS edits.
The list url is simpleinout.com/list- login and the list displays.
The following 2 files display the page and an appended CSS file with changes however if I click anywhere else the CSS file is removed.
simple.html:
<html>
<head></head>
<body>
<iframe src="http://localhost/~JohnHarbert/simple.php" style="border: 0" width="1920" height="1080" frameborder="0" scrolling="no" ></iframe>
</body>
</html>
simple.php:
<?php
$content = file_get_contents('http://www.simpleinout.com/list');
$content = str_replace('<head>','<base href="https://www.simpleinout.com/" /><head>', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://localhost/~JohnHarbert/style.css" /></head>', $content);
echo $content;
?>
Again. The code does append the css file on the initial load(It adds it just before ). But when I click to display list. The css file is no longer added inside the Iframe.
You're help is much appreciated.
I'm the web developer behind Simple In/Out.
The easiest way to fit more users on your screen would be to use the font/column controls in the upper right. Once you've entered Full Screen mode, click on the gear icon in the upper right. It will allow you to choose anywhere from 2 to 6 columns of users and you can adjust the font size to fit more on the screen.
Hope that helps!
What are the best practices/methods/languages for Preventing the following:
Image SaveAs
Image Drag&Drop to Desktop
Screenshots / Screengrabs
..on a desktop browser
(have witnessed the use of a 'blacked-out-screen' when a screenshot is attempted, and the implementation of images that are 'untouchable'..)
No Drag & Drop
document.getElementById('my-image').ondragstart = function() { return false; };
One way to prevent Save As (not really prevent but slow down a bit) would be to create a div with the inline styling that links to an image.
<div style="width: 200px; height: 200px; background: url('yourcraphere.jpg');"></div>
I'm almost certain you cannot disable screenshots. Screenshots are not contingent on browser permission, that's an OS thing. You could try and white everything out if the user clicks the print screen button?
Users will always be able to look in your resources with a developer tool and grab whatever image you're using. Hopefully these methods will help prevent most people from stealing whatever content you may want to keep safe... you could also try a watermark. Hope that helps.
To prevent the user right-clicking on the image and choosing Save As, you can add the code oncontextmenu="return false". oncontextmenu detects the user right-clicking and return false stops the action.
Then if you do the code draggable="false" the user can't drag the image, even if they select it. I don't think there is a way to stop people using screengrabbers, but here is some code that stops Google Images and other search engines grabbing the image: <meta name="robots" content="noimageindex"></meta>.
So all in all, try this method: place <meta name="robots" content="noimageindex"></meta> in the head of your document, and then <img src="mygreatimage.png" alt="An awesome image" oncontextmenu="return false" draggable="false"> in the document body.