Jump to content
rootKID

image with an image as watermark? Oo?

Recommended Posts

Okay, my title should say it all, just not sure if this is possible, nothing i have been making for a while now.

 

Here is an example of what happens with my code at the moment:

 

vdldll.jpg

 

As you see, i have tried adding an image as my watermark INSIDE the image itself at the blog i'm about to code/finish.

My ideas is to get the watermark image inside all images posted on my website later on in the bottom/right corner, as you see in the image also.

 

Any suggestions? Because the images i'm generating is coming from my database, so you should guess it would be pretty simple?

 

This is my code for the generation at the moment:

		$blog_query = "		SELECT			blog_id,			blog_picture_url,			blog_title,			blog_message,			blog_created_date,			blog_edited_date,			blog_userid		FROM			blog				ORDER BY blog_id DESC				LIMIT 5		";		$blog_result = $mysqli->query($blog_query);				// If bigger than 0		if ($blog_result->num_rows > 0)		{			echo "<div class='home_blog_wrapper'>"; // Wrapper				echo "<div class='home_blog_wrapper_inner'>"; // Wrapper Inner				echo "<hr />";				// output data of each row				while($row = $blog_result->fetch_assoc())				{					//echo "";										echo "<div class='home_blog_box_header'>";						// Blog Title						echo "<div class='home_blog_box_header_title'>";							echo $row['blog_title'];						echo "</div>";												// Blog Number (#)						echo "<div class='home_blog_box_header_blog_post'>";							echo "Blog indlæg, #".$row['blog_id'];														// Date							echo "<div class='home_blog_box_header_blog_date'>";								echo date('d/m/Y H:i:s', strtotime($row['blog_created_date']));							echo "</div>";						echo "</div>";					echo "</div>";										echo "<img src='".$row['blog_picture_url']."' alt='Blog Billede' title='Blog Billede'>";						echo "<img class='watermark' src='style/images/img_watermark.png' alt='Vandmærke' title='Vandmærke'></img>";						echo "Derp";					echo "</img>";										/*					echo "<div class='home_blog_image_div_sized'>";						echo "<img class='watermarked' src='".$row['blog_picture_url']."' /><br />";					echo "</div>";										echo nl2br($row['blog_message'])."<br />";					echo $row['blog_userid']."";					*/					echo "<hr />";				}				echo "</div>"; // Wrapper Inner			echo "</div>"; // Wrapper		}		else		{			echo "Ingen blog-nyheder er tilføjet i nu!";		}		$mysqli->close();

and this is my style as it is at the moment:

/*# Global Design==================================================*/img.watermark {	/*background-image: url(images/img_watermark.png);*/	height: 40px;	width: 40px;	position: absolute;	bottom: 40px;	right: 40px;}.home_news {	border-radius: 5px;	background-color: #C2C2C2;}	.home_blog_wrapper {		clear: both;		width: 100%;	}		.home_blog_wrapper_inner {			margin: 10px;		}				.home_blog_box_header {			width: 100%;		}			.home_blog_box_header_title {width: 100%; font-style: normal; font-weight: bold;}			.home_blog_box_header_blog_post {text-align: left;}				.home_blog_box_header_blog_date {float: right;}		.home_blog_wrapper_inner hr {margin-top: 5px; margin-bottom: 5px;}

Any ideas about what i'm doing wrong? Any help would be greightly appreciated! :)

 

Thanks! xD

Share this post


Link to post
Share on other sites

Image elements are empty elements. You can't put anything inside them. If you want a watermark, open the image in a photo editor and add the watermark manually.

 

If you really want a program that automatically adds watermarks, learn about PHP's GD library: http://php.net/manual/en/book.image.php

Share this post


Link to post
Share on other sites

hmm... ok, thanks alot! I might just do that, i just wish to have the "option" to add the watermarks via my website whenever i upload or make a new blog :P... in case i make a blog while im at a friends house x)

 

Thanks for the info tho! .P

Share this post


Link to post
Share on other sites

You could try the HTML FOOTER TAG:

Definition and Usage The <footer> tag defines a footer for a document or section. A <footer> element should contain information about its containing element. A <footer> element typically contains: • authorship information•copyright information•contact information•sitemap•back to top links•related documents You can have several <footer> elements in one document.

Share this post


Link to post
Share on other sites

While it wouldn't actually watermark your images or stop people from saving the images without the water mark on them, it is possible to place the watermark over top the image by making the following changes:

		$blog_query = "		SELECT			blog_id,			blog_picture_url,			blog_title,			blog_message,			blog_created_date,			blog_edited_date,			blog_userid		FROM			blog				ORDER BY blog_id DESC				LIMIT 5		";		$blog_result = $mysqli->query($blog_query);				// If bigger than 0		if ($blog_result->num_rows > 0)		{			echo "<div class='home_blog_wrapper'>"; // Wrapper				echo "<div class='home_blog_wrapper_inner'>"; // Wrapper Inner				echo "<hr />";				// output data of each row				while($row = $blog_result->fetch_assoc())				{					//echo "";										echo "<div class='home_blog_box_header'>";						// Blog Title						echo "<div class='home_blog_box_header_title'>";							echo $row['blog_title'];						echo "</div>";												// Blog Number (#)						echo "<div class='home_blog_box_header_blog_post'>";							echo "Blog indlæg, #".$row['blog_id'];														// Date							echo "<div class='home_blog_box_header_blog_date'>";								echo date('d/m/Y H:i:s', strtotime($row['blog_created_date']));							echo "</div>";						echo "</div>";					echo "</div>";										// wrap your images in a div					echo "<div class='relativeParent'>";						// images are empty elements so the forward slash stays in the opening tag						echo "<img src='".$row['blog_picture_url']."' alt='Blog Billede' title='Blog Billede' />";						// ditto						echo "<img class='watermark' src='style/images/img_watermark.png' alt='Vandmærke' title='Vandmærke' />";										// close the wrapping div					echo "</div>";										/*					echo "<div class='home_blog_image_div_sized'>";						echo "<img class='watermarked' src='".$row['blog_picture_url']."' /><br />";					echo "</div>";										echo nl2br($row['blog_message'])."<br />";					echo $row['blog_userid']."";					*/					echo "<hr />";				}				echo "</div>"; // Wrapper Inner			echo "</div>"; // Wrapper		}		else		{			echo "Ingen blog-nyheder er tilføjet i nu!";		}		$mysqli->close();
/*# Global Design==================================================*//* Set the position property of the relativeParent div to relative.   This will insure that the bottom and right properties of the watermark are relative to the relativeParent div */.relativeParent {	position: relative;}img.watermark {	/*background-image: url(images/img_watermark.png);*/	height: 40px;	width: 40px;	position: absolute;	bottom: 40px;	right: 40px;}.home_news {	border-radius: 5px;	background-color: #C2C2C2;}	.home_blog_wrapper {		clear: both;		width: 100%;	}		.home_blog_wrapper_inner {			margin: 10px;		}				.home_blog_box_header {			width: 100%;		}			.home_blog_box_header_title {width: 100%; font-style: normal; font-weight: bold;}			.home_blog_box_header_blog_post {text-align: left;}				.home_blog_box_header_blog_date {float: right;}		.home_blog_wrapper_inner hr {margin-top: 5px; margin-bottom: 5px;}

Share this post


Link to post
Share on other sites

Thanks everyone! I found a solution :P

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...