Images with title

[wells00]

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

[studio108]

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.

[JohntheFish]

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
https://c5magic.co.uk/addons/omni-gallery/simple-examples.

Omni Gallery - Concrete CMS

[wells00]

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?

[studio108]

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?

[wells00]

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”

[studio108]

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

[wells00]

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.

[wells00]

In fact, it works now, but the text displays above the image.

[wells00]

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.

[wells00]

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?

view.php

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

Apache

Server API

cgi-fcgi

PHP Version

5.6.40

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

[studio108]

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

https://www.w3schools.com/howto/howto_css_image_text.asp

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