CodeBlog.ch

Concrete5 – Team Datenbank in Tabelle

In vielen Fällen soll eine Internetseite Elemente enthalten, die in zwei Spalten dargestellt werden sollen. In diesem Tutorial beschreibe ich einen sehr einfachen Block, um ein Bild einer Person anzuzeigen, so dass die Beschreibung rechts vom Bild dargestellt wird.

Das Ergebnis schaut folgendermassen aus:

staff1

Tabellenlayouts

Ich werde hier nicht in die Details über Tabellen-Layouts eingehen. Nur ganz grundlegend – das Tag “table” sollte nicht für Layouts verwendet werden. Inzwischen ist div & css der korrekte Weg.
Concrete5 erlaubt es uns zwei editierbare Bereiche zu erstellen, womit wir quasi ein 2-spaltiges Layout hätten. Allerdings ergibt sich in unserem Fall das Problem, dass das Bild in der linken Spalte wäre, der Text in der rechten. Damit beide Elemente immer auf der gleichen Höhe beginnen, müssten wir eine fixe Höhe mitgeben, was in den meisten Fällen wohl nicht optimal ist.

Ich werde also eine Lösung beschreiben, die in einem einspaltigen Layout verwendet werden kann, und dabei keine html Tabellen verwendet.

Der Personen Block

Der Block enthält lediglich zwei Elemente. Ein Bild und ein Textfeld um eine Beschreibung einzugeben.

staff2

Die HTML Ausgabe sieht folgendermassen aus:

1
2
3
4
5

<div class="ccm-person">
   <div class="ccm-person-image"><img src="http://myserver/remo.jpg" alt=""></div>
   <div class="ccm-person-description">Lorem ipsum dolor sit ame.</div>
   <div style="clear:both"></div>
</div>

Bitte beachten, dass ich am Ende eine “inline CSs-Anweisung” eingebaut habe. Dies wenn möglich durch eine Klasse aus dem gewählten Theme ersetzen. Ich hab hier lediglich zu Demonstrationszwecken kein ganzes Theme veröffentlicht, damit der Code kurz und lesbar bleibt.

Ohne weitere CSS-Anweisungen wird der Text unterhalb des Bildes dargestellt. Da wir aber ein zweispaltiges Layout haben wollen, fügen wir unsere CSS Datei aus dem Theme ein paar Zeilen hinzu:

1
2
3
4
5
6
7
8

.ccm-person-image {
   float: left;
   width: 80px;
}
.ccm-person-description {
   float: left;
   width: 385px;
}

Dies muss unter Umständen dem Theme angepasst werden.
Am besten einfach den Block herunterladen und loslegen!

Block herunterladen



41 Comments

Thank you very much for this! Was exactly what I was looking for.
I know it’s not standard CSS, but I’ve always preferred “display:inline-block” to “float:left”. Mostly because the containing node with scale with it’s content that way, and it works nicely with vertical-align.

Hi Remo,

Im using this cool block of yours but Ive made a few changes. Ive made 3 columns instead of two and I have the persons name in the second column.

So it goes: Image – Name – Description.

Ive even changed the interface so I have another input area called name.

However this new Name field is not showing up in the site. It remains blank.

Ive edited view.php and form.php to achieve this but I suspect I need to edit something else so that it shows on the page.

Is it controller.php?

Sorry for mucking about with it but its a design thing.

Any light you could shed would be much appreciated.

Thanks
Nige

Sorry am I being dim here I can’t see where to implement the css either. I tried putting it in my style.css but that didn’t work. Have tried to put it at the top of the view.php doc. that doesn’t work. Please explain….

Hallo Remo,
ich möchte einen Bereich auf der Seite in dem alle Blöcke horizontal angeordnet werden. Wie kann ich so einen Bereich am besten erstellen wenn er sich nicht über die gesamte Seite erstrecken darf? Ist es sinnvollerweise ein Block (kann ich überhaupt Blöcke in die Blöcke hinzufügen) oder ist das ein Teil des Themes (aber nicht jeder Seite soll diesen Bereich haben)?

@Cahty: This is rather easy, just add an “a-tag” to the output with “mailto” in front of the value and you’re done..

@Alex: Das geht mit CSS relativ einfach. Einfach eine CSS Regel beim äussersten DIV des Blocks einbauen mit “float: left”. Es kann passieren, dass Concrete5 im Designmodus dadurch ein paar Probleme bekommt, müsste ich aber auch zuerst ausprobieren..

Danke Remo,
die float:left Eigenschaft ist mir bekannt. Dann ist dieser Bereich ein Teil vom Theme und ist auf jeder Seite vorhanden, richtig? Es ist wahrscheinlich nicht schlimm denn ich kann ihn einfach leer lassen.

Beim Erstellen von einer neuen Seite kann man zwischen “Press Release, Seitenleiste links, Seitenleiste rechts und Volle Breite” auswählen – allerdings das Ergebnis sieht irgendwie immer gleich aus – wo ist da genau der Unterschied?

Alex, nein, die Typen Seitenleiste links, rechts sehen nicht zwingend gleich aus. Wenn du in deinem Theme eine PHP Datei hast, welche mit dem Namen des Seitentyps übereinstimmt, so wird dieses automatisch verwendet. Gibt’s keine passende Datei, wird default.php verwendet. Dies wird wohl in deinem Fall so sein… Versuch mal ein Standard Theme zu verwenden, dann siehst du wie sich die Layouts verändern.

Allerdings hast du recht, das neue Layout System deckt unter Umständen vieles davon ab. Auch dieser Block kann damit problemlos abgebildet werden. Je nach Situtation ist es aber einfacher, wenn man nicht Layouts und Blöcke einfügen muss. Mit diesem Block brauchst du noch immer weniger Klicks…

Beachte auch, dass man in den Seitentyp-Standards keine Layouts vordefinieren kann. Dies soll in der nächsten Version funktionieren, kann aber im Moment noch ziemlich lästig sein!

I have installed the folder “person” in the top level “block” folder.

I’m seeing a scrap of PHP code displayed at the top of the Add Functionality -> Installed and Available page, rather than a “Ready to Install” entry for “person.” Other blocks I have installed show up as “Ready to Install.”

Any thoughts?

The text I see is:

t(‘You must select an image.’) ); } function getFileID() {return $this->fID;} function getFileObject() { return File::getByID($this->fID); } function getDescription() {return $this->description;} } ?>

You gave me a good start there, thanks! Indeed in the php.ini on my server I see “short_open_tag = Off.” I’m not a PHP programmer, but from what I’ve read, “Off” is what can be expected “from now on.” If so, you might consider updating the files in your download.

Also, doing a blind search and replace on <? does not work. First, at least one of the files in your bundle already uses the long open tag and I ended up with "<?phpphp" in that file! 😉

The next problem took me two or three hours of fiddling and failed research to finally figure out:

In form.php there are lines like

Left as is, when you attempt to add a “person” block, PHP code again bleeds into the process. Now, it appears in the “add” dialog.

It turns out that you certainly do NOT want to convert this to

Looking at the contents of other Concrete5 blocks, I made a guess that somehow “” really meant

When I made *those* sorts of changes also, I finally was actually able to add a “person” block. Oddly, the text entry area is slightly wider than the window, so a bit of the text on the left/right is clipped off. I can either live with that or probably figure it out.

I couldn’t find any PHP documentation that mention anything about how “=” is the same as ” echo ” (I thought the equals sign was an assignment operator.) If you have any pointers to explanations on this, I’d be interested.

Really, this is just a starting point, because I want to generalize the concept you’ve created. (image on the right, image vertically aligned in the middle, etc.) I appreciate your contribution to solving the problem, but I must say I am quite disappointed that a far richer solution isn’t PART OF the default Concrete5 installation. Having text along side an image is hardly an *exotic* requirement!

Thanks,

eo

Hey, vielen Dank, das ist genau das, was ich bisher nicht gefunden hatte. Ich werde es mir nur so umbauen, dass auch in die linke Spalte Text kommt.

Ich bin noch ziemlich neu in Concrete5 und kann Blöcke bisher noch nicht selber programmieren, aber so was wie dieses kleine Beispiel ist ja immer ein guter Einstieg.

Also vielen Dank.

Hi Remo

This block is great (I’ve edited and used it myself several times), but it doesn’t seem to work on 5.4.1.1 – it doesn’t show up on the Add Functionality page.

Do you have any idea what the problem might be? Please email me if you get a chance!

Regards,

Laurence

Okay, I must be fogged-up today. I have unzipped the archive and uploaded the folder /person to my site’s root/blocks folder so that I have root/blocks/person on the site. But, I’m not seeing the add-on in the “Install Add-on” screen.

Am I missing something? Btw, this is a C5 5.4.2.2 site.

Thanks for any help provided.

Regards,

Chris

Hi Chris, I don’t see anything wrong with what you describe. As long as you have /blocks/person/controller.php you should be fine. There might be a cache problem or something, but I never had any issues here! Have you tried this on multiple sites?
Remo

Depending on what you’re actually trying to do, this could be a lot of work. I’m thinking about reoccurring appointments, a fancy AJAX interface etc. etc. To give you a more precise answer, I’d need to know a bit more about the details..
But anyways, I’d start by get familiar with with the datepicker, it might be what you need to ask the user for a date:

$dt = Loader::helper('form/date_time');
print $dt->date('my-date', "09/10/2012", true);

Remo,

This is a great block that I have used on a previous site that we inherited. I am trying to install it on a new site that is in development. It is not showing up. I have unzipped the files and placed them in
httpdocs/blocks/person – am I missing something?

Happy New Year.

John

Hi John,
it’s a bit difficult to know why the block doesn’t show up without an error message or something that tells me what’s wrong.
There’s a general rule I usually follow: When developing a new site, always disable the caches. Just type “cache” in the intelligent search box and select the cache settings screen. Try to disable all of them and check if that changes anything.
Happy New Year too!
Remo

Remo,

I have disabled the cache and the add-on is still not showing up to be installed…I am really feeling dumb right now. I must be missing something.I have placed it in the httpdocs/blocks/person.

Should it be in the concrete/blocks directory

John

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *



CodeBlog.ch, 2024. Theme Material for Coders