Switching Thumbnail Images for Browser Width

Permalink Browser Info Environment

I love your Block Designer plugin, and I am currently using it to create a custom block that displays a background image in a full width image banner. I am using the Block Designer to bring in just the image path, with HTML Wrapper open and HTML Wrapper close code around it. I am using CSS to apply "background-size: cover;" to the background.

I notice that you have added the ability to use a thumbnail handle, which uses that specific thumbnail image instead of the full sized imported image. What I would like to do is use the full sized image for desktop displays, but use a thumbnail image on smaller displays. I have created the thumbnail handle for the smaller image, but when I apply the handle within the Block Designer, it uses that thumbnail image for all display widths.

Is it possible to use 2 images, one for large and one for small displays? Or even 3 (one for phone, one for tablet and one for desktop), if I create the thumbnail handles within the Concrete5 dashboard?

Thank you,

Type: Ticket
Status: New
View Replies:

concrete5 Environment Information

# concrete5 Version
Core Version - 8.5.2
Version Installed - 8.5.2
Database Version - 20190925072210

# Database Information
Version: 5.7.26

# concrete5 Packages
Backup Pro (3.4), Block Designer (3.2.1), Block Designer Pro (3.0.0)

# concrete5 Overrides
blocks/banner_strip/add.php, blocks/banner_strip/composer.php, blocks/banner_strip/config.json, blocks/banner_strip/controller.php, blocks/banner_strip/db.xml, blocks/banner_strip/edit.php, blocks/banner_strip/form.php, blocks/banner_strip/icon.png, blocks/banner_strip/view.php, blocks/banner_strip, blocks/career_post/add.php, blocks/career_post/auto.js, blocks/career_post/composer.php, blocks/career_post/config.json, blocks/career_post/controller.php, blocks/career_post/css_form/repeatable-ft.form.css, blocks/career_post/css_form, blocks/career_post/db.xml, blocks/career_post/edit.php, blocks/career_post/form.php, blocks/career_post/icon.png, blocks/career_post/js_form/handlebars-helpers.js, blocks/career_post/js_form/handlebars-v4.0.4.js, blocks/career_post/js_form, blocks/career_post/view.php, blocks/career_post, blocks/page_list/templates/blog_list/view.php, blocks/page_list/templates/blog_list, blocks/page_list/templates, blocks/page_list, elements/express/form/form/form.php, elements/express/form/form, elements/express/form, elements/express, mail/block_express_form_submission.php, mail/block_form_submission.php, themes/ck-icon.png, themes/config.codekit3, themes/katana/blog.php, themes/katana/blog_entry.php, themes/katana/css/styles.css, themes/katana/css, themes/katana/full.php, themes/katana/home.php, themes/katana/img/banner-careers-office.jpg, themes/katana/img/banner-careers-skyline.jpg, themes/katana/img/btn-apply.svg, themes/katana/img/clipboard.svg, themes/katana/img, themes/katana/inc/banner.php, themes/katana/inc/contact.php, themes/katana/inc/footer.php, themes/katana/inc/header.php, themes/katana/inc/header_top.php, themes/katana/inc/scripts.php, themes/katana/inc, themes/katana/js/animation-gsap.js, themes/katana/js/bootstrap.min.js, themes/katana/js/jquery.easing.js, themes/katana/js/scripts.js, themes/katana/js/scrollTo.min.js, themes/katana/js/validate.js, themes/katana/js/waypoints.min.js, themes/katana/js, themes/katana/page_forbidden.php, themes/katana/page_not_found.php, themes/katana/page_theme.php, themes/katana/scss/_branding.scss, themes/katana/scss/_careers.scss, themes/katana/scss/_header.scss, themes/katana/scss/_init.scss, themes/katana/scss/_normalize.scss, themes/katana/scss/_responsive.scss, themes/katana/scss/_search.scss, themes/katana/scss/_shared.scss, themes/katana/scss/_utils.scss, themes/katana/scss/styles.scss, themes/katana/scss, themes/katana/sidebar_right.php, themes/katana/thumbnail.ai, themes/katana/thumbnail.png, themes/katana/view.php, themes/katana

# 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
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, ldap, libxml, mbstring, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, readline, Reflection, session, SimpleXML, soap, sockets, sodium, SPL, sqlite3, standard, tokenizer, wddx, xml, xmlreader, 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
upload_max_filesize - 32M
ldap.max_links - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15

Hide Post Content

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

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.