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:
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.
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!
on Juni 6th, 2009 at 12:10:37
[...] the original post: Concrete5 – Staff listing with two Columns .adHeadline {font: bold 10pt Arial; text-decoration: underline; color: #3D81EE;} .adText {font: [...]
on Juni 6th, 2009 at 15:04:39
Hey Remo –
Great to see you posted this! This block helped me greatly!
on Juli 13th, 2009 at 20:11:50
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.
on Juli 13th, 2009 at 20:20:11
I never used “inline-block” because it’s not only not valid but also not very well supported. Firefox 2 doesn’t support it and Internet Explorer up to Version 7.0 has only incomplete support of inline-block… But if it works for you..
on Juli 29th, 2009 at 00:03:18
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
on August 21st, 2009 at 03:54:51
[...] Profile – Based on Remo’s People Block, this block allows you to create a profile for an employee. You can display the employee’s [...]
on November 14th, 2009 at 22:13:23
Newbie to Concrete5
This is the block I have been looking for.
I have installed the block but not the CSS code.
What file do I need to add the CSS to get the text to move to the left?
I am reading up on CSS 101.
Thanks.
on November 16th, 2009 at 12:06:31
Why don’t you modify the html code in view.php? Should be a lot easier I think..
on Dezember 15th, 2009 at 15:42:46
[...] Profile – Based on Remo’s People Block, this block allows you to create a profile for an employee. You can display the employee’s [...]
on Januar 27th, 2010 at 19:25:05
Any reason why this block won’t show under “Add Functionality”?
on Januar 27th, 2010 at 19:29:26
you have to extract this in “blocks” not packages, you also have to make sure the directory “person” is still there!
on Februar 17th, 2010 at 06:02:34
[...] Profile – Based on Remo’s People Block, this block allows you to create a profile for an employee. You can display the employee’s [...]
on März 1st, 2010 at 00:57:08
Hi Remo, I’m a newbie, so this might be a dumb question – where exactly do you specify the css styles? I was expecting to see a css file, or some inline code in your example, but it seems to be a css example without any css?
on März 1st, 2010 at 01:22:27
Ah, ok so if I save it as view.css it automatically gets added to the page – cool! But the layout is a bit screwy – I’ll experiment – thanks for the example!
on Mai 11th, 2010 at 23:20:58
How would I add a title field to this also? So I can put someones name, job tilte and description?
on Mai 12th, 2010 at 00:08:21
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….
on Mai 15th, 2010 at 04:39:47
This block is ideal for me, but I really need to have a music player block on the left instead of a photo. Is there any way to make that happen?
on Mai 15th, 2010 at 08:30:19
CSS can be at the beginning of view.php but you can also create view.css if you want or you can but it in main.css of your theme.. It doesn’t matter where it is as long as it is included..
There’s no problem in using this as a music player. You can use these instructions to replace the img tag with an embedded flash player:
http://wpaudioplayer.com/standalone
on Mai 19th, 2010 at 06:33:48
How would I go about inserting an email link? I almost always need to put an email link in a person’s bio – in the text and on their photo.
on Mai 31st, 2010 at 16:17:32
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)?
on Mai 31st, 2010 at 19:54:54
@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..
on Juni 1st, 2010 at 08:39:51
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?
on Juni 2nd, 2010 at 09:51:08
Das neue Layout-System in concrete 5.4 ist genau das was ich brauche – man kann mehrere Blöcke auf der Seite anordnen ohne das man Templates verändern muss.
on Juni 4th, 2010 at 12:20:36
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!
on August 16th, 2010 at 05:00:14
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;} } ?>
on August 16th, 2010 at 08:39:42
Eric, this might be because your web server doesn’t allow php short tags.
Try this: Change your configuration or look for <? in every php file and replace it with <?php
on August 17th, 2010 at 04:46:49
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
on August 17th, 2010 at 04:49:00
Hmm. Some of my code snippets were eaten by your blogging software. If you tell my how to avoid this, I’ll try to come back and correct things.