[DiaghilevParticipant]

Hi,

I have set up a Portfolio page of 20 images ( by Category) in 5 rows of 4 images. The whole image “array” is pleasingly responsive (i.e. a row of 4 becomes 3 becomes 2 etc.)

I would like to transfer this whole Portfolio “array” from its own page to a Cornerstone section on my Home page.

However, when I use the Recent Posts element in a Cornerstone section and display Portfolio post types (by Category), I can only get 4 images (or “posts”) to display.

How can I display multiple images or “posts” in a responsive 4 x 5 Portfolio “array” in a Cornerstone Section so that it looks the same or similar to my Portfolio page?

Thanks,

D

[NicoModerator]

Hi D,

Thanks for writing in.

You can check this link below to show more than 4 recents post or portfolion.

https://community.theme.co//forums/topic/display-more-than-4-portfolio-items-with-recent-posts-shortcode/#post-245762

Let us know how it goes.

Thanks.

[DiaghilevParticipant]

Thank you for your reply.

I tried using multiple instances of the “Recent Posts” element in Cornerstone adding an incremental “Offset” of 4 each time (there are 20 images in my Recent Posts).

The initial wide desktop display (of 4 images in 5 rows) looks promising, but the responsiveness is TOTALLY screwed up – becoming alternating rows of 3 images then 1 image before collapsing (inexplicably) to a column of single images.

Portfolio does this SO much better!

Is there NO way to use Portfolio DIRECTLY in Cornerstone?

If not – why not please?

Kind regards,

Diaghilev

[FriechModerator]

Hi Diaghilev,

Would you mind providing us the site URL so we can take a closer look of the issue? Portfolio index page can’t be edited with Cornerstone because it is using an special template (Layout – Portfolio) which is specific template for portfolio index pages. However, it could be modify, but I’m afraid that would require custom development an fall outside of support we can offer.

Thanks!

[DiaghilevParticipant]

Hi “Staff” 🙂

I have given up trying to use the Recent Posts element to emulate a Portfolio layout within Cornerstone for the following reasons:

A) The responsiveness of the Recent Posts element is bizarre and would need some hacking with @media to make a row of 4 images become a row of 3, then 2, then 1 as the window shrinks. I would expect this to happen as standard .. but no – go figure.

B) I like the image-shuffling animation in Portfolio which occurs when the window is re-sized; and the responsiveness is sensibly 4 to 3 to 2 to 1 – as it should be.

Accordingly, I have modified a Portfolio Layout page by adding a full width content “Section” at the top using the following code:

<?php

// =============================================================================
// VIEWS/RENEW/TEMPLATE-LAYOUT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio page output for Renew.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">
    
    	<?php while ( have_posts() ) : the_post(); ?>
			<?php x_get_view( 'renew', 'content', 'page' ); ?>
		<?php endwhile; ?>

      <?php x_get_view( 'global', '_portfolio' ); ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

Put the php file here:
x child theme | framework | views | renew | template-layout-portfolio.php

Add negative CSS margins left, top and right to achieve the look of a full-width “section” and remove the Portfolio ( my page-id-8) header with css:

.page-id-8 .x-header-landmark {display:none;}

.page-id-8 .entry-wrap {padding:0 31%; margin-bottom: 3.5em; margin-top:-7.0em;}

.page-id-8 #post-8 {margin:0 -100%;}

So far it looks good.

———————————–

I have one more question for Staff though:

How would I add an additional content “section” below the Portfolio part of the page (pre-footer)?

Thanks,

Diaghilev

[ChristopherModerator]

Hi there,

#1 Yes, this part needs media query rules.

#2 If you want the same transition in portfolio page for recent posts it requires custom development which is outside the scope of our support.

To add content in portfolio template, change your code to :

<?php

// =============================================================================
// VIEWS/RENEW/TEMPLATE-LAYOUT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio page output for Renew.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">
    
    	<?php while ( have_posts() ) : the_post(); ?>
			<?php x_get_view( 'renew', 'content', 'page' ); ?>
		<?php endwhile; ?>

      <?php x_get_view( 'global', '_portfolio' ); ?>
     <?php echo do_shortcode('[x_gap]'); ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

Instead of [x_gap] put your shortcode.

Hope it helps.

[DiaghilevParticipant]

Hi . . that works 🙂

Thanks for your very helpful support!

I’m guessing that any shortcodes added to a php file can, thereafter, only be edited via the php file and are not accessible for editing by any other means such as through the WordPress Page editor or Cornerstone?

This being so, I imagine the shortcode should first be set up on a dummy WordPress page, styled and populated with content, and then the whole lot copied into the shortcode position (mentioned above) in the php file. The dummy page can then be drafted and kept as a “staging” editor for the shortcode?

Thanks,

Diaghilev

[NicoModerator]

Hi There,

Glad that it helped you.

Yes shortcodes added to a php file, specifically in cornerstone plugin. and it it not accesible in any wordpress page editor or cornerstone. To modify the shortcode you must edit the shortcode script on the cornerstone plugin.

Yes shortcode could be added on a dummy template then populated with content. The template or the dummy page can be drafted and kept as a staging page.

For more information about customization, https://community.theme.co//kb/customization-best-practices/

Hope that helps.

Thanks.

[Author]

Posts