Numbered Thumbnails /images

Permalink Browser Info Environment
Is there a way of adding a number to thumbnails displayed in the gallery? It would help customers say which product they are interested in. I don't want to change the filenames of each image and use the caption facility. Was thinking of a number in the corner of each thumbnail added by js and css. Do you think this is achievable?

Type: Discussion
Status: Resolved
View Replies:
mnakalay replied on at Permalink Reply
Yes absolutely. You see, the way the gallery is built, thumbnails are links with the actual thumbnail set as background. So in reality the link is empty.

As a result, you can put any text you want inside the link.

The thumbnails are built by a loop so you would need a counter that would increment with the loop.

You would then add the counter's value to the thumbnail inside the link. I suggest you put it inside a <span> tag so you can position it absolutely anywhere you want inside the thumbnail link.
darkmatter replied on at Permalink Reply 1 Attachment
Thanks for your reply. I have managed to achieve what I need using some changes to view.php It also puts the thumbnail number before the description on the full size image.
<?php            } ?>
<div class="touchgallery-thumbs" id="touchgallery-thumbs<?php             echo $bID ?>">
    $tn = 0;
          foreach ($images as $img):
    $tn++; ?>
<div class="thumblock">
<div class="tnumber"><?php echo $tn; ?></div>
   <?php                 foreach ($images as $img): ?>
      <a href="<?php             echo $img->large->src ?>" style="background-image:url(<?php             echo $img->thumb->src ?>);" title="<?php             echo $img->title ?>"<?php             if ($img->description && $showDesc) { echo ' data-tg-desc="' ."No." . $tn ."  " . $img->description . '"';} ?>></a></div>
   <?php                 endforeach; ?>

I had to put the thumbnail links inside inline divs to keep the numbers with the thumbnails on mobile phones. it seems to work fine on desktop, tablet and phone now.

here is the css

.tnumber {
    position: relative;
    display: inline-block;
    left: 31px;
    bottom: 15px;
    background-color: #303030;
    color: #f5f5f5;
    border-radius: 3px;
    z-index: 99999;
    width: 16px;
    height: 18px;
.thumblock {
display: inline-block;
mnakalay replied on at Permalink Reply
It looks pretty nice on the screenshot.

One thing though is you shouldn't modify view.php directly or you will lose your modifications next time you update Touch Gallery.

The safest way to do it is to create a template and apply it to your block.

To create a template, copy the files view.php and all the css files and put them in the folder root/applications/blocks/touch_gallery/templates/numbered_gallery

From there you can put your page in edit mode, click on your gallery and select design & template and select your template named "Numbered Gallery" from the list and save.

Next time you update the Gallery, your template will remain as it is and not be affected.

May I ask you to please leave a review for the gallery on the gallery page? You can do that here:

Thank you

concrete5 Environment Information

# concrete5 Version

# concrete5 Packages
Code Blocks (1.2.1), CoolInput Search (1.0), Custom Built Page List Package (0.1.1), Custom Contact Form (3.0), Deluxe Image Gallery (1.6.6), Designer Content (3.1.1), Extended Search (1.0), FlexSlider (, Form Tableless Layout (1.2.1), Free Cookies Disclosure (1.0.3), Image Blank Target (1.0), Internationalization (1.3), Lightboxed Image (0.9.2), Page List Teasers (1.2), Page List Title (2.3), PHP Calculator (1.0.0), Pro News (5.1.0), Quick Links (2.0.1), RonyD Icons (0.9.2), Search Block Templates (1.0), Slate Theme (, Touch Gallery (1.7.1), Treviso Theme (0.9.9), Url Director (1.6.5).

# concrete5 Overrides
blocks/youtube, blocks/flexslider, blocks/touch_gallery, blocks/custom_built_page_list, blocks/table_ii, blocks/table_cc, blocks/tablenk, blocks/extended_search, blocks/table, blocks/cookies_disclosure_form, css/, languages/el_GR, languages/pt_PT, languages/sk_SK, languages/ro_RO, languages/da_DK, languages/sv_SE, languages/es_MX, languages/ar, languages/it_IT, languages/fr_FR, languages/es_ES, languages/nb_NO, languages/zh_TW, languages/es_PE, languages/nl_NL, languages/de_DE, languages/ja_JP, languages/vi_VN, languages/tr_TR, languages/es_AR, languages/sl_SI, languages/fi_FI, languages/cs_CZ, languages/ru_RU, languages/fa_IR, single_pages/page_not_found.php, themes/treviso_custom, themes/slate_custom

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off

# Server Software
Apache/2.2.22 (Linux/SUSE)

# Server API

# PHP Version

# PHP Extensions
apache2handler, bcmath, bz2, calendar, Core, ctype, curl, date, dom, ereg, exif, filter, ftp, gd, gettext, gmp, hash, iconv, imap, json, ldap, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, odbc, openssl, pcntl, pcre, PDO, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, posix, Reflection, session, shmop, SimpleXML, snmp, soap, sockets, SPL, SQLite, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 128M
post_max_size - 8M
safe_mode - Off
safe_mode_exec_dir - <i>no value</i>
safe_mode_gid - Off
safe_mode_include_dir - <i>no value</i>
sql.safe_mode - Off
upload_max_filesize - 2M
ldap.max_links - Unlimited
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - nocache
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
safe_mode_allowed_env_vars - PHP_
safe_mode_protected_env_vars - LD_LIBRARY_PATH

Browser User-Agent String

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.