Setting a Background Image

Permalink Browser Info Environment
Hi, would I be abel to use this block to set a background image for a div - maybe using the File field or the Image picker and then modifying the view file afterwards?

I would like the interface to allow a content editor to be able to choose an image from the file manager and set it as a background image for a block I'm developing.

Thanks

Type: Pre-Sale
Status: Resolved
therenderman
View Replies:
ramonleenders replied on at Permalink Reply
ramonleenders
Hi there,

You have a lot of field types available with Block Designer. The one's you're asking for would be WYSIWYG (What-you-see-is-what-you-get) editor (or "content editor") and "Image" field type. You can insert images in the WYSIWYG-editor of course, but I'm not sure what your HTML is exactly? You can always edit the view file of generated blocks. If you have the HTML before creating the block, you can enter that in Block Designer too. Perhaps send me an example of what you want the user to edit/add/select and what HTML should be generated. As far as I can tell you need the content editor and the image field, but the last bit you're asking makes me think you're asking for something more complex.

Kind regards,

Ramon
therenderman replied on at Permalink Reply
therenderman
Thanks for your reply.
Here is the HTML I want to generate in my block:

<section class="page-content">
<div class="container page-content-container">
<div class="units-row page-content-row">
<div class="unit-push-right unit-50">
<h2>education and opertunity</h2>
<p>Ex sit liber quodsi aliquam. Ut quo primis commodo. Et quo munere deterruisset, delicata interpretaris concludaturque et eum. Admodum percipitur interpretaris ex pri. In labores maluisset iracundia sed, ei sit eligendi voluptua.</p>
<p>Ne usu dicunt consetetur. Ornatus fierent ei per. Vidit inimicus intellegebat no usu. Movet patrioque duo an, vivendum pertinacia reprehendunt mea ut, hendrerit scriptorem mel no.</p>
</div>
</div>
</div>
<div class="units-row units-split end">
<div class="unit-50 end page-content-image" style="background: #0a012d url(http://parcfelindre.co.uk/application/files/5914/6306/6038/education-opertunity.jpg) center;">
<div class="page-content-overlay-left">
<img src="http://parcfelindre.co.uk/application/files/5814/6338/8180/clip-right.png" alt="Clip Right"></div>
</div>
</div>
</section>

The background image I need to insert is in 'page-content-image' div (the other styling elements there will remain the same).

Thanks for your help
Rich
therenderman replied on at Permalink Reply
therenderman
Just an update to the above - when I mentioned ‘content editor’ in my first post I meant the user (person building the pages) not any particular field type! Sorry for the confusion.
Rich
ramonleenders replied on at Permalink Reply
ramonleenders
Hi Rich,

OK, I see. Yeah, you can perfectly build that with Block Designer. The "Image" field type has the ability to output the source (src/URL) of the file only, and that's what you need in this situation.

You can use "Static HTML" field types too for the static bits and pieces you got here. Your fields will somewhat look like this:

STATIC HTML [start]
<section class="page-content">
<div class="container page-content-container">
<div class="units-row page-content-row">
<div class="unit-push-right unit-50">
STATIC HTML [end]

WYSIWYG FIELD TYPE
STATIC HTML [start]
</div>
</div>
</div>
<div class="units-row units-split end">
<div class="unit-50 end page-content-image" style="background: #0a012d STATIC HTML [end]

url(
IMAGE FIELD TYPE
) center;">

STATIC HTML [start]
<div class="page-content-overlay-left">
STATIC HTML [end]

IMAGE (or WYSIWYG) FIELD TYPE

STATIC HTML [start]
</div>
</div>
</div>
</section>
STATIC HTML [end]

Makes sense? There are also some videos on YouTube if you want to see how a block is created. Let me know if you still have questions!

Kind regards,

Ramon

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.7
Version Installed - 5.7.5.7
Database Version - 20160412000000

# concrete5 Packages
Manual Nav (2.0.0), Parc Felindre (1.0), Whale Elastic Slider (1.1.0).

# concrete5 Overrides
blocks/autonav/templates/responsive_parc_felindre_navigation/view.php, blocks/autonav/templates/responsive_parc_felindre_navigation/view.css, blocks/autonav/templates/responsive_parc_felindre_navigation/view.js, blocks/autonav/templates/responsive_parc_felindre_navigation, blocks/autonav/templates, blocks/autonav, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, blocks/autonav/templates/responsive_parc_felindre_navigation/view.php, blocks/autonav/templates/responsive_parc_felindre_navigation/view.css, blocks/autonav/templates/responsive_parc_felindre_navigation/view.js, blocks/autonav/templates/responsive_parc_felindre_navigation, blocks/autonav/templates, blocks/autonav, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR

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

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.4.45

# PHP Extensions
bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, readline, Reflection, session, shmop, SimpleXML, sockets, SPL, sqlite3, standard, tokenizer, wddx, xml, xmlreader, xmlwriter, xsl, zip, zlib.

# PHP Settings
max_execution_time - 60
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
sql.safe_mode - Off
upload_max_filesize - 128M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/601.6.17 (KHTML, like Gecko) Version/9.1.1 Safari/601.6.17

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.