Place div inside image block

Permalink
I'd like to place a div (which encloses a form) inside my image block (view.php), but I'm struggling to find the correct place: there's a fair bit of coding that I don't want to mess up.

Could someone please tell me the best place to put a div container?

I've copied the code from the image block view.php below

Thanks

<?php defined('C5_EXECUTE') or die("Access Denied.");
$c = Page::getCurrentPage();
if (is_object($f)) {
    if ($maxWidth > 0 || $maxHeight > 0) {
        $im = Core::make('helper/image');
        $thumb = $im->getThumbnail(
            $f,
            $maxWidth,
            $maxHeight
        ); //<-- set these 2 numbers to max width and height of thumbnails
        $tag = new \HtmlObject\Image();
        $tag->src($thumb->src)->width($thumb->width)->height($thumb->height);
    } else {
        $image = Core::make('html/image', array($f));
        $tag = $image->getTag();

 
WebcentricLtd replied on at Permalink Reply
hello - what are you ultimately trying to achieve by doing this? This 'seems' like something that might be achieved following a different path - but that may well just be my lack of understanding.

What is the end result of this change?
PJSAndo replied on at Permalink Reply
Hello Any J,
Thanks for your reply.

I am using image block to add images to some of my pages (full width header image area). This is fine. But I also have a custom search-form block that I want to overlay the full-width image header.

I also need to place the same custom search-form over the full-width image slider on the home page (but I thought I'd try to get the static image sorted first).
P
WebcentricLtd replied on at Permalink Reply
Hello again - this really sounds like something you'd use a CSS background image for rather than the image block.

Have you looked at doing it that way - do you have a container that you could apply the background image to?

I might be missing the point though - someone else might join in with another suggestions / approach.
PJSAndo replied on at Permalink Reply
Someone did suggest background image on another post, but would this work with image slider?
WebcentricLtd replied on at Permalink Reply
hi,
not with the slider - but then a slider and an image are different elements.

Depending on how you build your template you could layer one container over part of the slider but it sounds messy and open to browser issues...
WebcentricLtd replied on at Permalink Reply
are your slider and your image interchangeable?
JohntheFish replied on at Permalink Reply
JohntheFish
You can overlay 2 divs within a containing div by using absolute positioning. For example:
<div style="position:relative">
  <div>
    <img ....your image.. >
  </div>
  <div style="position:absolute;top:0;left:0;">
    <p>Some overlaid text</p>
  </div>
</div>


However, if you do this with 2 c5 blocks, make sure the absolute positioning of the second block is **not** applied in edit mode. Otherwise it will completely screw up the editing experience!