Images with title

When I insert an image I would like to see the title text superimposed on the image. I will insert an example image.

Schermata 2023-03-21 alle 12.24.54

1 Like

You will need to create an image block template to superimpose the image title over the image.

Are you familiar with how to create a block template and what version of Concrete are you using?

When creating a block template you will need to add a small amount of additional php, html and also css styling to achieve what you want.

Adding a title and/or description overlay is a standard capability of many sliders or image galleries, so you can do this with a slider or gallery of 1 slide (so it never changes)

You could try the core slider block, or use a marketplace slider if you need further control of overlay position and design such as my Omni Gallery.
Some examples (with multiple images) at

I have never tried to create a block template, however, I have knowledge of php, html and css. Could you guide me in creating the template?

This is how I go about it. Copy the ‘view.php’ file from this location - root > concrete > blocks > image.

To create a template version go to root > application > blocks > create a folder named ‘images’. In the ‘images’ folder create a folder called ‘templates’. Within this folder paste the view.php file and rename it something like ‘image_with_title.php’ . This file is going to be your template file which you will need to customise.

To display the title use - echo $title;

To get the title to position over the image you will need wrap the image and title with a div class and apply a ‘relative’ positioning and then an ‘absolute’ positioning for the ‘product_title’ class.

I hope this makes some sense?

Ho seguito la procedura ed ho cambiato il file nominato “image_with_title.php” come da screenshot.

In modello personalizzato non compare la voce “image_with_title”

Just to confirm. Have you placed the image block on your page and then selected the image block template you have created?

Yes, the procedure is right but maybe the problem lies in the fact that I use the “Cosmos” theme and the template block gets it from the path “packages/ds_cosmos57/blocks/images/templates/”.

I tried copying the template block to this path and it actually displays it, however maybe the code is wrong because it returns me error.

In fact, it works now, but the text displays above the image.
Schermata 2023-03-22 alle 16.46.36

So it doesn’t work, the writing always stays above the image and not overlapping.

I tried writing position: relative instead of absolute but it doesn’t work.

To get the title to position over the image you will need wrap the image and title with a div class and apply a ‘relative’ positioning and then an ‘absolute’ positioning for the ‘product_title’ class.

I am missing this step, can you help me?


concrete5 Version

Core Version - 8.2.1
Version Installed - 8.2.1
Database Version - 20170802000000

concrete5 Packages

Cosmos Theme (1.3.8), GDPR (1.7.2), Login/Logout Link (1.0), Manual Nav (2.3.4), Simple Gallery (1.0.9), Vivid Simple Accordion (1.0.1), Zoomer (1.0.1)

concrete5 Overrides

blocks/video/templates/autoplay/view.php, blocks/video/templates/autoplay, blocks/video/templates, blocks/video

concrete5 Cache Settings

Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

Server Software


Server API


PHP Version


PHP Extensions

apc, apcu, bcmath, brotli, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, http, iconv, imagick, imap, intl, ionCube Loader, json, libxml, mailparse, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, propro, raphf, Reflection, session, SimpleXML, soap, SourceGuardian, SPL, sqlite3, standard, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, Zend OPcache, zip, zlib

PHP Settings

max_execution_time - 300
log_errors_max_len - 1024
max_file_uploads - 50
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 3000
memory_limit - 256M
post_max_size - 128M
sql.safe_mode - Off
upload_max_filesize - 128M
ic24.api.max_timeout - 7
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
raphf.persistent_handle.limit - -1
session.cache_limiter - no value
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 200
opcache.max_file_size - 1B
opcache.max_wasted_percentage - 5

This tutorial explains how to get the text to position over the image.

You have to wrap both the image and the heading in a container which has relative positioning.