how to load images to a template using flexbox

Welcome to the forums

First thing to know is how you are getting the images, are your gallery images stored on one entry or taken from multiple entries?

Typically you might want to use the “File grid” fieldtype (see https://docs.expressionengine.com/latest/fieldtypes/file-grid.html ). This will allow you to add images (in bulk if you want to) and add extra fields for things like captions and other data.

Outputting images like this in a channel entry is fairly straightforward, I’d do something like this:

{exp:channel:entries channel="yourchannel"}

<h1>{title}</h1>

<div class="gallery">
{gallery_field}
  <div class="gallery-thumb">
    {gallery_field:file}
  </div>
  <div class="gallery-description">
    {gallery_field:my_caption}
  </div>
{/gallery_field}
</div>

{/exp:channel:entries}

Of course you’re free to use whatever HTML and CSS classes you want, I prefer a minimal approach to keep page size as small as possible.

Hi Rob, Thanks for your explanation which is very helpful. The images for the page will all be from one field - so my next hurdle is to understand how to check the file name within the template. I’ve seen code like

{if file} some html {/if}

which would only include the html if “file” has a value.

But is it possible to perform any string operations to see if the string file ends in col1.jpg or col2.jpg for example?

So in pseudo code something like {if right(file,8) == "col1.jpg"} some html {/if} {if right(file,8) == "col2.jpg"} some different html {/if}

That’s the crux of what I need to do to fill the columns with images.

Does that look possible? And if so, is the code going to be written in php?

If you use a File grid field (or a normal grid field) EE will loop through all the data in that field and template tag by default.

So for example let’s say your grid field has short name of “gallery”. In your template you add a tag “pair” like this:

{gallery}
 <div>{gallery:file}</div>
{/gallery}

What that will do is loop through the field rows and output everything it finds. If the field is empty the tag will do nothing, that’s quite normal.

If you wanted to add some wrapping HTML, like you’d need to use CSS flexbox or CSS grid you could use a conditional tag inside the gallery tag:

{gallery}

{!-- opening HTML wrapper --}
{if gallery:count == 1}
<h2>My gallery</h2>
<div class="gallery-wrapper">
{/if}
 
<div>{gallery:file}</div>

{!-- close wrapper after the last item --}
{if gallery:count == gallery:totals_rows}
</div>
{/if}
{/gallery}

…again, if the field has no contents it won’t output anything. You’d use the “gallery-wrapper” to apply your CSS flexbox rules to the inner DIV elements.

Let’s say you wanted to check if the field has any content (or not) you could do something like this:

{if gallery}

 The gallery exists! Here are the photos:

{gallery}
 <div>{gallery:file}</div>
{/gallery}``
`
{/if}

Finally you can use conditional tags to check if a value has a match - https://docs.expressionengine.com/latest/templates/conditionals.html

For example if you wanted to check if the file contained the string “col1” you could do something like this:

{if my_image_field *= "col1"}Yes it does{/if}

This is shorthand for “if the image name contains ‘col1’ then do this.”

You could extend that a bit and say “if the image name contains ‘col1’ then do this, otherwise do that”

{if my_image_field *= "col1"}Yes it does
  {if:else}
    No it doesn't
{/if}

Hi Rob, thank you for this. The count looks like the way to go. I think each gallery item will be either an image or a video with a title. I haven’t quite got my head around how you loop through a set of fields like this but I’m guessing this is where field groups come in - is that the essence of it? Looking forward to trying out some test pages at the weekend. Thanks again - so useful to have such a prompt and clear answer.

When you create a “channel” you assign some custom fields to it. A channel is simply a container for a certain type of information, such as blog posts or products or general information pages. There’s no specific way to say what channels you need since EE allows you to build them any way that matches your needs.

There are generally four types of field:

Generic fields available in every channel, such as Title, URL title, Entry date and so on

Single input fields such as text input (one line), textarea (multi line), rich text, file.

Selection inputs such as checkboxes, radio button, select, these are used so author can select predefined information, typical example you might want a Yes/No option, or a predefined list of colours the author can choose from.

Repeating inputs such as the Grid field, this is a single field but you can add multiple bits of data to it, ideal for grouping a set of images for a gallery.

When you have set up a channel and added some fields to it you can now write a template to display the information.

{exp:channel:entries channel="mychannel"}

<!-- generic Title -->
<h1>{title}</h1>

<!-- single input fields -->
{my_input_field}

{my_textarea_field}

{my_file_field}
  {url}
{/my_file_field}

<!-- repeating fields such as a Grid -->
{my_grid_field}
  {my_grid_field:my_grid_field_field1} {my_grid_field:my_grid_field_field2} 
{/my_grid_field}

{/exp:channel:entries}

You can arrange the field order in your template so you content is positioned where you want it.

Hi Rob, just to say thanks for your answers - I’ve had a play over the weekend and have a couple of test pages that look to achieve the structure I’m after, so fingers crossed I’m on a roll now… Cheers, Mark