Main image and custom layout

By ugenda on Monday, 03 April 2023

Replies 5

Likes 0

Votes 0

I want to create a custom layout for the detail page of an event where the main image is always 100% width and the same height, wether the original image is landscape or portrait.

In my previous site / component I had a template override Joomla. I had the image as a background in a div, with an option to click on the dic and show the full image in a modal window. The dic would be there only if there was an image. (Preventing a large empty space if there's no image) The code I had was this:

<?php if ($this->dimage[original]) : ?>

   <div class="headerimg">

    <a href="/<?php echo $this->dimage[original]; ?>" class="modal" rel="{handler: 'image'}">

      <img src = "/<?php echo $this->dimage[original]; ?>" itemprop="image" width="100%" max-height="100%" style="margin-bottom:10px; cursor: zoom-in;"><span class="zoom"><i class="uk-icon-search"></i></span>

    </a>

  </div>

<?php endif ?>

How can I achieve the same with custom layouts?

See https://www.jevents.net/frequently-asked-questions/handling-missing-values-in-custom-layouts

So with custom layouts you can use something like the following to add a class



<div class="{{IMAGE_FIELD#image-visible#image-hidden}}">

{{IMAGE_FIELD}}

</div>

Where IMAGE_FIELD is the specific field you are wanting to use in your layout

Then use image-visible and image-hidden class names to style the layout for when the image is present or not present in the event

geraint

1 year ago

0 Likes

0 Votes

0 Comments

#230482

Thank you. As I understand the hashtag acts like an if-statement and adds css-classes to hide elements?
I'd rather use a php-if/then/else code so the items are left out before they are sent to the browser of a user.

And where can I find documentation with all the (standard) field codes? Or is it enough to select a field in the custom lay-out dropdown menu.

ugenda

1 year ago

0 Likes

0 Votes

0 Comments

#230499

There aren't currently any if/then type codes in the layout editor I'm afraid. You can find all the fields in the drop downs.

The basic rule is

{{Field description:FIELDNAME#Value present %s output#value not present output}{

Field description before the : is thrown away
Two different output options for value present and value not set with %s replaced by the actual value

Some fields have other formats e.g. date/time fields see https://www.jevents.net/frequently-asked-questions/time-formatting-in-jevents

geraint

1 year ago

0 Likes

0 Votes

0 Comments

#230512

It's still a bit unclear how this exactly works. For instance can I add html within the code?
Example:



{{my_field:my_field#<div>%s some text here</div>#other text}}

And can I nest fields?



{{my_field:my_field#%s {{my_otherfield:my_otherfield}}#}}

ugenda

1 year ago

0 Likes

0 Votes

0 Comments

#230590

Unfortunately nesting fields isn't possible but you can add as much HTML as you want between the # symbols

geraint

1 year ago

0 Likes

0 Votes

0 Comments

#230636