• Welcome to the Chevereto user community!

    Here users from all over the world gather around to learn the latest about Chevereto and contribute with ideas to improve the software.

    Please keep in mind:

    • 😌 This community is user driven. Be polite with other users.
    • 👉 Is required to purchase a Chevereto license to participate in this community (doesn't apply to Pre-sales).
    • 💸 Purchase a Pro Subscription to get access to active software support and faster ticket response times.
  • Chevereto Support CLST

    Support response

    Support checklist

Download Button on Hover

Fiala06

Chevereto Member
Is it possible to add a download button on image hover next to the like button?

Thanks

Te5yuRL.png
 
I can remember a few threads asking the same and I don't think they figured it out how to fetch the image url from that view. If you know a programmer with some relevant skills ask for a custom implementation or post a job like this on eg; freelancer.
 
The download button is just a link pointing to the image file URI + the download attribute tag.
Code:
<a href="<image file URI (aka URL)>" download="<filename>">Download</a>

To add a button in listings, you need to add this custom HTML into app/themes/Peafowl/tpl_list_item/*
 
The download button is just a link pointing to the image file URI + the download attribute tag.
Code:
<a href="<image file URI (aka URL)>" download="<filename>">Download</a>

To add a button in listings, you need to add this custom HTML into app/themes/Peafowl/tpl_list_item/*

Thanks, I do OK with basic HTML. I'm one of those that will try a million times until it works.

So there would have to be some wildcard for the filename right? Otherwise, you would have to create a separate download URL for every image. This one might be over my head. I'm not sure how I would tie in a separate php file into the view.
 
Check the files in the path that I indicated previously and you will find out that there are plenty wildcards being used.
 
Yep, implemented it on photoland yesterday the right way. The demo I linked works fine too but the download button shows on albums because I thew everything in item_like.php file. (tip: create a new php file, don't throw the code into an existing file o_O)
 
Hello
I have try to make the same but i dont arrive to modifi the folder
did you have a exemple ?
 
Thanks I got it somewhat working. I'll have to play with it more later to figure out styling.

This is what I used:

<a href="%IMAGE_DISPLAY_URL%" download="%IMAGE_NAME% " class="btn-icon icon-download5" target="_blank" ></a>

5eYlWrm.png
 
Just got this working myself. I still need to work on the styling a little bit, but for the main part, works great and as intended. Here's what I did:

I edited this file:
/app/themes/PeaFowl/tpl_list_item/item_like.php

Current code:

Code:
<div class="list-item-like" data-action="like">
    <span class="btn-like btn-liked icon-heart3"></span>
    <span class="btn-like btn-unliked icon-heart4"></span>
</div>

Here is what I added ABOVE that code:

Code:
<div class="list-item-download" style="float: right;">
    <a href="%IMAGE_DISPLAY_URL%" download="%IMAGE_NAME%" class="btn-icon icon-download5" target="_blank" ></a>
</div>

In the end, the code all together looked like this:

Code:
<div class="list-item-download" style="float: right;">
    <a href="%IMAGE_DISPLAY_URL%" download="%IMAGE_NAME%" class="btn-icon icon-download5" target="_blank" ></a>
</div>
<div class="list-item-like" data-action="like">
    <span class="btn-like btn-liked icon-heart3"></span>
    <span class="btn-like btn-unliked icon-heart4"></span>
</div>

If you'd like to force users to sign-up for an account before being able to download through that icon, you can use this code:

Code:
<div class="list-item-download" style="float: right;">
    <a href="%IMAGE_DISPLAY_URL%" data-login-needed download="%IMAGE_NAME%" class="btn-icon icon-download5" target="_blank" ></a>
</div>
<div class="list-item-like" data-action="like">
    <span class="btn-like btn-liked icon-heart3"></span>
    <span class="btn-like btn-unliked icon-heart4"></span>
</div>

Also, I edited the CSS file which you can find here:
/app/themes/PeaFowl/style.css

I added this style code to that file:

CSS:
.list-item-download {
        color: #FFF;
        position: relative;
        right: 0;
        bottom: 50;
        text-decoration: none;
    }


I suggest to anyone making these changes to create a child-theme for edits and changes. This way it doesn't get 'updated' and lost in an update. I'm sure there is documentation on this forum in regards to doing something like this.

Hope this helps people!

Cheers
 
Last edited:
Just got this working myself. I still need to work on the styling a little bit, but for the main part, works great and as intended. Here's what I did:

I edited this file:
/app/themes/PeaFowl/tpl_list_item/item_like.php

Current code:

Code:
<div class="list-item-like" data-action="like">
    <span class="btn-like btn-liked icon-heart3"></span>
    <span class="btn-like btn-unliked icon-heart4"></span>
</div>

Here is what I added ABOVE that code:

Code:
<div class="list-item-download" style="float: right;">
    <a href="%IMAGE_DISPLAY_URL%" download="%IMAGE_NAME%" class="btn-icon icon-download5" target="_blank" ></a>
</div>

In the end, the code all together looked like this:

Code:
<div class="list-item-download" style="float: right;">
    <a href="%IMAGE_DISPLAY_URL%" download="%IMAGE_NAME%" class="btn-icon icon-download5" target="_blank" ></a>
</div>
<div class="list-item-like" data-action="like">
    <span class="btn-like btn-liked icon-heart3"></span>
    <span class="btn-like btn-unliked icon-heart4"></span>
</div>

If you'd like to force users to sign-up for an account before being able to download through that icon, you can use this code:

Code:
<div class="list-item-download" style="float: right;">
    <a href="%IMAGE_DISPLAY_URL%" data-login-needed download="%IMAGE_NAME%" class="btn-icon icon-download5" target="_blank" ></a>
</div>
<div class="list-item-like" data-action="like">
    <span class="btn-like btn-liked icon-heart3"></span>
    <span class="btn-like btn-unliked icon-heart4"></span>
</div>

Also, I edited the CSS file which you can find here:
/app/themes/PeaFowl/style.css

I added this style code to that file:

CSS:
.list-item-download {
        color: #FFF;
        position: relative;
        right: 0;
        bottom: 50;
        text-decoration: none;
    }


I suggest to anyone making these changes to create a child-theme for edits and changes. This way it doesn't get 'updated' and lost in an update. I'm sure there is documentation on this forum in regards to doing something like this.

Hope this helps people!

Cheers


You can also put the css on the settings>theme>custom css
 
Can you share how you accomplished this?

overrides= go to theme directory, take file you want to copy and copy it, paste it in overrides in the right folder according to where you found the original file, make your edits on that file instead of the original file and it will override it.


Custom css= dashboard>theme>scroll down and paste css in custom css
 
Back
Top