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
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();
Viewing 15 lines of 42 lines. View entire code block.
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
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
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.
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.
Someone did suggest background image on another post, but would this work with image slider?
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...
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...
are your slider and your image interchangeable?
You can overlay 2 divs within a containing div by using absolute positioning. For example:
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!
<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!
What is the end result of this change?