How do I hide the bottom part of images in WordPress?

Niks December 11, 2011
Pinterest Stumbleupon Whatsapp

How do I hide bottom part of images in WordPress?

I have added watermark to the bottom parts of images on my site . But I want to hide the bottom part during display on the site but when the user downloads the image he should get the image with the bottom watermark.

I read somewhere this can be done by adding some codes to the style.css file in wordpress. Anyone knows how to ?

Ads by Google

  1. James Bruce
    December 13, 2011 at 12:34 am

    Just CSS code wont do this, I dont think. You would need some kind of a bounding DIV or SPAN around the images, then set the appropriate height and width on those to be just less than the image (ie, minus the bit you want to hide), then set the overflow:hidden CSS property on the bounding box. That would hide anything that doesnt fit into it's area. 

    Unfortunately, this wont work retroactively on all previous posts, as it would require you to add the relevant div /span tags by hand. 

    if you wanted to do with inline css, just surround the image with :

    • Niks
      December 13, 2011 at 2:46 am

      Can you show me a example please ? I don't know anything about coding :(

    • Niks
      December 13, 2011 at 3:01 am

      It worked . But is there a code for hiding some pixels of the image . Like in the above code it was to show top 300px . Any code for hiding the bottom pixels ?

      Can you please visit this page http://wordpress.org/support/topic/plugin-watermark-my-image-hiding-the-watermark-from-images and explain me how to implement this in WordPress :) .The author has written some codes but I don't know how to use them . :(

      • James Bruce
        December 14, 2011 at 1:30 am

        Ah, thats a better way to do it, yes. Open an FTP connection to your site, and go to the wp-content/themes/YOUR THEME/ directory. Edit the style.css file. Add the following lines at the end of it:

        .entry img {margin:0 auto -33px;}
        .entry p {overflow:hidden;}

        This is difficult to tell you exactly if it will work without seeing your site though - the css for every theme can be very different. Perhaps you could post your URL?

        • Niks
          December 14, 2011 at 1:37 am

          I haven't published the site yet .  I am using Thesis 1.8.2 theme on Bitnami WordPress Stack http://bitnami.org/stack/wordpress ( You should write about this software on MUO if you haven't yet ) . Will this work on Thesis ?

        • James Bruce
          December 15, 2011 at 5:08 pm

          Sorry Nik, I can't really help further without being able to access the site and play around with Firebug. I also can't stand theme frameworks like Thesis, but I should be able to debug if I could access the site in a browser. Can you open up your local install to public access perhaps?

          Aside, I wouldnt recommend any non-standard install of wordpress .. the basic install method is ridiculously easy to deploy with needing complicated stacks of any sort, and they will cause difficulties down the line when it comes to either migrating or upgrading a site built like that. 

        • Niks
          December 16, 2011 at 11:32 am

          Can I mail you my style.css file ?

        • James Bruce
          December 16, 2011 at 2:33 pm

          Without the site framework behind it, that wouldn't help, no. You could perhaps save a complete html version of a page from the site, though it really woudl be easiest to just put the site live somewhere and let us look at it. Where are you running it? Locally? Could you set up a dyndns domain for us to access from?

        • Niks
          December 16, 2011 at 3:00 pm

          How do I do that ?

        • James Bruce
          December 16, 2011 at 4:12 pm

          Uh, sorry, I'm losing the threading now. Do what? Where are you currently running WordPress? What setup do you have?

        • Niks
          December 16, 2011 at 4:42 pm

          on my pc .. on Bitnami WordPress Stack  
          http://bitnami.org/stack/wordpress

        • James Bruce
          December 19, 2011 at 11:24 am

          In that case, please open up port 80 on your router, and tell it to forward to your local IP address that you have the bitnami stack running on. Then email me your public ip address, and i can access from there. (jamesbruce AT this site). 

          For help on port forwarding, check out your router here: http://portforward.com/

          Also, read the section on port forwarding that justin wrote in his article here: http://www.makeuseof.com/tag/connect-home-network-dyndns/

        • Niks
          December 14, 2011 at 1:37 am

          I haven't published the site yet .  I am using Thesis 1.8.2 theme on Bitnami WordPress Stack http://bitnami.org/stack/wordpress ( You should write about this software on MUO if you haven't yet ) . Will this work on Thesis ?

        • Niks
          December 14, 2011 at 1:37 am

          I haven't published the site yet .  I am using Thesis 1.8.2 theme on Bitnami WordPress Stack http://bitnami.org/stack/wordpress ( You should write about this software on MUO if you haven't yet ) . Will this work on Thesis ?

        • Niks
          December 14, 2011 at 1:58 am

          I added 

          .entry img {margin:0 auto -33px;}.entry p {overflow:hidden;} to the last line . Doesn't work :(

    • Jay
      December 13, 2011 at 3:38 am

      Ok that's smart. it will do what the poster of the question asked for.

      but I suggested to display photo directly with or without watermark because of a reason.

      what is the purpose of doing this coding? To prevent others from saving the image without watermark ?

      Taking screenshots is easier than removing watermarks.

      If the image is displayed without the watermark on the site, anyone can capture it with a few clicks or keystrokes.

      while if you display watermarked image,
      Many will not edit the image, and the will save the image with watermark.

      As I said earlier, the one who wants to remove your watermark will remove it, and the one who don't want to do it, will not do it.

      Simply upload the watermarked image, so it will be the users who will have to work on the image to remove watermark, not you.

      • Niks
        December 13, 2011 at 3:47 am

        What does this have to do with my question ?

        • Jay
          December 13, 2011 at 4:43 am

          By doing this, you will allow visitors to save the image without the watermark with an easier option.

        • Niks
          December 13, 2011 at 10:16 am

          Again . What does this have to do with my question ? 

  2. FIDELIS
    December 11, 2011 at 9:51 pm

    Hello, the following can get you start with what you want:

    http://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of-an-image-in-html-css

    Hopefully, it can be implemented in wordpress.

  3. Jay
    December 11, 2011 at 3:40 am

    I don't know, but why do you want to hide the watermark ?
    watermarks can be removed using image editing.
    So it does not matter.
    You can upload images with or without watermark.

    • timmyjohnboy
      December 11, 2011 at 6:54 pm

      Just because watermarks are able to be removed, doesn't mean that there isn't a use for them. Placing a watermark at the bottom of an image can be used for brand recognition or as a friendly reminder not to steal copyrighted material.

      Going through the bother of removing a watermark can be cumbersome and therefore a deterrent. Even locks, btw, are only useful for keeping honest people honest :)

      • Jay
        December 11, 2011 at 7:01 pm

        I didn't say watermark does not matter,
        I said watermark does not matter to those who want to remove it and reuse the image.
        If you want to use it for brand recognition, obviously you don't need to hide it. :)

        • James Bruce
          December 13, 2011 at 12:35 am

          Not true. The poster of the qquestion clearly states he has ADDED the watermark. He doesnt want this visible on his own blog posts, but when someone copies the image it will be visible (using the method I outline below). Obviously, he DOES want to hide it on his own site. 

        • Jay
          December 13, 2011 at 3:12 am

          What is Not true ?! Did you even read my comments ?
          I just suggested him not to do it with a reason.
          I know what he asked for.

        • James Bruce
          December 14, 2011 at 1:33 am

          "If you want to use it for brand recognition, obviously you don't need to hide it. :)" is not true. He may want to use it for brand recognition, but not on his own site. He wants his brand / name recognized when the image is reposted elsewhere. Many sites do this. 9gag, for instance. 

          Yes, its easy to remove, but for those who will remove there is no good protection. The watermark will at least help in cases where the people cant be bothered to remove it or actually *want* to give credit where it is due. Reagrdless, this is what Timmy wants!

        • Jay
          December 14, 2011 at 1:59 am

          Yes, just checked 9gag, you just have to crop the watermark.
          no need of screenshot.
           
          And that's why I tried to tell that adding watermark on (not below) the image directly is simpler and better.

          But that's not he wants and it does not have anything to do with his question :)

        • James Bruce
          December 15, 2011 at 5:11 pm

          It is exactly what he wants and has everything to do with his question. Now please, shh if you can't actually help. We don't need a moral discussion on the merits of watermarks. 

        • Jay
          December 15, 2011 at 6:00 pm

          Not again! You often interpret something very different. I don't talk like this.
          "whatever I said had nothing to do with his question, according to him, and it was not what he wanted", that's what I tried to say. (you can read again.)
          and It was not moral discussion, I discussed about what was the simplest thing possible according to me.

        • James Bruce
          December 16, 2011 at 9:26 am

          Perhaps if I often misinterpret it, it is perhaps conceivable that the way you said it is in fact quite open to misinterpretation?

        • Jay
          December 16, 2011 at 10:44 am

          Well, we are responsible for what we say, not what others understand.
          I appreciate your efforts of voluntarily helping me.
          Thanks.

Ads by Google