• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

[SOLVED] display image if exists in fileupload element otherwise display image from a second element

tikimultimedia

New Member
I am looking for a way to have a file upload element display its own element but if no image has been uploaded then display image from another upload file element.

It is basically only going needs to show up on the list page (not in details) so I guess I could have a totally separate image element that checks the first upload file element and if to doesn't exist it pulls the URL from the second upload file element?

Both upload file elements will be in the same entry and there are no joins or anything complicated like that. No matter what there is always an image in the second file upload field.

The other thing I thought about doing is somehow rewriting the the default image option so that it is dynamic according to plan but perhaps this would be more complicated?

Thanks in advanced.
 
Solution if anybody has a similar need (may vary slightly depending on styling preferences). In my case I needed to render separate divs.

Using a custom template, in "default_row.php", add the following code:

PHP:
if (empty(@$this->_row->data->list___your_element_raw)) {
    echo '<div>' . @$this->_row->data->list___your_other_element . '</div>';
} else {
    echo '<div>' . @$this->_row->data->list___your_element_raw . '</div>';
}
 
Last edited:
This was helpful.
Instead of showing the image of a second element, I'm creating a dynamically SVG-image using another element (name = text).

But I'm facing the next problem:
I'm using this as base for my custom template and inserted your code and that works fine. But when i navigate to the next page (ajaxify) it won't render the svg. Only when I do a browser refresh it renders the svg.
My best guess is that it has to do something with the div class, but I can't figure out what the class should be.
Anybody any idea? This is the div i'm using for the image:

HTML:
<div class="<?php echo $rowClass; ?>">
    <div class="row-fluid fabrikDivElement">   
        <div class="media ">
            <div class="pull-left square ">
            
             <?php if ($list_data['logo']->el_data <> "") {
                echo '<div class="' . $list_data['logo']->el_class . '">' . $list_data['logo']->el_data . '</div>';
                    } else {
                echo '<div class="' . $list_data['logo']->el_class . '"> <svg width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" style="fill:none;stroke-width:0;stroke:rgb(0,0,0)" /><image x="27" y="25" width="16" height="16" xlink:href="/images/iconmonstr-flag-15-16.png" /><path id="logo" d="M 107, 27 m -100, 5 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0" fill="none" /><text fill="#003399" font-size="smaller"><textPath xlink:href="#logo">' . $list_data['name']->el_data . '</textPath></svg> </div>';
                }
            ?>
          
                          
            </div>
            <div class="media-body fabrikDivElement">
                <h4 class="media-heading <?php echo $list_data['name']->el_class ?>"><?php echo $list_data['name']->el_data;?></h4>
                <div class="<?php echo $list_data['city']->el_class ?>"><?php echo $list_data['city']->el_data;?></div>
                <div class="<?php echo $list_data['country']->el_class ?>"><?php echo $list_data['country']->el_data;?></div>

            </div>
        </div>
        <div></br></div>
        <?php if($userGroup == 6 || $userGroup == 8) : ?>
        <!--
            usergroup 6 -> Custom admin
            usergroup 8 -> Super User
        -->
            <div class="<?php echo $list_data['fabrik_actions']->actions_class ?>">
                <?php echo $list_data['fabrik_actions']->actions ?>
            </div>
            <div class="<?php echo $list_data['fabrik_select']->select_class ?>">
                <?php echo $list_data['fabrik_select']->select ?>
            </div>       
        <?php endif; ?>
    </div>
</div>
 
@eurtnl:

This may help or not, but if you take your SVG code and make it a "stand-alone" xyz.svg file (of course, making sure the image path is correct and the PHP text variable is replaced with text), then try opening it in a browser, it's throwing errors.
So, it's a bit surprising that your SVG is rendering at all.

Your SVG code (with "HELLO" as text)
HTML:
<svg width="64" height="64" viewBox="0 0 64 64">
    <rect width="64" height="64" style="fill:none;stroke-width:0;stroke:rgb(0,0,0)" />
    <image x="27" y="25" width="16" height="16" xlink:href="/images/iconmonstr-flag-15-16.png" />
    <path id="logo" d="M 107, 27 m -100, 5 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0" fill="none" />
    <text fill="#003399" font-size="smaller">
        <textPath xlink:href="#logo">HELLO</textPath>
</svg>
should be something like
HTML:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
    <rect width="64" height="64" style="fill:none;stroke-width:0;stroke:rgb(0,0,0)" />
    <image x="27" y="25" width="16" height="16" xlink:href="/images/iconmonstr-flag-15-16.png" />
    <path id="logo" d="M 107, 27 m -100, 5 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0" fill="none" />
    <text fill="#003399" font-size="smaller">
        <textPath xlink:href="#logo">HELLO</textPath>
    </text>
</svg>

Spot the differences:
- two added attributes in the <svg> tag, and
- the closing </text> tag added (which was missing)

Just a small thing, but if I were you, in line 6 of your code I'd use != instead of <>, just in case.

Again, all this may help with the AJAX problem or not, but chances for proper rendering should be at least greatly increased.
 
Thanks. I updated the code, but no luck.
I've been searching for SVG and AJAX loading and it seams that's the problem. I will be looking in to that.

A workaround could be to create the SVG when adding a new record
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top