rootKID Posted December 11, 2014 Share Posted December 11, 2014 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: 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! Link to comment Share on other sites More sharing options...
Ingolme Posted December 11, 2014 Share Posted December 11, 2014 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 Link to comment Share on other sites More sharing options...
rootKID Posted December 11, 2014 Author Share Posted December 11, 2014 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 ... in case i make a blog while im at a friends house x) Thanks for the info tho! .P Link to comment Share on other sites More sharing options...
Wolverine Posted December 12, 2014 Share Posted December 12, 2014 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. Link to comment Share on other sites More sharing options...
Day Posted December 17, 2014 Share Posted December 17, 2014 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;} Link to comment Share on other sites More sharing options...
rootKID Posted December 29, 2014 Author Share Posted December 29, 2014 Thanks everyone! I found a solution Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now