[Resolved] Custom template layout strategy for custom post types question

[Brad]

Can one design layouts using generate blocks pro with elements somehow or do you suggest old school method (duplicate single . php) then code the page? Any other more eloquent solutions? Do you have a template creation tutorial link by chance on cpt / acf layout using elements?

Generate Blocks Pro:
Still learn. I’ve been testing Elements – add new Block – “Content Template” but can’t seem to get a float left responsive layout using the dynamic image / dynamic content features. I can get a flexbox container grid responsive layout though which using blocks makes sense.

I haven’t had a chance to try bringing in ” dynamic content” being an acf term yet. That’s next on my list. I got cpt term meta to work though.

Old school method:
duplicate single . php
Place file in child theme.
Rename it single-custompostname . php
Code the page

Brainstorm..
Element – new block element – container – grid 50 / 50.
Put acf shortcode in one of the grid boxes???
I haven’t tried this yet to see if it would work.

The problem I’m having in general with layout is getting any kind of responsive look beyond basic grid boxes. It’s just two containers whereas in one case I was trying to have an image on the left (dynamic feature image) and dynamic txt content wrap around the image based on browser (responsive.. image float left.)

Using acf id like to add a second image option, maybe a repeater, with a corresponding txt area.

Anyways. Any ideas? Thanks in advance for input.

[Elvin]

Hi Brad,

I’m not sure what exactly you wish to achieve for the layout to be sure if what you want can be done fully on Block Element – Content Template only or if you actually need a child theme template as you’ve mentioned.

But if it’s all a matter of layout and/or styling then I think Block Element – Content Template w/ a few custom CSS should be enough.

The problem I’m having in general with layout is getting any kind of responsive look beyond basic grid boxes. It’s just two containers whereas in one case I was trying to have an image on the left (dynamic feature image) and dynamic txt content wrap around the image based on browser (responsive.. image float left.)

Here’s what I’d do:

I’d create the main container first using a GB Container block w/ a class non-flex and then add this CSS:

.non-flex > .gb-inside-container { display: block !important; }

This is to ensure that float property works. (Float doesn’t work on flexbox)

I then place the elements as siblings inside this non-flex container. (make sure the sibling elements are not wrapped in container blocks. or atleast the paragraph blocks so it wraps around the floated element.)

For the dynamic featured image:

I’ll place the dynamic featured image inside a container block with a float-left on it’s additional CSS class(es) field.

I then add this custom CSS:

.float-left { float: left; }

This way, the sibling text elements of the container block with float-left will wrap around it. 😀

[Brad]

Cool thanks. I’ll give it a try.

[Elvin]

No problem. Let us know how it goes. 😀

[Brad]

Ok. Not having any luck. Created screenshots.

https://www.dropbox.com/s/tmld35jnlss7322/IMG_7460.jpg?dl=0

https://www.dropbox.com/s/r970xyyw18qf6ur/IMG_7461.jpg?dl=0

_________________________

Trying to basically above apply this to one cpt post named Summer Days. Basically it’s a featured imaged dynamically loaded on the left with dynamically loaded text loaded next to it. I’d like the text to run down the side of the image and then wrap under.

[Brad]

Please read this GP thread post. This is what I’m really trying to do in conjunction with layout responsiveness. Unfortunately the post wasn’t really answered.

https://generatepress.com/forums/topic/acf-block-in-dynamic-template-for-cpt/

[Tom]

Hey Brad,

Any chance you can link us to the page using this Content Template so we can check the CSS?

What if you simply added a Featured Image block to the content and set it to Align Left?

[Brad]

Hi Tom,

Happy New Year! Thanks for the reply. Here’s the link.

Link to staging site removed

On iphone now. Will try your suggestion when on desktop

[Tom]

I think aligning the Featured Image block to the left is a better idea (if it’s possible). It will result in less HTML/CSS and should work automatically.

[Brad]

No. It didn’t work. I went ahead and tried creating a grid, float-left the dynamic content txt container after making it non-flex. It didn’t wrap.

Next I just stacked two featured images in the first grid container, align top (eventually I’ll try using advance custom fields to dynamically load different images) and in the next grid to the right stacked a title headline followed by post content. Same issue though. Can’t get post content to wrap (which makes sense because it’s a fexbox grid).

Any ideas?

https://www.dropbox.com/s/glzlei80xufovon/IMG_7464.jpg?dl=0

Here’s the link.

Link to staging site removed

[David]

Hi there,

try it without using grids.
Simply add the Featured Image block and set it to Align Left.
Then add the Content Block stacked below the featured image.

On the front end it should provide the result you require.

[Brad]

On iphone now. Put the above in a container?

Can I then duplicate and repeated with different content, let’s say an advance custom field dynamic image (instead of dynamic feature image) and ACF content?

Where I’m going here is do I put it in a container first?

Sincere thanks for sharing I insight.

[David]

Yeah it can be inside a Container if you need.

The simple rule is the Image and Content Block need to be inside the root of the same container.

[Brad]

No luck. I’ve created a specific post for this. PLEASE SEE the following:

Link to staging site removed

First Section
On top I’ve tried your suggestion; a container with the dynamic featured image. I made it 600px wide. I stacked the dynamic title, then dynamic content followed by dynamic taxonomy buttons I made. Unfortunately nothing wrapped to the top the came back down. Please see Dropbox pics

Second Section
The second section I set up as a grid which we know won’t work but it’s there.

Third Section
Advanced Custom Fields that I finally got working with the assistance of other in the FB GeneratePress group. No styling yet but at least I got the ACF image repeater working. I couldn’t figure out a way to get Elements to pull in the ACF dynamic image or dynamic content text area field.

On the roadmap (a different issue):
How to style all this. Someone in the group mentioned creating a shortcode and then dropping the shortcode into a grid shortcode block. Interesting solution. Anyways. That’s a future post problem.

Any ideas on how to get this fluid wrap image to the block upper left, text body to follow and wrap work?

Sincere thanks for your assistance.
Brad

Dropbox links

https://www.dropbox.com/s/whjg2c1f3r7zcaj/IMG_7472.jpg?dl=0

https://www.dropbox.com/s/azd9b8z5nzw0q4d/IMG_7473.jpg?dl=0

[David]

Try adding this CSS:

@media(min-width: 769px) {
    .single .dynamic-featured-image {
        float: left;
        margin-right: 20px;
    }
}

This should apply to the first section your created ie. the one with the GP Dynamic featured image.

I am not sure if you’re using the dynamic featured image for other posts that have a different layout. If so then we may want to add a CSS class to the parent container and use that in the images styles…. let me know

[Author]

Posts