Resolve

A collaborative online community that brings together photographers and creative professionals of every kind to find ways to keep photography relevant, respected, and profitable.

Have an idea for a post?

Want us to find an answer to your question? Interested in becoming a contributor?Email us

‹ Home

Posts Tagged: images

September 13th, 2018

How to Add Borders to Your Website Images

Posted by liveBooks

Your website is the online extension of your brand, and as such, it should follow the same visual guidelines as your entire business. While your logo is your own trademark that distinguishes your brand from your competitors, it alone does not tell your business’ story, its values nor does it depict the entire picture.

The tone of your business voice is an important aspect of how your market relates to you. Your marketing campaigns and how you choose to run them are indicative of your business’ core values. The fonts you use when addressing these messages can become trademarks of your brand. And the colors – think about the Coca-Cola red – not only is it unique, it’s also recognized by millions of people all around the world.

Colors matter when you create your brand, just as much as they do when they accompany your services and products. It is the fastest way to create a connection between your brand and your audience. This precise reason is why the liveBooks website templates can be customized beyond their initial state.

Let’s focus on adding borders to the images you upload on your website. These borders are a great tool to use that give each image its own presence on your website. They can be white and thin, which goes well with any website that has a color background, they can be colorful and bold, or anywhere in between.

There are two ways you can go about to adding borders to your images.

  1. Sitewide borders – In your design editor go to Sitewide – Images. Enable Show borders and define their color, opacity and width. This will add borders to all images on your website. 
  2. Gallery borders – In the design editor go to the page with the gallery or image you want to customize. Scroll down to the image settings and enable borders.

If you added site-wide borders and want to disable them on specific pages, you can do so by following the second set of commands. When you’re happy with the result, publish your page and the changes will instantly become visible.

When changing your colors you have to make sure you’re picking the right one. Going solely on visual similarity does not guarantee you’ve made the right choice and you need consistency in your brand. One reason you might not pick the right color is your monitor’s colors: sometimes it’s calibrated and it shows the precise colors you need, but most often it’s not.

That’s why you need to check the HEX code of your brand colors and add it when using the design editor. If you know the name of your color, you can find its HEX code here. In our design editor you can either use the HEX code, or the RGB (red-green-blue) inputs for your colors.

So what are you waiting for? Give this feature a try! Remember, you can always save your design before making drastic changes to your website, so your work is always safe.

Don’t have a website yet? We offer a two week free trial for all our websites, so you can play around our editors and create the perfect website for your business.

June 4th, 2018

How to Protect Your Images

Posted by liveBooks

Piracy and image theft can be an issue among content creators and most of the time it’s only one right-click away. One way of ensuring ownership on your images is adding watermarks on each item before uploading it online. While this is a common practice among some artists, we understand you may be hesitant to use them. Here are the pros and cons of using watermarks on your online portfolios.

The easiest way for someone to take your photograph is to right-click on it and save the image on their computer or to right-click and copy the image address. But what if we could disable right-clicking on all your images?

The way to disable right-clicking on liveBooks requires utilizing the HTML content block feature. And it’s easy! All you have to do is copy and paste a HTML snippet that will be provided in this article into a HTML block from your content editor and publish that new change. You can disable right-clicking on images on your entire website or on specific pages.

Follow these instructions to disable right-click on images throughout your entire website:

  1. In your Content editor, under Global Content, select Footer. 
  2. Create an HTML content block within the footer.
  3. Copy and paste this HTML snippet to the HTML content block you created: <script type=”text/javascript”>
    //<![CDATA[
    /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Disable context menu on images by GreenLava (BloggerSentral.com)
    Version 1.0
    You are free to copy and share this code but please do not remove this credit notice.
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
    var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
    if (clickedTag == “IMG”) {
    alert(alertMsg);
    return false;
    }
    }
    var alertMsg = “Image context menu is disabled”;
    document.oncontextmenu = nocontext;
    //]]>
    </script>
  4. Save, publish and you’re done!

If you wish to only add this feature to a specific page, follow these instructions:

  1. In the Content editor, click into the Page you wish to add this feature to.
  2. Create an HTML content block to this page. 
  3. Add the following HTML snippet to the HTML content block you created: <script type=”text/javascript”>
    //<![CDATA[
    /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Disable context menu on images by GreenLava (BloggerSentral.com)
    Version 1.0
    You are free to copy and share this code but please do not remove this credit notice.
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
    var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
    if (clickedTag == “IMG”) {
    alert(alertMsg);
    return false;
    }
    }
    var alertMsg = “Image context menu is disabled”;
    document.oncontextmenu = nocontext;
    //]]>
    </script>
  4. Save, publish and you’re done!

Now when you or anyone else will right-click your images, a notification pop-up will show up instead. It will look something like this, depending on the operating system installed on the visitor’s computer, phone or tablet. (For phone or tablets, these chances affect the action generated by long pressing on your images.)

The default message when trying to right-click an image is ‘Image context menu is disabled’, but you can replace it to whatever you like in the code above. If you prefer not to show the alert box at all, just delete this portion of the code:

alert(alertMsg);

return false;

}

}

var alertMsg = “Image context menu is disabled”;  

Our support specialists are happy to help you make any changes you want on your liveBooks website. Book a call, send an email or chat directly from our website!



FREE EBOOK

Learn how to engage your audience and
build brand recognition across social
channels. Learn more...

Free eBook

Search Resolve

Search

READY TO GET STARTED?

Pick your package. Pick your design.
No credit card required.

Start 14-day Free Trial
Compare packages