I have a WYSIWYG editor, which is used to create articles. The articles are then inserted into a database. The article is then displayed on the main page. It consists of 2 major divs/parts. The top part is a div with fixed height and is used to display an image that is submitted by the WYSIWYG(that's the plan) for the specific article. So, user(with privilege) writes article, inserts/uploads an image(which is located on the server), article gets inserted into DB and the url of the image as well.
My question is how I should display it? Right now I'm thinking of pulling all the required fields from the database and placing the image url into the div and it will render as an image. This feels really clunky, so with my limited experience I wonder if there's a more elegant way to do it.
You're on the right track. Pull the image URL from the database, then pop it into an img tag within the div, OR apply it as a background on the div itself.
For sizing the image to fit in the div, specify either the height or width of the image. The other will automatically size, keeping the proper aspect ratio. This can cause problems with it fitting in the div of a fixed height, so you will want to set the CSS overflow property on the div to hidden, so that images do not overflow outside of it.
You mean storing the image path in a DB then echoing it in an tag?
There's nothing wrong with that... better than storing the image in the DB if that's what you were wondering?
Related
I Googled a lot but no sufficient ans was found.
I need to place an image (900 X 5200 px) in one of my pages. As the image is sensitive, I need to prevent users from copying the image. I have an idea that can do this:
I will divide the image into pieces. Then the image grid will be loaded into some divs. So user won't be able to save the image. Or he/she will save only 1 square cm part of the whole image.
But this plan will not work if some small parts of the grid fails to load. So, I want to do another thing. I want to load the full image then cut the image into parts. Then show the parts altogether in divs.
This requires javascript. But I am confused how to start and need your help.
Now you know the matter, if you have better idea please share.
Thanks in advance.
The trick is simple. Create a div with the background being the image you want to display. Layer a div with a transparent image over it. When user goes to save the image, they get a blank. Program your server to not return "direct" requests for the image (so some clever chap can't just look at the css and retrieve the URL to the image).
Granted the image will still be in their cache but so would the sliced image so it won't make it impossible just more difficult for a determined person to retrieve the picture.
TL;DR Don't over engineer a solution, print screen will get around anything you do.
You are not going to be able to prevent people from copying this image. Plain and simple. Regardless of your best efforts, a simple PRT SCRN and paste into Paint will be enough.
Your best bet will be to not over engineer this and simply place a watermark and copyright notice on the page. Other options can include placing a transparent <div> over the top of the image so it cannot be right-click'ed and saved, but it still will not prevent the image from being stored in the user's cache. Or stop them from using developer tools or Firebug to find the source image.
You can do this with:
http://www.pixastic.com/lib/docs/actions/crop/
Yet you need to develop your logic around that library.
I have made example, you can see it on this link:
http://simplestudio.rs/yard/crop_img/
Basically you can get URL to your image via php and using my code or code similar to it crop your image into pieces and display them on canvas.
This way image is not accessible via browser or inspect element or what so ever. User can save the pieces individually but you can configure my code for piece to be 5px, I set it to 20x20px.
* test saving image piece by doing right click anywhere on image and do a "Save image as.." option.
Also you need to think of way how to hide src to image provided by php, if you need help on that I can help you.
I have an online portfolio I am working on, I am fairly new at both JQuery and PHP, but am working my way through all the issues, however this one has me stumped.
So, I have a seamless iframe for loading my images from the navigation, I am trying to build it so that the images all line up horizontally, normally I would load everything and dynamically change the wrapper for the browsers viewport, however since the images are coming server side form a PHP script / mySQL database, I am unsure of how to alter any of the image or div contents.
Everything is a loaded in a While loop after a user selects which portfolio to view.
Here is a link: http://tbremer.com
Any help would be greatly appreciated!
Let me know what other information is needed!
It is possible to get the width and height of an image from the server.
Ex:
$image_data = getimagesize(PATH_TO_IMAGE);
var_dump($image_data);
Better yet, you could use "list" to retrieve the width and height:
list($width,$height) = getimagesize(PATH_TO_IMAGE);
Whereas, the first two returns from the array are width then height, they are then set the the variables, oddly enough $width and $height, and you can use those to re-size your iframes.
I am not experienced outside of HTML and CSS.
I have a site on a less well known CMS called Ushahidi. Editing CSS is fine but right now I need to change an img selection. Currently, an image on a page has the code:
<a class="photothumb" rel="lightbox-group1" href="http://trashswag.com/media/uploads/35_1_1347312096.jpg"><img src="http://trashswag.com/media/uploads/35_1_1347312096_t.jpg"></a>
I need to remove the ability of the site to use the second image (note there is a slight difference "_t.jpg" is appended to the second src.
How would I alter the site so as to select the first image only i.e. remove the "_t" string?
The version of the image with the _t in the name is probably a thumbnail of the first image. What you have there is a small image, that when clicked takes you to a larger image. If you want to display the full-sized image and get rid of the link, just use
<img src="http://trashswag.com/media/uploads/35_1_1347312096.jpg">
I got a page here http://183.78.169.53/tyre2/page2.html. For now is static but I will be reading from the database and form something like this dynamically. The problem as I read position ID from the db and would like to place on each of the tyres? Any idea how to achieve it?
There are a fews ways to put labels on images in web applications.
Make an HTML element like a div or span, whose css background property is an image. You will have
to change the css dynmaically if the image is read from a database.
Generate a new image by compositing the text and background image server-side (but that is sooooo 1990s!)
Generate the whole display using <canvas>
Given what you have already, I would go with option 1.
You can put another image with the number on top of the tires. Alternatively, if all the images are the same, you can set the image as a background for the div/li/aand print the number as plain text.
If every picture is different, you can assign every div (or whatever it is) an I'd, and echo custom CSS that sets a different background image for each div.
I have a div that shows some content (several images, text, floating elements, etc) and I would like to add the posibility for a user to do something like "Save this content as image".
How can i do that? I read all the php docs but there's nothing good to do this, even imagegrabwindow sucks because of its high load, browser limitations, and also no X/Y or width/height control.
So basically, I want to do this:
Get #div content, click on Save as Image, then the user gets a .JPG or .PNG of that div, as if it were a printscreen (screenshot).
I don't want to pre-generate the content using GD, and neither do I want to save as .PDF.
The only thing I can really think of is to serialize the contents/placement/attributes of the content in the div, send that to the server, and have the server recreate the same elements, same positioning, same attributes with GD.
Off the top of my head, I'd see maybe inspecting the div and creating basically a form post, something like:
POST['images'][0]['file']='plane.jpg'
POST['images'][0]['position']['x']=23
POST['images'][0]['position']['y']=13
...repeat for each image
POST['text'][0]['content']='this is a plane!'
POST['text'][0]['size']='10px'
POST['text'][0]['font']='Arial'
The server could use this data to recreate what the user created in their browser.