Forum

Thread tagged as: Question, Problem, Blog

Blog post image not appearing under field ID

Further to my new Runway project and porting over a standard Perch blog I've encountered another problem — perhaps an error on my part but I'm stumped nonetheless.

I have a field the user upload his/her image to within the post template:

<perch:blog id="image" type="image" width="1200" height="800" label="Thumbnail" help="Max of 1200x800" bucket="wod" order="2" />

And my listing page:

<perch:blog id="image" type="image" width="600" height="600" crop="true" bucket="wod" />

The image would then appear and all is well. However now, despite the field ID being image, the images don't appear unless I use perch_image which I only noticed because I used <perch:showall /> to see if my image field was being populated. The results of one of the show all is:

ID  Value
url_0   /workout-diary/2017-04-10-tues-10417
url_s   2017-04-10-tues-10417
url_1   2017-04-10-tues-10417
today   2017-04-10
todaydt 2017-04-10 07:45
perch_page_path /news/post
domain  https://localhost
url https://localhost/workout-diary/2017-04-10-tues-10417
tel 07792 183675
email   info@reebokcrossfitglevum.com
perch_image /perch/resources/wod/mediabg.jpg
_blocks 

Array
(
    [0] => Array
        (
            [fullimage] => Array
                (
                    [assetID] => 3
                    [title] => Service 1
                    [_default] => /perch/resources/service1.jpg
                    [bucket] => default
                    [path] => service1.jpg
                    [size] => 449233
                    [w] => 800
                    [h] => 450
                    [mime] => image/jpeg
                    [sizes] => Array
                        (
                            [thumb] => Array
                                (
                                    [w] => 150
                                    [h] => 84
                                    [target_w] => 150
                                    [target_h] => 150
                                    [density] => 2
                                    [path] => service1-thumb@2x.jpg
                                    [size] => 22588
                                    [mime] => image/jpeg
                                    [assetID] => 4
                                )

                            [w1000hc0] => Array
                                (
                                    [w] => 800
                                    [h] => 450
                                    [target_w] => 1000
                                    [target_h] => 
                                    [crop] => 
                                    [density] => 1
                                    [path] => service1-w1000.jpg
                                    [size] => 449233
                                    [mime] => 
                                    [assetID] => 24
                                )

                        )

                )

            [alt] => This is an image of Rosie
            [_block_type] => singleimage
            [_block_id] => oo7gnh
            [_block_index] => 0
        )

)

categories  
image   
og_title    TUES 10/4/17
og_description  
og_image    
og_type 
itemID  509
postID  509
blogID  1
postTitle   TUES 10/4/17
postSlug    2017-04-10-tues-10417
postDateTime    2017-04-10 19:15:52
postDescRaw 
postDescHTML    
postDynamicFields   {"perch_image":null,"_blocks":[{"fullimage":{"assetID":"3","title":"Service{...}
postTags    
postStatus  Published
authorID    1
sectionID   4
postCommentCount    0
postImportID    
postLegacyURL   
postAllowComments   1
postTemplate    posts/wods.html
postMetaTemplate    post_meta.html
sortval 509
paging  false
total   1
number_of_pages 1
total_pages 1
per_page    10
current_page    1
lower_bound 1
upper_bound 1
prev_url    
next_url    
prev_page_number    
next_page_number    
first_page_url  /workout-diary/2017-04-10-tues-10417
last_page_url   /workout-diary/2017-04-10-tues-10417
first_page  true
last_page   true
perch_perch_image   
perch__blocks   

Array
(
    [0] => Array
        (
            [fullimage] => Array
                (
                    [assetID] => 3
                    [title] => Service 1
                    [_default] => /perch/resources/service1.jpg
                    [bucket] => default
                    [path] => service1.jpg
                    [size] => 449233
                    [w] => 800
                    [h] => 450
                    [mime] => image/jpeg
                    [sizes] => Array
                        (
                            [thumb] => Array
                                (
                                    [w] => 150
                                    [h] => 84
                                    [target_w] => 150
                                    [target_h] => 150
                                    [density] => 2
                                    [path] => service1-thumb@2x.jpg
                                    [size] => 22588
                                    [mime] => image/jpeg
                                    [assetID] => 4
                                )

                            [w1000hc0] => Array
                                (
                                    [w] => 800
                                    [h] => 450
                                    [target_w] => 1000
                                    [target_h] => 
                                    [crop] => 
                                    [density] => 1
                                    [path] => service1-w1000.jpg
                                    [size] => 449233
                                    [mime] => 
                                    [assetID] => 24
                                )

                        )

                )

            [alt] => This is an image of Rosie
            [_block_type] => singleimage
            [_block_id] => oo7gnh
            [_block_index] => 0
        )

)

perch_categories    
perch_og_title  TUES 10/4/17
perch_og_description    
perch_og_image  
perch_og_type   
authorGivenName Mat
authorFamilyName    Doidge
authorEmail hello@visualdecree.co.uk
authorPostCount 5
authorSlug  mat-doidge
authorImportRef 
authorDynamicFields 
sectionTitle    Workout Diary
sectionSlug workout-diary
sectionPostCount    405
sectionDynamicFields    {"image":null}
postURL 2017-04-10-tues-10417
perch_item_first    true
perch_item_last true
perch_item_zero_index   0
perch_item_index    1
perch_item_rev_index    1
perch_item_rev_zero_index   0
perch_item_odd  
perch_item_count    1
perch_namespace perch:blog
Mathew Doidge

Mathew Doidge 2 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Only one of the tags has crop set.
Mathew Doidge

Mathew Doidge 2 points

4 years ago

Oh yes missed that — fixed. Even for my imported stories from the previous website, none of the images appear for the image field - even when using the original templates. Am I missing something glaringly obvious :S
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

How did you import them?
Simon Clay

Simon Clay 127 points

4 years ago

Do you have

<perch:blog id="image" type="image" width="600" height="600" crop="true" bucket="wod" suppress="true" />

in your post template? You'll need it there for Perch to create the cropped image at edit time, ready for use in the listing template.
Mathew Doidge

Mathew Doidge 2 points

4 years ago

Hi Simon, Yes I have that in there. Drew, I got it working - at least on the listing page. I found that I had a <perch:blog id="sectionTitle" /> tag in the <perch:before> section - if I remove this, it works and the image field is populated, put the field back in the before and the image field goes blank again. I assumed it would be ok to use a tag within the <perch:before>?

Example:

<perch:before>
<div class="workout contain pull-Up">
    <div class="workout-Diary is-Padded listing">
    <div class="workout-Diary_Header"><h1><perch:blog id="sectionTitle" /></h1></div>
</perch:before>
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Yes, it should - that could be a red herring. Check that your tags are all correctly formatted.
Mathew Doidge

Mathew Doidge 2 points

4 years ago

I went over it with a magnify glass. I decided for the sake of testing to try this:

<perch:blog id="sectionTitle" />
<perch:blog id="image" type="image" width="600" height="600" crop="true" bucket="wod" />

Interestingly the image still doesn't appear when this is all that's in the listing template. As soon as I remove the sectionTitle, the image works. Looking at the show all results, the sectionTitle and sectionSlug are correctly listed when the tag is in the template, however when I remove it, they no longer appear - only sectionID. Is this normal behavior? Or do I need to pass the section title into the template for it to be available?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Does your section template also include a field with id="image"?

If you include section tags, we load in the section. You could then end up with multiple fields with the same ID if your templates are not carefully designed.
Mathew Doidge

Mathew Doidge 2 points

4 years ago

So I'm pulling my sections out like:

perch_blog_custom(array(
    'template' => 'news_listing.html',
    'count' => 12,
    'section' => 'news',
    'sort' => 'postDateTime',
    'category' => array('news/articles/', 'news/athlete-spotlight/'),
    'sort-order' => 'DESC',
));

Rather than using perch_blog_section - would this be the problem - I'm trying to access section tags inside of the index page for news, via perch_blog_custom ?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Does your section template also include a field with id="image"?
Mathew Doidge

Mathew Doidge 2 points

4 years ago

I have my wod post-type template:

<article class="workout contain pull-Up">
    <div class="workout-Diary is-Padded_Bott entry">

        <div class="workout-Diary_Head" style="background-image: url(<perch:blog id="image" type="image" width="1200" height="800" label="Thumbnail" order="2" bucket="wod" />);">
            <div class="workout-Diary_Pre">
                <h1><perch:blog id="postTitle" type="text" label="WOD Title" required="true" size="xl autowidth" order="1" /> </h1>
                <perch:if id="postDateTime" match="eq" value="{today}" format="Y-m-d">
                    <h6 class="new-Workout">NEW - Upcoming Workout</h6>
                </perch:if>
            </div>
        </div>
        <div class="workout-Diary_Blocks">
            <perch:template path="content/blocks.html" rescope="parent" order="3" />

            <div class="download-Button">
                <a class="button button-Tiny button-Black" href="<perch:blog id="image" type="file" label="Download todays photo" type="hidden" />" download="<perch:blog id="postTitle" />.jpg">Download todays photo</a>
            </div>
        </div>

    </div>
</article>

<perch:categories id="categories" set="news" label="Categories" display-as="checkboxes" suppress="true" divider-before="Publishing" order="4">
    <a href="archive.php?cat=<perch:category id="catSlug" type="slug" />" class="p-category">
        <perch:category id="catTitle" type="text" />
    </a>
</perch:categories>

and the workout listing (which is where I think was confused with what you're asking - is the listing technically my section template?)

<perch:before>
<div class="workout contain pull-Up">
    <div class="workout-Diary is-Padded listing">
    <div class="workout-Diary_Header"><h1><perch:blog id="sectionTitle" /></h1></div>
</perch:before>
        <div class="workout-Diary_Item">
            <div class="image"><div style="background-image: url(<perch:blog id="image" type="image" width="600" height="600" crop="true" bucket="wod" />);"></div></div>
            <div class="core">
                <perch:if id="postDateTime" match="eq" value="{today}" format="Y-m-d">
                    <h6 class="new-Workout">NEW - Upcoming Workout</h6>
                </perch:if>
                <h1><perch:blog id="postTitle" /></h1>
                <button class="button button-Tiny button-Kahki">View Workout</button>
            </div>
            <a href="/workout-diary/<perch:blog id="postSlug" />" class="link" title="<perch:blog id="postTitle" />"></a>       
        </div>
<perch:after>
    <perch:if exists="paging">
        <div class="paging">
            <perch:if exists="not_first_page">
                <a href="/workout-diary/page/<perch:blog id="prev_page_number" encode="true" />" class="btn btn--tiny btn--grey-hollow prev-btn">&larr; Previous</a>
            </perch:if>
            Page <perch:blog id="current_page" /> of <perch:blog id="number_of_pages" />
            <perch:blog id="page_links" encode="false" />
            <perch:if exists="not_last_page">
                <a href="/workout-diary/page/<perch:blog id="next_page_number" encode="true" />" class="btn btn--tiny btn--grey-hollow next-btn">Next &rarr;</a>
            </perch:if>
        </div>
    </perch:if>
    </div>
</div>
</perch:after>
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

So that looks like a yes. Is that the cause of your problem?
Mathew Doidge

Mathew Doidge 2 points

4 years ago

Drew McLellan said:

So that looks like a yes. Is that the cause of your problem?

Sorry, I'm struggling to understand the cause. Because my template is pulling in the section are you saying I can't use the image field here? If so, how would I get a crop of the image they've posted in the post type template through to this page?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I'm saying that you've got two fields with the same ID in the same template. If you reference a section, the section gets imported and your IDs clash.
Mathew Doidge

Mathew Doidge 2 points

4 years ago

Apologies Drew, I spent so long just looking at the templates I have, I forgot there is an actual section.html — whereas I was thinking my listing was the section template — with an image field, which is the duplicate ID. Thank you for your patients, that was dim on my part.