Download Button

  • Resolved genefreak

    (@genefreak)


    4 years, 7 months ago

    Hi there. Hope you are all safe during this difficult time for the world.

    I am wondering if it’s possible to assign a custom link to the download button on thumbnails and lightbox in galleries. I am a provider of stock photography and video to stock agencies and I would like the button to link to the individual purchase page on shutterstock.

    If this is possible either in the UI or by modifying the code (if this is permitted – not sure how much is open source).

    Many thanks and stay safe.

    Steven Granville.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    a user defined link I am also interested in.

    Best Regards
    Georg

    Plugin Author Rattus

    (@pasyuk)

    You can add any Link to your image and it will show up in the gallery and on thumbnails as button with a “link” icon.

    If you want to change those icon to “download” icon in UltraBox module, then add this CSS to Custom CSS field of your gallery:

    .gmedia_itemsButtons[type="link"] {
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 64 64' height='64px' id='Layer_1' version='1.1' viewBox='0 0 64 64' width='64px' xml:space='preserve' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' style='fill: rgb(49, 49, 49);'%3E%3Cg%3E%3Cpath d='M40.001,36.254c0,3.299-2.673,5.971-5.97,5.971H29.97c-3.297,0-5.97-2.672-5.97-5.971H8v17c0,2.209,1.791,4,4,4h40 c2.209,0,4-1.791,4-4v-17H40.001z'%3E%3C/path%3E%3Cpath d='M31.916,33.246l7.608-7.452c0.747-0.733,0.506-1.327-0.543-1.327h-4.565V9.246c0-1.381-1.119-2.5-2.5-2.5 s-2.5,1.119-2.5,2.5v15.221h-4.565c-1.05,0-1.291,0.595-0.542,1.327L31.916,33.246z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
}

.gmedia_itemsButtons[type="link"]:hover {
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 64 64' height='64px' id='Layer_1' version='1.1' viewBox='0 0 64 64' width='64px' xml:space='preserve' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' style='fill: rgb(0, 0, 0);'%3E%3Cg%3E%3Cpath d='M40.001,36.254c0,3.299-2.673,5.971-5.97,5.971H29.97c-3.297,0-5.97-2.672-5.97-5.971H8v17c0,2.209,1.791,4,4,4h40 c2.209,0,4-1.791,4-4v-17H40.001z'%3E%3C/path%3E%3Cpath d='M31.916,33.246l7.608-7.452c0.747-0.733,0.506-1.327-0.543-1.327h-4.565V9.246c0-1.381-1.119-2.5-2.5-2.5 s-2.5,1.119-2.5,2.5v15.221h-4.565c-1.05,0-1.291,0.595-0.542,1.327L31.916,33.246z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.gm_thumb_itemMenu .gmedia_itemsButtons[type="link"] {
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 64 64' height='64px' id='Layer_1' version='1.1' viewBox='0 0 64 64' width='64px' xml:space='preserve' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' style='fill: rgb(255, 255, 255);'%3E%3Cg%3E%3Cpath d='M40.001,36.254c0,3.299-2.673,5.971-5.97,5.971H29.97c-3.297,0-5.97-2.672-5.97-5.971H8v17c0,2.209,1.791,4,4,4h40 c2.209,0,4-1.791,4-4v-17H40.001z'%3E%3C/path%3E%3Cpath d='M31.916,33.246l7.608-7.452c0.747-0.733,0.506-1.327-0.543-1.327h-4.565V9.246c0-1.381-1.119-2.5-2.5-2.5 s-2.5,1.119-2.5,2.5v15.221h-4.565c-1.05,0-1.291,0.595-0.542,1.327L31.916,33.246z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: 70% 70%;
}

.gm_thumb_itemMenu .gmedia_itemsButtons[type="link"]:hover {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 64 64' height='64px' id='Layer_1' version='1.1' viewBox='0 0 64 64' width='64px' xml:space='preserve' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' style='fill: rgb(0, 0, 0);'%3E%3Cg%3E%3Cpath d='M40.001,36.254c0,3.299-2.673,5.971-5.97,5.971H29.97c-3.297,0-5.97-2.672-5.97-5.971H8v17c0,2.209,1.791,4,4,4h40 c2.209,0,4-1.791,4-4v-17H40.001z'%3E%3C/path%3E%3Cpath d='M31.916,33.246l7.608-7.452c0.747-0.733,0.506-1.327-0.543-1.327h-4.565V9.246c0-1.381-1.119-2.5-2.5-2.5 s-2.5,1.119-2.5,2.5v15.221h-4.565c-1.05,0-1.291,0.595-0.542,1.327L31.916,33.246z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.gmedia_itemsButtons[type="link"] svg {
    visibility: hidden;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Download Button’ is closed to new replies.