The data in Craft is handled mostly by Models (and arrays of Models). Before pulling actual information, you define your criteria in an ElementCriteriaModel using generic parameters and parameters specific to what you are trying to get (entries, assets, etc.). You then use one of the ElementCriteriaModel's functions to pull the actual data. You will get either a model or an array of models to loop over. This works the same for most things in Craft because most things are Elements.
You can look under the Variables heading in the side menu of the templating docs to see the kinds of models you will get.
On your homepage, you start with an automatically created entry
model (this is created on every page that Craft recognizes as an entry's page). Here's the basic code you need:
{% for event in entry.featuredEvent %}
{# Output some event code here #}
{% set block = event.articleBody.type('image').first() %}
{% for image in block.image.find() %}
{# Output some image code here #}
<img src="{{ image.getUrl(image.size) }}" class="{{ image.alignment }}">
{% endfor %}
{% endfor %}
So an explanation of the above. In Craft, related elements are not automatically pulled from the DB. Instead each field that points to a related element (entries, assets, categories, users, etc.) is an ElementCriteriaModel
so that you add more criteria before pulling. So entry.featuredEvent
is an ElementCriteriaModel
that points to all of your featured event entries.
When working with ElementCriteriaModel
you have a few options to pull the data and use it. In the above code, when you give a for
loop ElementCriteriaModel
it will automatically pull the data and give the loop entries. So we take the entry.featuredEvent
, and loop over the entries that's given to us when we use it in the for
loop.
Inside the for loop, we pull the first image block in event.articleBody
. Because matrix blocks are elements, we get the same features. So we set the type, and pull the first one.
In the next for
loop, we are grabbing all of our images in the image block. The tricky part here is that we can make the code a little more efficient by simply pulling all of the images and looping over them. If you have very different html you plan on using for one image and multiple images, you will need to set
the images as a variable like we did the block. You can then check the number of images using the length
filter, and either Craft's switch
tag, or a couple if
statements.
Personally, I recommend using the loop, and using CSS to make the style differences you need.
Finally, we output each image. Because you're using a transform on them, we can't use each assets getImg
function. Instead we write the img tag manually and grab the transformed url using getUrl
.
The next bit is making a couple assumptions. I'm assuming that size
is a image transform handle. I'm also assuming that these fields are on the asset. If they're on the matrix block, replace image.size
and image.alignment
with block.size
and block.alignment
.