how to avoid left empty space in "Blog" template

please how do you do to have text around the picture please ?

thank you very much

I createda new template for image field

you can find both the list and full view image templates in this folder

/components/com_cobalt/fields/image/tmpl/output

copy them, rename them, edit them, upload them

then in image field settings choose your custom templates for list and full view

when you edit the template add a div with css class around the image, eg.

<div class="img_float_left">

<img src="/<?php echo $url;?>"

    class="img-polaroid"

    hspace="<?php echo $this->params->get('params.img_list_hspace');?>"

    vspace="<?php echo $this->params->get('params.img_list_vspace');?>"

    alt="<?php echo htmlspecialchars($image->get('image_title', $record->title), ENT_COMPAT, 'UTF-8');?>"

    title="<?php echo htmlspecialchars($image->get('image_title', $record->title), ENT_COMPAT, 'UTF-8');?>"></a>

<?php if($image->get('image_title')):?>

    <br><small><?php echo  $image->get('image_title'); ?></small>

<?php endif;?>

</div>

then create class "img-float-left" in your site template css file

.img_float_left {

    float:left;

    margin:3px 6px 0px 0px;

    }

and if you want to have the image to be responsive for smaller screens

you may also want to try to insert this other @media class

    @media (max-width: 450px) {

        .img-polaroid{

            width:100%;

        height:auto;

        margin-right:3px;

        }

        }

mhhh, no sorry, this

   @media (max-width: 450px) {

        .img-polaroid{

          width:100%;

        height:auto;

        margin-right:3px;

        }

        }

works only if you have a joomla 3.0.x site, with bootstrap

if you have other joomla version you may try this instead

@media (max-width: 450px) {

    .img_float_left{

        width:100%;

    height:auto;

    margin-right:3px;

    }

    }

about the main topic of this post...

I solved it for now by duplicating the "blog" template and customizing it

I substitued all

<

dl> tags with

<

div> tags

it seems to work

if someone need the edited templates are attached

Hi niccolo.angeli,

In the record field settings you can set a break after the label. Now you have to do that with ALL the fields, otherwise the dl's won't be pushed to the left.

Have you tried this?

Best regards,

Jeff

Oh, I see

I tried that at first, maybe I was missing one field...

Thank you

I checked again, you DO NOT have to select "break after label " for ALL

the fields, you may just select some of them and keep the label aligned for others

I must have messed up something the first time I tried, now the issue is solved

I checked again, you DO NOT have to select "break after label " for ALL

the fields, you may just select some of them and keep the label aligned for others

Correct!

Glad I could help.....

Hi niccolo.angeli,

I can't able to download the attached template. Can you pls upload it again?

Thanks

try now