Current status of the Ning Platform is always available on the Ning Status Blog.

Tip: Adding A Watermark To Photos

If I remember someone asked about this in the forum so thought I would see what I could come up with using just some css. So here is the code I used and a couple of examples of how it looks. In the code you will see this \00A9 which gives us the copywright symbol and after that is TEST CONTENT which is the text to display so you would alter that bit. Font size is the size of the text and color is the color of the text.

The code goes in your design studio custom css

Example of list page; note it adds it to the add content photo bundles as well

4402476717?profile=RESIZE_710xAnd Example of when a photo is clicked on

4402480839?profile=RESIZE_710x

Here is the CSS I used

.photoDetailPage .image-aspect-4-3::before,
.photoListPage .photoListPage-entry .matrix-media-4-3:before,
.section-photoBundle .matrix-media-4-3:before
{
content: "\00A9 TEST CONTENT";
display: block;
font-size: 2em;
color: lightgrey;
z-index: 1;
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 1
Email me when people reply –

Replies

  • Perfect

  • By the way forgot to add an opacity setting incase you want to adjust it so it blends a little better, just add the opacity line to your code. Basically the smaller the number the more transparent it becomes so 0.2 would be hardly visible where 10 would be fully visible.

    I've used this setting

    opacity: 0.7;

    .photoDetailPage .image-aspect-4-3::before,
    .photoListPage .photoListPage-entry .matrix-media-4-3:before,
    .section-photoBundle .matrix-media-4-3:before
    {
    content: "\00A9 TEST CONTENT";
    display: block;
    font-size: 2em;
    color: lightgrey;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;

    opacity: 0.7;
    }

     

  • NC for Hire

    pretty slick there Bizz!

    • Thanks JF :-)

       

      • Sorry that I know little about these things but ... what would it be like to put the watermark in the lower left?

        A small black line or shadow would also be great to make the text look good in clear photos ... I give an example.

        4901694883?profile=RESIZE_400x

        • Here you go Fernando, this will place it to the bottom left with also a shadow added to the text, I also adjusted the font a little smaller but if you want it bigger you just need to adjust the font size bit in both sections.

          font-size: 1.5em  so if you want it bigger change the 1.5em to something bigger like 2em or you can use pixel sizes like this for example

          font-size: 18px

          4905758299?profile=RESIZE_930x

          HERE IS THE NEW CSS BELOW

          .photoDetailPage .image-aspect-4-3::before,
          .photoListPage .photoListPage-entry .matrix-media-4-3:before,
          .section-photoBundle .matrix-media-4-3:before
          {
          content: "\00A9 TEST CONTENT";
          display: block;
          font-size: 1.5em;
          color: lightgrey;
          z-index: 1;
          position: absolute;
          left: 4px;
          right: 0;
          opacity: 0.7;
          bottom: 2px;
          text-shadow: 1px 2px 1px black;
          }

          .activityFeed-content.photos-only.media-frame .media-img a:before,
          .feedEvent-createPhotoRollup .media-img:before,
          .feedEvent-featurePhoto .media-img:before
          {
          content: "\00A9 TEST CONTENT";
          display: block;
          font-size: 1.5em;
          color: lightgrey;
          z-index: 1000;
          position: absolute;
          left: 4px;
          right: 0;
          opacity: 0.7;
          bottom: 2px;
          text-shadow: 1px 2px 1px black;
          }

          • now the shadows are great and everything ... the mark comes out well in the lower left corner in the mini-slots, but in the large photo it comes out of the photo and is placed in the corner of the page, not the photo. Attachment screenshot.

            4906468477?profile=RESIZE_930x

            • Will look into it and see what I can come up with

  • thanks a lot this option is wonderful

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Garfield Archivist replied to ⚡JFarrow⌁'s discussion
Silly Simple Solutions #5: Inject Youtube Subscribe Button under Videos in Ning
"JFarrow, you're the best. Here is a pic to honor your generosity. I simply used div.left-panel on…"
yesterday
Ana Massien updated their profile photo
yesterday
Bizz replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"Could you share the code you added so I can take a look, ive sent a friend request in case you…"
Friday
Antonio Tarricone replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"yep, tried as per your tip and also double checked that the image was available at the link…"
Friday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Members online feature
"Well poo!  Sometimes it does not work.  I get "There are currently no logged-in members." and I…"
Friday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Members online feature
"Thank you! Thank you! Thank you!  We really need this feature."
Friday
J.Ayvar posted a discussion
 Some time ago Mr. John Bizley   kindly shared some amazing tips and every time I start a new…
Thursday
Bizz replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"Did you copy the image into your file manager and then copy the link from the file manager for the…"
Thursday
Diane Chojnowski commented on Karen Hardy's blog post Terrified about 3.0 upgrade
"I should add that we love the ability to add additiona forums to support conferences."
Thursday
Diane Chojnowski commented on Karen Hardy's blog post Terrified about 3.0 upgrade
"We had no problem migrating to Ning 3.0 and are happy about enhanceed features. We had total…"
Thursday
Antonio Tarricone replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"hey Bizz, i tested the part 2 of your tip.. the image will not load. if i copy the image url and…"
Thursday
Rosas † Negras replied to Anastasia_Ning_Support's discussion
Members online feature
"hi Anastasia ! this was not what we expected ... it would be perfect to see the online members left…"
Wednesday
More…

Meanwhile, you can check our social media channels