Hey everyone,
I’ve a little problem… I think I can describe it better with a picture, so, here is what I want to accomplish (I took it from my mockup):
These things inside the red box are links to the corresponding Wiki, Blog, whatever Article
I’ve created 4 fields for this in the backend. It looks like this:
Now I want that a snippet is created for each field that actually has content in it. How can I do this?
<? php foreach($page()->url() != 0) ?> wont be the right thing I suppose. But well, as you can see, I'm a noob. And I'd appreciate some help.
I hope that you understand me. Focus on the part inside the red box, the Mockup is quite old and I’m thinking of styling the link snippets a bit different, but at first I have to know how to implement those snippets.
Here you can see how far I am right now:
Thanks! And sorry for my quite bad english!
You can check if a field is not empty like this:
<?php
if($page->field()->isNotEmpty()) {
// do something
}
If you want to loop through these fields, you could create an array of field names and then loop through this array, using the fieldname variable as page method:
$fieldnames = ['field1', 'field2', 'field3', 'field4'];
foreach($fieldnames as $fieldname) {
if($page->$fieldname()->isNotEmpty()) {
// your code here;
})
}
Okay thanks! This was a quite fast response :).
<?php foreach($fieldnames as $fieldname) {
if($page->$fieldname()->isNotEmpty()) { ?>
<div class="linkSnippet" id="<?php $fieldnames[???] ?>"></div>
<?php})}?>
I’d implement it like this, how can I set the ID Name to the corresponding Fieldname? Like if it’s a Wiki Link, the id should be: “wiki” and so on.
I’ve put the array on top of the projects.php snippet.
Sorry, I never used “foreach”. And thanks for you awesome help!
<?php foreach($fieldnames as $fieldname):
if($page->$fieldname()->isNotEmpty()): ?>
<div class="linkSnippet" id="<?= $fieldname ?>"></div>
<?php endforeach; ?>
<?php endif ?>
Okay awesome, thanks!
<?php foreach($fieldnames as $fieldname):
if($page->$fieldname()->isNotEmpty()): ?>
<a href="<?php echo $page->fieldname()->url() ?>">
<div class="linkSnippet" id="<?= $fieldname ?>"></div>
</a>
<?php endif; ?><?php endforeach ?>
Do I access the URL correctly?
<a href="<?php echo $page->fieldname()->url() ?>">
// Doesn’t work… my Divs aren’t created… I filled the youtube-video field with a link but well, no div :s.
The following needs to be the same as the names in the .yaml file, right?
<?php $fieldnames = ['wiki', 'blog', 'yt', 'itch']; ?>
… the same as…
wiki:
label: Wiki
type: url
icon: wikipedia-w
width: 1/2
blog:
label: Blog
type: url
icon: rss
width: 1/2
yt:
label: YouTube-Video
type: url
icon: youtube-play
width: 1/2
itch:
label: Itch.IO
type: url
icon: shopping-cart
width: 1/2
Exactly, but the url() method does not make sense (there is no url() field method) and all you need is the field value:
<a href="<?php echo $page->$fieldname() ?>">
<div class="linkSnippet" id="<?= $fieldname ?>"></div>
</a>
Your field already contains the URL.
Ah okay, but it still doesn’t work. No Div created 
.
What result do you get in the source code?
<? /* This file is basically the list of ALL existing projects. Is used in header.php snippet to get information about all projects. */ ?>
<?php $fieldnames = ['wiki', 'blog', 'yt', 'itch']; ?>
<ul class="teaser cf">
<?php foreach(page('projects')->children()->visible() as $project): ?>
<li>
<div class="projectEntry hvr-reveal">
<a href="<?php echo $project->url() ?>">
<div class="projectEntryOverlay"></div>
</a>
<?php foreach($fieldnames as $fieldname):
if($page->$fieldname()->isNotEmpty()): ?>
<a href="<?php echo $page->$fieldname() ?>">
<div class="linkSnippet" id="<?= $fieldname ?>"></div>
</a>
<?php endif ?><?php endforeach ?>
<div class="projectReadMore"><h3 class="projectHeader"><?php echo $project->title()->html() ?></h3></div>
<p class="projectDescription"><?php echo $project->text()->excerpt(80) ?> </p>
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
<img class="projectEntryImage" src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>" >
<?php endif ?>
</div>
</li>
<?php endforeach ?>
</ul>
This is my code for now. I don’t get any errors in the console or whatever, the Page builds up correctly and there is nothing messed up (I don’t have specified the Class or IDs yet… so visually nothing should change) but well, the inspector doesn’t show a new DIV underneath the Overlay
Well, the problem is that you have to use the $project variable within the foreach loop, not $page
<?php $fieldnames = ['wiki', 'blog', 'yt', 'itch']; ?>
<ul class="teaser cf">
<?php foreach(page('projects')->children()->visible() as $project): ?>
<li>
<div class="projectEntry hvr-reveal">
<a href="<?php echo $project->url() ?>">
<div class="projectEntryOverlay"></div>
</a>
<?php foreach($fieldnames as $fieldname):
if($project->$fieldname()->isNotEmpty()): ?>
<a href="<?php echo $project->$fieldname() ?>">
<div class="linkSnippet" id="<?= $fieldname ?>"></div>
</a>
<?php endif ?><?php endforeach ?>
<div class="projectReadMore"><h3 class="projectHeader"><?php echo $project->title()->html() ?></h3></div>
<p class="projectDescription"><?php echo $project->text()->excerpt(80) ?> </p>
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
<img class="projectEntryImage" src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>" >
<?php endif ?>
</div>
</li>
<?php endforeach ?>
</ul>
Ah awesome it works 
! Now a quick “style-question”: div inside a or a inside div?
Logically “div inside a” makes more sense to me, because it’s a “link”/“anchor” and within is “content”. “a inside div” feels weird… a div and within it is a “link”/“anchor” but you can click the link on the whole div …
But well… I’ve read that both is working since HTML 5… - what do you think?
And well… is my HTML as messed up as I think it is?
What are you doing with the empty div?
These Link Snippets to a Wiki entry for example (look at picture #1 in my first post). But well, I get confused by the z-index stuff to use the shadows the way I want lol… now I want that the shadow from Project A overlaps the linkSnippet of Project B … damn lol
