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
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 |
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
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
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
Rich
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
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
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