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:
Support response
Support checklist
<a href="<image file URI (aka URL)>" download="<filename>">Download</a>
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/*
<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>
<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-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>
<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>
.list-item-download {
color: #FFF;
position: relative;
right: 0;
bottom: 50;
text-decoration: none;
}
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
Just use overides and custom css. That way you dont need to worry about updates
Can you share how you accomplished this?