Hello everyone,

I'm creating a clothing store in OctoberCMS, and I want the admin user to see small images by every product. You can see an example by this screenshot beneath.

Does anyone know how to do this?

Thank you! Jeroen van Rensen

You'll want to use a partial column, and set up a partial template that has an image tag. You can find info on how to do this here: https://octobercms.com/docs/backend/lists#column-partial

Last updated 3 years ago

Hello BennoThommo,

It semi-worked. I created a partial, but I don't get any value in it. Here's my code from plugins/jeroenvanrensen/kleding/models/kledingmodel/content.htm:

url = "/content"
===
function onStart()
{
    $this['hello'] = "Hello world!";
}
===
{% hello %}
<style>
    .img 
    {
        background: url(https://cdn.pixabay.com/photo/2020/03/25/21/05/pizza-4968645_960_720.jpg);
        background-size: cover;
        background-position: center;
        height: 50px;
        width: 50px;
        border-radius: 3px;
    }
</style>
<div class="img"></div>

And here's my output:

So I guess the problem is that he outputs it without the PHP code. How can I change that?

Thank you! Jeroen van Rensen

Hello everyone,

It already worked. Here's my working code:

<?php
$url = $record->images[0]->path;
echo '<div class="img" id="img'.$record->id.'"></div>';
?>
<style>
    .img#img<?=$record->id?>
    {
        background: url(<?=$url?>);
        background-size: cover;
        background-position: center;
        height: 60px;
        width: 60px;
        border-radius: 3px;
    }
</style>

Last updated 3 years ago

I suggest changing this:

<?php
$url = $record->images[0]->path;
echo '<div class="img" id="img'.$record->id.'"></div>';
?>

To this:

<?php
$url = $record->images[0]->path;
?>
<div class="img" id="img<?= $record->id ?>"></div>

It's cleaner to leave html outside of php blocks.

In addition to @mjauvin's suggestion above, you could just use a class for the image tag, like so:

<img class="img-rounded" src="<?= $record->images[0]->path ?>">

And then you can go to the Customize backend section in the Settings and add custom CSS for the img-rounded class which could use the styling you've added above. That way, you're not defining a style block for every record.