After template update images not working because of missing / in base url

After an update of the template in a sub-page the image links aren’t working anymore. All it needs is an extra / before the link. I figured out that i could ad the / into the base URL.

Now, where is this setting?
Using MODx 3.0.4-pl

The base url system setting ([[++base_url]]) is usually defined in the config file core/config/config.inc.php (variable $modx_base_url).

If you have multiple contexts, you can also add it to the context settings.

The template needs a base tag with [[!++site_url]] in the href attribute.

I’ll have a look, but its a bit strange to me that i can not edit this from the settings within MODx. (I feel a bit more save working from within the system itself)

Where do i change this? In the template or somewhere in the system. I tried to do s search in the system to find anything with BASE :mag:

You need the following code in your template:

<base href="[[!++site_url]]" />

Thanks! This did the trick indeed*. I can see the images again.

Had no idea I could just place it anywhere in the template. For the idea, i put it in my BODY chunk in the head part. So it will be used in every page of the website.

<head>
    <base href="[[!++site_url]]" />
</head>

*Although the images from a getResources snippet that is displaying them without the correct dimensions.

To be more precise, the images that are shown in the overview page are loaded, but the same image from the same getResources is not displayed in the sub page.

Check online if to get a better idea if the situation.
https://magicolr.com/projects/

Do i need to ad a ! also here somewhere?

<br /><br />
<div>
<div>
<h2><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
<div>
<p><a href="[[~[[+id]]]]"><img src="[[+tv.pr-img]]" alt="[[+pagetitle]]"/></a></p>
</div>
</div>
<div>
<p>[[+introtext]]</p>
</div>
<div>
<p>tags</p>
</div>
</div>

In addition, the images that are shown are not altered by the content manager to be the correct dimensions.

If this is an Image-TV (with the default “Output Type”), then it just outputs the image URL.
If you want to change the image (size, aspect ratio), you need an extra like (for example) pThumb.

1 Like

In context: it was a lack of knowledge and I have to say it was fixed by adding a little width to the CSS that I had freshly rebuilt from the ground up.

.max-word **img** {
    width: 100%;
}

Now what remains is to fix the TV… To be continued. :hugs:

Thanks @halftrainedharry but i might not have been specific. these images (if the TV) are only showing up on the overview page but the same TV’s are not displayed on the specific project pages…

I assume that with “project pages” you mean the resources where the TVs are assigned to.

How exactly do you output the TV values?
On the resource itself, you have to use [[*pr-img]] (with a *) instead of [[+tv.pr-img]] you use with getResources.

https://docs.modx.com/current/en/building-sites/tag-syntax

I’m trying to use the same image on two (or more) pages. I use Get resource. but somehow after my CSS & HTML update the TV via get resource isn’t working anymore.

I just can’t seem to get the hang of it. It does not make sense. Maybe a MODx update with a step-by-step function to create these items.

this is a part of the code.

<div class="list-docs thumb grid">
    [[!getResources?
       &parents=`[[*id]]`
       &tpl=`Project-preview-tpl`
       &depth=`1`
       &limit=`9`
       &sortdir=`ASC`
       &includeTVs=`1`
       
       &processTVs=`1`
       &showHidden=`1`
       &sortby=`menuindex`
    ]]
</div>

what I get in the code of the overview page is the following…

The part I dont get is that in another part I do get the images correctly.
<img src=“simg src=” images=“” emojitag3.png"=“” style=“width:100%” alt=“”›

This is the input.

<br /><br />
<div>
    <div>
        <h2><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
        <div>
            <p><a href="[[~[[+id]]]]"><img src="[[!+tv.pr-img]]" alt="[[+pagetitle]]"/></a></p>
        </div>
    </div>
    <div>
        <p>[[+introtext]]</p>
    </div>
    <div>
        <p>tags</p>
    </div>
</div>

What is the Output Type of your Image-TV pr-img? (In the TV editing page, go to the tab “Output Options”.)

The property &processTVs (when calling getResources) affects, if the Output Type is taken into account or if the raw value from the database is output.


In my opinion, it’s usually best to leave the Output Type at Default and add the <img> tag to the chunk yourself.

1 Like

After me changing it (from Default) to -Image- it worked for the project detail pages. I also read that it is best to keep the DEFAULT but for now ill stick with IMAGE because I’m done with the missing images. :sweat_smile:

Also, the second part of the problem (the missing images on the project overview page is solved bu changing the code into <a href="[[~[[+id]]]]">[[!+tv.pr-img]]</a>

Thank you all for being such a nice community and to put up with all my questions.
:hugs:

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.