Hello, first time posting here, I've given in to my frustration. I've been trying to implement a one page portfolio site for my client and I cannot figure out why my images aren't loading. I have a single test project under one folder, yet for some reason all four folders are showing up and there's no image source where the image should be.

<img src="" class="logo" alt="theatricallogo" style="opacity: 0;">

I'm not sure if I misconfigured my templates or project folders.

I currently have two pages, one main index.php with all the projects embedded into an html snippet and another for managing all the projects, from a single cloneable project template. The thumbnails and logo images are stored on this project page, but I don't see why they shouldn't show up when called on index.php.

This is a modified Html5Up template (this also means I'm using skel, I'm not sure if this is the cause of the issue either.)

the website is located here [url]glassellhouse.com[/url]

projectlist.html (snippet)

Code: Select all

<cms:folders masterpage='projects/project.php' folder=k_folder_name>

<div class="row uniform 100% banner" id="<cms:show k_folder_title />"><div class="12u"><h1><cms:show k_folder_title /></h1></div><div class="overlay2"></div></div>
 <div class="row uniform 50%">

<div class="2u"><span class="image fit kiwi"><a href="<cms:show project_link />" data-poptrox="iframe,1800x835" class="image"><img src="<cms:show clientlogo />" class="logo" alt="<cms:show k_folder_title />logo"><div class="overlay"></div>< <img src="<cms:show project_thumb  />" alt="<cms:show k_page_title />"></a><p class="caption"></p></span></div>
</div>
</cms:folders>

project.php

Code: Select all

<?php require_once( '../admin/cms.php' ); ?>
<cms:template title='projects' clonable='1'>
<cms:editable name='clientlogo' crop='0' type='image' />
<cms:editable name='project_thumb' crop='0' type='image' />
<cms:editable name='title_1' type='text' />
<cms:editable name='name_1' type='text' />
<cms:editable name='title_2' type='text' />
<cms:editable name='name_2' type='text' />
<cms:editable name='title_3' type='text' />
<cms:editable name='name_3' type='text' />
<cms:editable name='title_4' type='text' />
<cms:editable name='name_4' type='text' />
<cms:editable name='title_5' type='text' />
<cms:editable name='name_5' type='text' />
<cms:editable name='project_description_col_1' type='textarea' />
<cms:editable name='project_description_col_2' type='textarea' />
<cms:editable name='project_image_1' crop='0' type='image' />
<cms:editable name='project_image_1_caption' type='text' />
<cms:editable name='project_image_2' crop='0' type='image' />
<cms:editable name='project_image_2_caption' type='text' />
<cms:editable name='project_image_3' crop='0' type='image' />
<cms:editable name='project_image_3_caption' type='text' />

<cms:folder name='cat1' title='theatrical' />
<cms:folder name='cat2' title='gaming' />
<cms:folder name='cat3' title='av' />
<cms:folder name='cat4' title='home' />
</cms:template>

index.php

Code: Select all

<?php require_once ( 'admin/cms.php' ); ?>
<cms:template title='Index' />
<cms:folder name='cat1' title='theatrical' />
<cms:folder name='cat2' title='gaming' />
<cms:folder name='cat3' title='av' />
<cms:folder name='cat4' title='home' />

[trendoman]

Easy one. You are using cms:folders and it fetches information about folders only.
So, if you noticed, not only images are not showing, also links in href are not showing.

You have to rewrite it to cms:pages instead to fetch editables from those pages. Can you try it?

[KK]

Hi,

Expanding on what @trendoman said -
I see that you are trying to select a single folder using cms:folders -

<cms:folders masterpage='projects/project.php' folder=k_folder_name>
...
</cms:folders>

There are two problems -
1. The projectlist.html is embedded within the 'index.php' template so, for all practical purposes, the code above could be considered as placed within index.php.

Now, folders work only with clonable templates (understandable as they are meant to hold clonable pages). The index.php template is not clonable, so the 'k_folder_name' variable won't be available for it.

2. The right parameter to use would be either 'root' or 'childof'.

That would explain why you are always getting a list of all four folders.

For example, if you try the following, it would target a single folder named 'theatrical'

Code: Select all

<cms:folders masterpage='projects/project.php' root='theatrical' depth='1'>
    <h1><cms:show k_folder_title />
    ...
</cms:folders>

To fetch in the pages belonging to that folder (and hence the missing images), try the following -

Code: Select all

<cms:folders masterpage='projects/project.php' root='theatrical' depth='1'>
    <h1><cms:show k_folder_title />
    ...
    
    <cms:pages masterpage='projects/project.php' folder=k_folder_name>
        <cms:show k_page_title /> <br/>
        <img src="<cms:show clientlogo />" />
        ..
    </cms:pages>
</cms:folders>

Hope it helps.

It worked! Thank you both for your timely reply.

My only concern now is that these projects are full pages with multiple images and text, but I also have lightbox images for some projects, which require a simpler code template.

Is there a way to merge both of these project types into one masterpage for sorting? Kind of like this?

Screen-Shot-2016-04-13-at-1.24.41-AM.jpg (43.94 KiB) Viewed 2258 times

They're identical in terms of their thumbnails, it just requires a different template code.

[trendoman]

This is not possible, at least not yet.

Probably it's better to create a checkbox 'is lightbox?' inside Projects template.

Then you can output only checked pages anywhere by using such sample construction:
<cms:pages masterpage='projects.php' custom_field="lightbox==1" >
.. fetches only pages with lightbox..
</cms:pages>
This is a sample idea of the code, hope you can figure out the rest with docs on custom_field.