phpBB Snippetsshields.io badges for attachment download stats

Post Reply
User avatar
Topic Starter
Restless Rancor
Great Britain

Site Admin
New Member
Posts: 48
Joined: October 15th, 2018, 3:14 pm
Age: 25
Location: Hampshire, England
Contact:

shields.io badges for attachment download stats

#1

Post by Restless Rancor » October 15th, 2018, 7:07 pm


This snippet adds shields.io images to attachment details.
 ! Message from: Restless Rancor
This snippet has been converted into an extension. Click [HERE] to go to the development topic.
There are two parts:
  1. Attachment details. [Go to...]
  2. Attachment comment interception. [Go to...]
    • I use the term 'interception' because we're going to use regex {% if %} statements to read the comment and display different results depending on the true/false result of the statement.
    • I don't fully understand regex and it took several attempts to get the desired result.
    • Only do this is you have a working understanding of regex (and therefore can alter it to suit your needs) or want the exact outcome it produces.


Tested On:

Part 1: Attachment details. [Go to top]

Open: root/language/en/common.php

Find:

Code: Select all

	'DOWNLOAD_COUNTS'		=> array(
		0	=> 'Not downloaded yet',
		1	=> 'Downloaded %d time',
		2	=> 'Downloaded %d times',
	),
Replace With:

Code: Select all

	'DOWNLOAD_COUNTS'		=> array(
		0	=> '0',
		1	=> '%d',
		2	=> '%d',
	),
Find:

Code: Select all

	'VIEWED_COUNTS'		=> array(
		0	=> 'Not viewed yet',
		1	=> 'Viewed %d time',
		2	=> 'Viewed %d times',
	),
Replace with:

Code: Select all

	'VIEWED_COUNTS'		=> array(
		0	=> '0',
		1	=> '%d',
		2	=> '%d',
	),
Open: root/styles/prosilver/template/attachment.html

Find:

Code: Select all

<dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
Replace with:

Code: Select all

<dd>{_file.DOWNLOAD_NAME} <img src="https://img.shields.io/badge/filesize-{_file.FILESIZE} {_file.SIZE_LANG}-blue.svg"> <img src="https://img.shields.io/badge/views-{_file.L_DOWNLOAD_COUNT}-blue.svg"></dd>
Find:

Code: Select all

<dd>({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
Replace with:

Code: Select all

<dd><img src="https://img.shields.io/badge/filesize-{_file.FILESIZE} {_file.SIZE_LANG}-blue.svg">&nbsp;<img src="https://img.shields.io/badge/downloads-{_file.L_DOWNLOAD_COUNT}-blue.svg"></dd>
Find:

Code: Select all

<p><a href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a> [ {_file.FILESIZE} {_file.SIZE_LANG} | {_file.L_DOWNLOAD_COUNT} ]</p>
Replace with:

Code: Select all

<p><a href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a> <img src="https://img.shields.io/badge/filesize-{_file.FILESIZE} {_file.SIZE_LANG}-blue.svg">&nbsp;<img src="https://img.shields.io/badge/downloads-{_file.L_DOWNLOAD_COUNT}-blue.svg"></p>
Note: You can customize your buttons to any format provided by https://shields.io. Simply replace the full url between the quotes " in <img src=" ... "> but remember to keep the language calls e.g. {_file.L_DOWNLOAD_COUNT} in their appropriate position.

Here are some examples of what you can use and how they will display on your forum:
  1. <img src="https://img.shields.io/badge/filesize-{_file.FILESIZE} {_file.SIZE_LANG}-bcbcbc.svg?longCache=true&style=flat-square">
  2. <img src="https://img.shields.io/badge/views-{_file.L_DOWNLOAD_COUNT}-yellowgreen.svg?longCache=true&style=plastic">
  3. <img src="https://img.shields.io/badge/downloads-{_file.L_DOWNLOAD_COUNT}-ff33cc.svg?longCache=true&style=for-the-badge">
  1. Image
  2. Image
  3. Image

Part 2: Attachment comment interception. [Go to top]

Open: root/styles/prosilver/template/attachment.html

Find:

Code: Select all

<!-- IF _file.S_FILE -->
Add After:

Code: Select all

		{% if _file.COMMENT matches '\bv?[0-9]+\.[0-9]+\.[0-9]+(?:\.[0-9]+)?\b' %}
		<dl class="file">
			<dt><!-- IF _file.UPLOAD_ICON -->{_file.UPLOAD_ICON} <!-- ENDIF --><a class="postlink" href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a>&nbsp;<img src="https://img.shields.io/badge/{_file.COMMENT}-blue.svg?longCache=true&style=flat-square">&nbsp;<img src="https://img.shields.io/badge/filesize-{_file.FILESIZE} {_file.SIZE_LANG}-80b3ff.svg?longCache=true&style=flat-square">&nbsp;<img src="https://img.shields.io/badge/downloads-{_file.L_DOWNLOAD_COUNT}-80b3ff.svg?longCache=true&style=flat-square"></dt>
		</dl>
		{% else %}
Find:

Code: Select all

		<!-- ENDIF -->

		<!-- IF _file.S_FLASH_FILE -->
Add Before:

Code: Select all

{% endif %}
Now: Change the regex expression and shields.io images to match your requirements.
What you see in the code above is what we have on this forum: it works by seeing if the attachment comment includes a dotted value (or version number) such as 1.2.3 and replaces it with the shields.io image if it does.

It's not perfect: for file comments to be correctly interpreted they must be in a the following format:
version-1.0.0
Which will display:
Image

Note: This only applies the change to file uploads. Images, flash and thumbnails are not included and will display their comment in the default format.
Changelog:
► Show Spoiler


These aren't the droids you're looking for.

Post Reply

Topic Subscribers

1 user subscribed to this topic: Restless Rancor