Help with Pages

[AlexWright]

Hi all! Attempting to build a Characters Page in the Pages application with several custom fields such as Name, Age, etc. etc. There is an Upload for reference sheets and other character images (multiple upload allowed). However, the issue comes in displaying these uploads as images. The default Display options only display the multiple uploads as URLs, and I'm not versed enough in php and template logic to create something akin to the "new images" block for the gallery which would be a great way to display something like this. Can anyone recommend a way to accomplish this? Is there already a plugin or application for this?

Cheers,

Alex

[opentype]

Looping through the images would work like this:

{{if $formValue}}
{{foreach $value as $image}}
<img class="ipsImage" src="{$image}">
{{endforeach}}
{{endif}}

That would show one image after another.

This would be a variation with a simple grid view:

{{if $formValue}}
<div class="ipsGrid ipsGrid_collapsePhone">
{{foreach $value as $image}}
  <div class="ipsGrid_span4">
	<img class="ipsImage" src="{$image}">
  </div>
{{endforeach}}
</div>
{{endif}}

 

[AlexWright]

11 hours ago, opentype said:

Looping through the images would work like this:

{{if $formValue}}
{{foreach $value as $image}}
<img class="ipsImage" src="{$image}">
{{endforeach}}
{{endif}}

That would show one image after another.

This would be a variation with a simple grid view:

{{if $formValue}}
<div class="ipsGrid ipsGrid_collapsePhone">
{{foreach $value as $image}}
  <div class="ipsGrid_span4">
	<img class="ipsImage" src="{$image}">
  </div>
{{endforeach}}
</div>
{{endif}}

 

Thank you very much for this! The only problem we are having is that it's not using the CDN through amazon (which is cdn.domain.com), it's using the live site (domain.com) for the img source. Is there a way to correct this? Thanks you again!

Edit:
Trying this:

{{if $formValue}}
<div class='ipsBox'>
    <h2 class='ipsType_sectionTitle ipsType_reset'>Character Photos</h2>
    <div data-ipsPhotoLayout data-ipsPhotoLayout-itemTemplate='gallery.patchwork.indexItem' data-ipsPhotoLayout-maxRows='3' class='ipsPad ipsClearfix cGalleryPatchwork_index'>
        <ul class='ipsList_inline'>
            {{foreach $value as $image}}
                <li data-role='patchworkImage' data-json='{$image->json()|raw}'>
                    <a href='{$image->url()}'><img src='{file="$image->small_file_name" extension="gallery_Images"}' alt='' class='ipsJS_hide'></a>
                </li>
            {{endforeach}}
        </ul>
    </div>
</div>
{{endif}}

Throws an error:

Error: Call to undefined method IPS\File\Amazon::json() (0)

[Joel R]

Check with @Morrigan.  She has an awesome pages database for her rpg site of characters.  

[AlexWright]

4 hours ago, Joel R said:

Check with @Morrigan.  She has an awesome pages database for her rpg site of characters.  

You're talking about https://rpginitiative.com/characters/ ? If so, that's basically exactly what we're looking for! Is this a standard Pages database or is it a custom Characters addon? Would love to know more.

Edit: Found it! It's the character mod https://rpginitiative.com/files/file/11-ips-character-mod-v43/ 

[loccom]

On 2/2/2019 at 9:13 AM, opentype said:

Looping through the images would work like this:

{{if $formValue}}
{{foreach $value as $image}}
<img class="ipsImage" src="{$image}">
{{endforeach}}
{{endif}}

That would show one image after another.

This would be a variation with a simple grid view:

{{if $formValue}}
<div class="ipsGrid ipsGrid_collapsePhone">
{{foreach $value as $image}}
  <div class="ipsGrid_span4">
	<img class="ipsImage" src="{$image}">
  </div>
{{endforeach}}
</div>
{{endif}}

 

@opentype just what i was looking for. Do you know how i would make these have equal gaps and also clickable to show larger version?

thanks