Forum

Thread tagged as: Question, Problem, Error

Perch p Tags - I feel like an idiot :)

I don't know if it's that I'm ill, exhausted, or mental.

I just purchased Perch & can't seem to make sense of any of this. I'm fluent in JS, CSS, and HTML & a proper moron when it comes to this for some reason.

I'm only testing the waters as of now to figure out the structure, and replacing text that is not within <p> </p> tags still results in a visible <p></p> tag on the site.

For example, I'm replacing slider text. Simple enough... I thought :-/

<img src="https://placehold.it/1920x1080" alt="">        

<div class="caption very_big_white lfl stl very_large_text uppercase"  
     data-x="10" 
     data-y="350" 
     data-speed="300" 
     data-start="600" 
     data-easing="easeOutExpo">Welcome We Are</div>

That is what I start with.

This is what I change it to:

<img src="https://placehold.it/1920x1080" alt="">        

<div class="caption very_big_white lfl stl very_large_text uppercase"  
     data-x="10" 
     data-y="350" 
     data-speed="300" 
     data-start="600" 
     data-easing="easeOutExpo"><?php perch_content('Slide 1 Text'); ?>
</div>

Now, once I go to the admin/cms page, I can see Slide 1 text, and region & so on. My problem is that when I select region option of anything, I still get these funky <p></p> tags.

Could someone please let me know what's wrong behind the above logic & provide an example ... or a few to get me back on the right track.

Cheers!

B A

B A 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

It depends on the what the template you're using for Slide 1 Text does. If it's using Markdown, for example, that will wrap text in paragraph tags.

Can you show us your template?

B A

B A 0 points

I haven't a clue how to make a template yet. I'm simply using examples from the instructional video to wrap my head around things.

This, though, does work :)

<h1 class="big_title"><strong><?php perch_content('About Us Heading 1'); ?></strong></h1>

Surely every bit of text needn't be in some form of text tag i.e. h1, <p> , etc......So, what could I be doing for the slider?

And cheers for the quick reply!

**I would assume it is using markdown as it's throwing in the extra tags. How do I fix that? I'm not use to things automatically doing work for me :'(

Drew McLellan

Drew McLellan 2638 points
Perch Support

Which templates are you picking for the region? From the examples:

  • Text - plain text
  • Text Block - uses Markdown, and will output HTML with paragraphs
B A

B A 0 points

I tried them all for the slider...article, text, text block... just to test them out.

Still <p></p> tags in the slider.

However, I can use text in other areas when they're within text tags, and no problems at all.

I'd nearly kill for an extensive cheatsheet about now :)

Drew McLellan

Drew McLellan 2638 points
Perch Support

There's a cheat sheet here: https://quick.grabaperch.com

A good place to start might be the video tutorial: https://docs.grabaperch.com/video/

B A

B A 0 points

Unfortunately for me, I think I feel more lost after having watched the video.

I thought I grasped it quite well, and then after I did the same examples character for character, things went awry.

I appreciate the cheat sheet link. Hopefully, that will be all I need.

I do have an additional question along the same lines:

<div class="img-container-blog" style="background-image: url(https://placehold.it/500x500);">

Can you show me an example of how I would include an image if it's placed like so.

That should get the ball rolling :)

Cheers

Drew McLellan

Drew McLellan 2638 points
Perch Support

So in your template code:

<div class="img-container-blog" style="background-image: url(<perch:content type="image" id="image" label="Background image" />);">

You can set width, height, crop, sharpening, etc to get the image resized how you want it: https://docs.grabaperch.com/docs/templates/attributes/type/image/

B A

B A 0 points

I'm going to have one last go at it before I throw in the towel.

I'm trying to resize a different image (one in the slider), and this is the template I've created:

<img src="<perch:content id="image" type="image" label="Slider Image" width ="256" height="256" crop="true" />" alt="<perch:content id="alt" type="text" label="ImageTest" />"/>

This is the code I'm using to call it:

<?php perch_content('Slide Image'); ?>

It doesn't crop, but actually overscans it nearly 50x the size of the actual photo to the point where the browser stops responding each time it loads.

Is the template wrong? The way I'm attempting to call upon it?

I've watched each & every video & read all of the documentation at least twice, and I think this should be correct?

And, I've assigned it in the /perch/admin section as well once logged in.

B A

B A 0 points

I'm on a roll here...Everything is working for me, EXCEPT resizing the slider image.

It's gone absolutely mental. I'm beginning to believe it's growing when I'm in another tab!

However, I can resize other portions of the site without fault, and <p></p> I fixed by writing a new template because there were some CSS issues conflicts with my code.

Any ideas on the resize for the slider, though?

Rachel Andrew

Rachel Andrew 394 points
Perch Support

We don't ever upscale an image.

Have you looked in your resources folder to see what images are actually being created?

B A

B A 0 points

Depending on the image uploaded (why I do not know as I'm using the same template), 2 or 3 files are being created. All at 2 or 3 different dimensions.

I'm assuming 1 is the photo, and 1 is the thumbnail. Unsure about what the other one is.

However, none are resizing to the 1920x1080 I've specified.

My CSS is resizing them automatically, which I had forgotten I had done.

What I'm confused about is that I was under the impression from the Perch material that it would upload the image based on the dimensions I had inserted into the template? Likely I misheard.

Also, is there a batch way to delete assests/images? I work better on the backend than with an interface, so I had deleted them via FTP. However, when logging in, I manually had to delete the now empty images one-by-one.

Cheers

B A

B A 0 points

RESOLVED

-------------------->Ok, I seem to have everything working, except I noticed one problem & I don't see it in a few of your examples.

Must I place title="true" in every perch template tag?

For example <perch:content id="testing" type="text" label="Testing Madness" title="true" />

Because when I do not place title=true within any template perch:content line, it will appear in the admin page, but when I click save changes, it will not save the field.

Please do let me know if this must be standard practice each time, or if something is wrong?


I don't know if you want to leave this up, or make a new entry somewhere regarding this specific entry, but I found the error. The id=" " tags I were using were two words. Foolish! :D

If you use two words, it won't populate. Without spaces, it works quite well :)

Still curious on the batch delete, but I'm beginning to see the potential in Perch.

It's extremely different from the "flow" that I'm used to, but it's essentially an easier way to manage includes :D

Rachel Andrew

Rachel Andrew 394 points
Perch Support

No, you only use title="true" on fields you wish to be a title.

You need to show us your entire template if you want us to debug it.

As a recommendation I would suggest not deleting things added by Perch via FTP. Perch then has no way to know what you have done and you will just end up with broken assets on your site. You can delete images via the Assets Panel, or if they are not used in content they will clean up of their own accord after 24 hours.

B A

B A 0 points

I really appreciate both you & Drew coming to the rescue. After that ID fiasco, everything is back to running smooth again.

I design a lot with parallax html5 sites... So one main page, and if a blog or news site, multiple "entry pages".

With that said, all of the content that needs editing on one page makes the admin section look extremely unorganized.

I've been using the divider tag within regions, but is there a way to essentially do the same thing rather than seeing "main page"?

Or at least sort the admin page by name? :D

e.g. 1 page is listed, I click that, and then everything is listed there. I'd like to organize that or divide that similar to what you might see on an enrollment form where you have primary sections. 1. personal info 2. medical info 3. and so on

A link or search term would be great as divider is only pulling up how to divide within a region.

Cheers

Drew McLellan

Drew McLellan 2638 points
Perch Support

You can break your page up into multiple pseudo pages using PerchSystem::set_page()

https://docs.grabaperch.com/docs/developers/working-with-front-controllers/

B A

B A 0 points

Well done! Enthusiastic to say the least now!

I'm finding this to be a really nice/permanent solution.

Awkward learning curve for me, but once I got past the headache of it & viewed it more as an enchanced way of doing <?php include ...well, I couldn't be more thrilled!


Also, will this thread disappear after closed? I'd like to use it as a reference, should I get lost in the future :D

Drew McLellan

Drew McLellan 2638 points
Perch Support

No, it won't disappear.

Is there a new link for PerchSystem::set_page() that link has disappeared.