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

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

Home Forums Support Custom template layout strategy for custom post types question

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #2063492
    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.

    #2063516
    Elvin
    Staff
    Customer Support

    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. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #2063520
    Brad

    Cool thanks. I’ll give it a try.

    #2063532
    Elvin
    Staff
    Customer Support

    No problem. Let us know how it goes. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #2064384
    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.

    #2064701
    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/

    #2065360
    Tom
    Lead Developer
    Lead Developer

    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?

    #2065986
    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

    #2066974
    Tom
    Lead Developer
    Lead Developer

    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.

    #2067076
    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

    #2067387
    David
    Staff
    Customer Support

    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.

    #2067405
    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.

    #2067432
    David
    Staff
    Customer Support

    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.

    #2070560
    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

    #2070966
    David
    Staff
    Customer Support

    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

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.