Sef Hendrickx

Worked!

• This reply was modified 3 years, 11 months ago by Sef Hendrickx.

Hi Nayeem,

My developer sees that the plugin is using de PHP Dropbox API. It should be possible to retrieve the thumbnail from there.
It seems that you only added so much features on the plugin concerning Dropbox.

Again, i would like to get in touch with you guys to see if we can make this work with my developer as well. That way the plugin can be updated for all users en fix my problem.

Hi Nayeem,

You’re mentioning Additional previews. But i’m not adding mutlple images to the packages.
I’m importing from dropbox so the image preview per item in the package i want to show i based on the url-image i may assume.

The demo shows perfect lay-out but i’m getting to the point that it may only work with uploading from the library.

Hi there,

i made a custom template but everywhere i put the preview it doesn’t show.
Can you please just copy the HTML for me so that i can paste it? 🙂

Right now it looks like this:

<div class=”wpdm-page-template single-col-flat”>

<div class=”downloadbutton”>[download_link]</div>
<br/>
[description]
<br/>
[image_gallery_400x400x4]
<br/>

</div>

Hi Nayeem,

I want to show the preview image as the one, the customer is able to download.
Now it’s states the 404. But it should show the image the customer is about to download.
For example: https://prnt.sc/sk7ae5. That image should be in place of the 404.

We are using mainly PNG en .gif files.

I’m using the following template HTML with CSS:

<div class=”wpdm-page-template single-col-flat”>

<div class=”downloadbutton”>[download_link]</div>
<br/>
[description]
<br/>
[image_gallery_400x400x4]
<br/>

</div>

CSS
.downloadbutton{
float:right;
}

.w3eden .card img {
width: 100%;
}

.w3eden .list-group-item img, .w3eden .card img {
padding: 0;
margin: 0;
}
.w3eden .card-img, .w3eden .card-img-top {
border-top-left-radius: calc(0.25rem – 1px);
border-top-right-radius: calc(0.25rem – 1px);
}
.w3eden .card-img, .w3eden .card-img-top, .w3eden .card-img-bottom {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
}
.w3eden img {
vertical-align: middle;
border-style: none;
}
.card-img-top {
width: 100%;
border-top-left-radius: calc(4px – 2px);
border-top-right-radius: calc(4px – 2px);
}
.w3eden *, .w3eden *::before, .w3eden *::after {
box-sizing: border-box;
}
img {
vertical-align: middle;
border-style: none;
}
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.w3eden .card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
}
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 2px solid rgba(0,0,0,.125);
border-radius: 4px;
}