WSN Forum

Playing MP3 Audio Files

Thu, 16 Feb 2017 22:59:46 GMT

For some websites, simply linking an MP3 file for download when it's uploaded to a topic isn't good enough -- you may want a built-in audio player in your topic details page. WSN Gallery handles this automatically, but for the other WSN scripts you'll need to make a modification.

To put the audio player in the attached files section of the details page, go to Admin Panel -> Topics -> Topic Fields and edit the "Attach Files" field. Find the "Custom Display HTML" section near the bottom, and add this at the top of that box:

<CONFIG>attachments,sortorder;time,50,ascending;ascending,type='link' AND objectid={LINKEFFECTIVEID} AND (filetitle LIKE '%.mp3'),,,0,0,0,0,0,0,,0</CONFIG>
<div class="audio"><audio controls="controls" src="{DIRURL}/download.php?attachid={ATTACHID}&id={ATTACHID}&action=stream" preload="none"></audio></div>

If you wish to forbid downloads and only allow listening via the player, find this section near the bottom:

<ul>

<IF not {ATTACHISIMAGE}>
<li><a href="{ATTACHDOWNLOADURL}" title="{ATTACHLABEL}">{ATTACHFILETITLE}</a> ({ATTACHKB} {LANG_GENERAL_KB}, {ATTACHDOWNLOADS} {LANG_DETAILS_DOWNLOADS})</li>
</IF>

</ul>

and replace it with

<ul>

<IF not {ATTACHISIMAGE}>
<IF {ATTACHEXTENSION} is not mp3>
<li><a href="{ATTACHDOWNLOADURL}" title="{ATTACHLABEL}">{ATTACHFILETITLE}</a> ({ATTACHKB} {LANG_GENERAL_KB}, {ATTACHDOWNLOADS} {LANG_DETAILS_DOWNLOADS})</li>
</IF>
</IF>

</ul>

That's it! You'll now automatically see an audio player on the details pages of topics that have mp3 files.

Dropzone for drag and drop uploads

Tue, 10 Jan 2017 23:34:31 GMT

For some users, drag and drop is easier or more intuitive than using a file selector to upload files. If you'd like to allow both methods, no problem -- just read on to find out how to set up a dropzone which can also open a file selector when clicked.

There are three templates we'll need to change at Admin -> Themes -> Manage Templates. First, in the "File Uploader" template, replace the section

<div class="fileupload-buttonbar">
<div class="fileupload-buttons">

<span class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" id="uploaderfiles" multiple>
</span>
<span class="fileupload-process"></span>
</div>
<div class="fileupload-progress fade" style="display:none">

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-extended"> </div>
</div>
</div>

with

<div class="dropzones" id="dropzone">
<br><br>Drag and drop files here, or click to choose files
<input type="file" name="files[]" id="uploaderfiles" multiple style="display: none;">
</div>
<div class="fileupload-buttonbar">
<div class="fileupload-progress fade" style="display:none">

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-extended"> </div>
</div>
</div>

Next, in the "Additional Document Ready Function Content" template, add this:

$("#dropzone").on("click",function(){// here when click on dropzone div
$("#dropzone input[type='file']").trigger('click');// then trigger input type=file change event
});
$("#dropzone input[type='file']").on("click",function(e){ e.stopPropagation(); });

$(document).bind('dragover', function (e) {
var dropZone = $('#dropzone'),
timeout = window.dropZoneTimeout;
if (!timeout) {
dropZone.addClass('in');
} else {
clearTimeout(timeout);
}
var found = false,
node = e.target;
do {
if (node === dropZone[0]) {
found = true;
break;
}
node = node.parentNode;
} while (node != null);
if (found) {
dropZone.addClass('hover');
} else {
dropZone.removeClass('hover');
}
window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null;
dropZone.removeClass('in hover');
}, 100);
});

Finally, in your stylesheet at the bottom, add

.dropzones
{
background: #FFFFFF;
background-position: center;
width: 100%;
height: 190px;
text-align: center;
font-weight: bold;
font-size: 150%;
border: 3px dashed #AACCFF;
cursor: pointer;
}

#dropzone.in
{
width: 100%;
height: 190px;
line-height: 200px;
font-size: larger;
}
#dropzone.hover
{
background: #EEEEEE;
background-position: center;
}
#dropzone.fade
{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 1;
}

Change the colors and other details on .dropzones above as you desire to fit your theme.

That's all. Check any page where you upload files and you'll now see a dropzone box which you can drag files to, or which you can click anywhere inside to get a file chooser.

Landscape and Portrait Thumbnails

Tue, 15 Nov 2016 22:06:23 GMT

Sometimes you may wish to change the dimensions of a thumbnail depending on whether the image is in a landscape or portrait aspect ratio. The {ATTACHTHUMBORIENTATION} / {LINKTHUMBORIENTATION} template variables allow you do make a conditional to do that, like this:

<IF {ATTACHTHUMBORIENTATION} is portrait>{ATTACHTHUMBIMAGE[100 <,> 135]}<ELSE>{ATTACHTHUMBIMAGE[180 <,> 135]}</IF>

You can also use {LINK variables to check the Xth file of the topic (file #1 in this example): <IF {LINKTHUMBORIENTATION[1]} is portrait>{LINKTHUMBIMAGEX[1 <,> 100 <,> 135]}<ELSE>{LINKTHUMBIMAGEX[1 <,> 180 <,> 135]}</IF>

One particular use case is when you want a row of thumbnails that all have exactly the same height but can vary between two widths depending whether they're landscape or portrait. There's a special parameter you can use on {LINKIMAGE} or {ATTACHIMAGE} to force it to stretch to a specific size instead of keeping the original aspect ratio. If you want your row of images to be all exactly 135px tall, and to be 100px wide when portrait or 180px wide when landscape, you can do this:

<IF {ATTACHTHUMBORIENTATION} is portrait>{ATTACHTHUMBIMAGE[100 <,> 135 <,> 0 <,> 0 <,> 0 <,> 0 <,> 0 <,> true]}<ELSE>{ATTACHTHUMBIMAGE[180 <,> 135 <,> 0 <,> 0 <,> 0 <,> 0 <,> 0 <,> true]}</IF>

Or for the first images of topics:

<IF {LINKTHUMBORIENTATION} is portrait>{LINKTHUMBIMAGE[100 <,> 135 <,> 1 <,> 0 <,> 0 <,> 0 <,> 0 <,> true]}<ELSE>{LINKTHUMBIMAGE[180 <,> 135 <,> 1 <,> 0 <,> 0 <,> 0 <,> 0 <,> true]}</IF>

Showing an Image Attachment Inline

Fri, 10 Jun 2005 21:52:00 GMT

Sometimes you may want to show an image attachment in the middle of some text, inside a topic description or a post, instead of at the bottom. To do this, type [image]filename.jpg[/image] where you want it, and where the filename of the attached file you want is filename.jpg. This will work as long as you've attached a file with that name to the same place (you can't reference a file from a different topic).

Don't confuse this with an [img] BB Code which would allow you to show an image from a remote URL.

As of WSN 10.0.18, the [image] tag now accepts a size parameter. Use this to generate a thumbnail of a specified size WIDTHxHEIGHT. For example, [image=300x250]filename.jpg[/image] will show a 300 pixel wide by 250 pixel tall thumbnail image of the filename.jpg attachment.

Custom File Attachment Fields

Sun, 21 Mar 2004 13:02:55 GMT

By using custom file fields, you can have you visitors upload several files at once for a single topic/forum/etc. For topics and posts this isn't so important since you can already let people upload any number of files, but sometimes you may want a particular image separated from the others (for example, you can use a custom file field for a company logo while the regular upload area is used for product images). You can also add file uploads to forums and members using custom file fields.

In order to get started on creating a custom file field, visit Admin Panel -> Customizations -> Add Fields. Select the type of object (topic, forum, etc), then for "input type" select "file attachment". Note it will automatically append 'attach' to the name you give the field. Once you click 'Add Field' the template code will be added to the custom field add/edit template as usual.

Now that you have the custom file field working, you'll want to make use of it in the display (most likely in the 'show topics in forum' and/or 'main index' templates for a forum, the topic bit or topic details for topics, or the profile for a member). Here's a reference of the template variables you will have available for such display... replace 'CUSTOMATTACH' in each example with the uppercase version of the name of your custom file attachment field. These examples assume it's a forum field, replace {CAT with the appropriate prefix if it's another type of field.

{CATCUSTOMATTACHTITLE} - The name of the file for display purposes (the same name it had on the computer of the person who uploaded it).
{CATCUSTOMATTACHNAME} - The actual name on disk of the file in the attachments directory.
{CATCUSTOMATTACHDOWNLOADS} - The number of times the file has been downloaded so far.
{CATCUSTOMATTACHFILESIZE} - The size, in bytes, of the file.
{CATCUSTOMATTACHKB} - The size, in kilobytes, of the file.
{CATCUSTOMATTACHWIDTH} - For images, the width of the image in pixels.
{CATCUSTOMATTACHHEIGHT} - For images, the height of the image in pixels.
{CATCUSTOMATTACHDOWNLOADURL} - A download url which you can put in an a href HTML tag for a link or an img tag to display an image.
{CATCUSTOMATTACHTHUMBURL} - A thumbnail url which you can put in an HTML tag to display.
-- Optional parameters: width and height. Example: {CATCUSTOMATTACHTHUMBURL[500 <,> 300]} for a 500x300 thumbnail.
{CATCUSTOMATTACHTHUMBIMAGE} - The full img tag for a thumbnail.
{CATCUSTOMATTACHISIMAGE} - Determines if the file is an image. (new in 8.0)
{CATCUSTOMATTACHIMAGE} - The full image code of the thumbnail of the image. (new in 8.0)
{CATCUSTOMATTACHSLIDELINK} - A thumbnail that opens in a lightbox when clicked (images only).

To conditionalize the display to only show when there's a file attached, use ... around it. Some common examples of what you'll want to use as your display template code:

Download Link: <a href="{CATCUSTOMATTACHDOWNLOADURL}">Download {CATCUSTOMATTACHTITLE}</a>
Thumbnail of an image (use large thumbnails to display full image, this is much more kind to the server than using the download url because it caches): <img src="{CATCUSTOMATTACHTHUMBURL[100 <,> 100]}">

Note: In all the examples above, replace CUSTOMATTACH and customattach with the name of the custom file attachment field you've added. If you're doing this for a topic field instead of a forum field, replace {CAT with {LINK everywhere above... for a member field replace {CAT with {MEMBER.