[Andrew SParticipant]

Hi, my website is going to be very simple – a front page that has thumbnails of all the photos that link to articles about how that photo was made.

The other page will be the usual Blog page.

So, the front page needs to be a Portfolio page, so it doesn’t display any other posts.

I started constructing the site with just the Blog page as the front page (before I realised that this Blog page will later show EVERYTHING, once I start posting other stuff). I got the post content looking PERFECT. But now I’ve started trying to replicate that in the Portfolio, it’s not quite working out.

The Portfolio page itself I think is ok, but the problem is that the Featured Image displayed at the start of the ‘item’ is not big enough:

http://www.howimadethisphoto.com/portfolio-item/machapuchre/

I want it look like this:
http://www.howimadethisphoto.com/machapuchre/

How can I achieve this?

[RadModerator]

Hi Andrew,

Thank you for posting in!

You could just add this css at your customizer’s custom css.

.single-x-portfolio .entry-extra {
display:none;
}
.single-x-portfolio .entry-info {
width: 100% !important;
float: none !important;
}
.size-full {
width: 100%;
}

Cheers!

[Andrew SParticipant]

That worked great!

More questions, if I may!:

1. How do I change the heading of the Portfolio page from ‘Portfolio’ (at present), to something else, OR make it disappear completely. I want it to say either ‘Photos’, or be invisible completely, so the page will just be filled with photos.

2. How do I get rid of the ‘Sort Portfolio’ button?

3. How would I make the Portfolio page order the portfolio items in a different random order each time you visit the page?

Here’s the link to that page:
http://www.howimadethisphoto.com/

4. How would I make some sort of title at the top saying, “Click on a photo to see how it was made!”?

5. Now that the photo is full-width in the portfolio item’s page, the Sharing buttons have disappeared. What can I do about this?
Link to that page: http://www.howimadethisphoto.com/portfolio-item/machapuchre/

Would be awesome if you got through all that! Thanks in advance!

[SupportMember]

Hey Andrew,

Glad it worked.. as per your questions.

1. The Page title will be used. Change the page title to “Photos”. Or if you want to hide it put this CSS code to your Custom CSS (Customizer > Custom > CSS)

.x-header-landmark { 
  display: none; 
}

2. To set a page as a Portfolio page, you will need to select the Page template “Layout – Portfolio”, once that is selected, a new metabox for Portfolio page will appear just below the Edit page: screenshot here. In that new metabox an option “Disable filtering” will appear, and you need to check that.

3. You will need to edit the theme codes using a Child Theme. If you haven’t read about child themes and how to set it up please check here.
The file you need to copy to your child theme and edit is (wp-content/themes/x/framework/views/global/_portfolio.php)
From line 31 to 52:

if ( count( $filters ) == 1 && in_array( 'All Categories', $filters ) ) {
  $args = array(
    'post_type'      => 'x-portfolio',
    'posts_per_page' => $count,
    'paged'          => $paged
  );
} else {
  $args = array(
    'post_type'      => 'x-portfolio',
    'posts_per_page' => $count,
    'paged'          => $paged,
    'tax_query'      => array(
      array(
        'taxonomy' => 'portfolio-category',
        'field'    => 'id',
        'terms'    => $filters
      )
    )
  );

Change this to:

if ( count( $filters ) == 1 && in_array( 'All Categories', $filters ) ) {
  $args = array(
    'post_type'      => 'x-portfolio',
    'posts_per_page' => $count,
    'paged'          => $paged,
    'orderby'        => 'rand', //this will load the items in random
  );
} else {
  $args = array(
    'post_type'      => 'x-portfolio',
    'posts_per_page' => $count,
    'paged'          => $paged,
    'orderby'        => 'rand', //this will load the items in random
    'tax_query'      => array(
      array(
        'taxonomy' => 'portfolio-category',
        'field'    => 'id',
        'terms'    => $filters
      )
    )
  );

4. On the same file, Add this Line of code:

<p style="text-align: center;">
  Click on a photo to see how it was made!
</p>

Just above this line of code:

<div id="x-iso-container" class="x-iso-container x-iso-container-portfolio cols-<?php echo $cols; ?>">

5. Please check if you have checked this options at Customizer > Portfolio > Sharing.

Cheers!

[Andrew SParticipant]

1. SORTED, thankyou!
2. SORTED, thankyou!

3. I find this kind of thing really confusing – where do I find that file and how do I edit it? “The file you need to copy to your child theme and edit is (wp-content/themes/x/framework/views/global/_portfolio.php)”

4. (As above)

5. Yes, I have ‘Enable Facebook Sharing Link’ and ‘Enable Twitter Sharing Link’ both checked in the Customizer.

(I set the Child Theme up as soon as I started using this theme, so no worries there).

6. NEW QUESTION! (Sorry) On the main page: http://www.howimadethisphoto.com/ is it possible to make the box surrounding the word ‘Machapuchre’ (immediately below the photo) a bit narrower? i.e. smaller in height?

7. Is it possible to get control over that text, to make it say ‘Machapuchre’ in normal size letters, then ‘by Andrew Stelmach’ in smaller letters underneath?

(Seems like a big ask to me!)

8. How do I figure all this kind of stuff out for myself?

[SupportMember]

Hey Andrew,

3 and 4. As you already have a child theme set up, you just need to copy this file: wp-content/themes/x/framework/views/global/_portfolio.php to wp-content/themes/x-child-integrity-dark/framework/views/global/ folder and add the piece of code that we gave you.

5. To have the share block, replace the following code we gave with the one following it:

 /* Replace this part */
.single-x-portfolio .entry-extra { 
display:none;
}

/* With this one */
.single-x-portfolio .h-extra,
.single-x-portfolio .x-ul-icons {  
display:none;
}

6. Add the following code snippet to the ‘Customizer > Custom > CSS’

.x-iso-container-portfolio .entry-wrap{
  padding: 14px 6.5% 20px; /* Adjust the first value(14px the top space) and the last one(20px the bottom space) to your needs. */
}

7. This won’t come bundled with X, it would involve you to add a custom field to each of your portfolio items, but if you want that let us know we will help you with this.

8. Css stuff are easy to find, for example on chrome browser you can open developer tools(command+i on a mac, control+i on a PC) and look at the source code and you can even play with it, then the php stuff, well i guess open a copy of your theme in a text editor, read the wordpress codex and experiement 😉

Hope this helps, cheers.

[Andrew SParticipant]

Thanks for all your help – I’m yet to implement all the above changes (I’ll let you know as soon as I do), but I’ve found another problem:

The shortcode you gave me to make the photos within the portfolio posts full width worked great. Problem is, I’ve just uploaded a portrait-style shot and the image is too big (because it’s been stretched out to fill the width of the screen).
http://www.howimadethisphoto.com/portfolio-item/cambodian-girl/

I’ve played around with the shortcode and also inspected the html in the browser for the landscape-format images and I’m concerned that these images, rather than just displaying at 100% of their uploaded dimensions (which were 650 pixels wide) seem to be (to me) displayed at 686 pixels wide.

What I really need is a piece of shortcode I can use in place of what you gave me before that, rather than ensures the photos are displayed at ‘100% width’, are instead displayed at 100% of their original uploaded dimensions.

I can then control the size of the images by uploading them with the desired pixel dimensions. I’ll then be ensuring that the images are being displayed at optimum quality i.e. not stretched.

Would they still scale correctly though when used on smaller devices?

Basically, I need the images to never be stretched, but it’s ok for them to be ‘squished’ if the screen isn’t big enough i.e. on mobile device.

[Andrew SParticipant]

Bit of a problem with the ‘Click on a photo to see how it was made!’ – it appears at the bottom of the page, but I’d like it to appear at the top. Here’s the full _portfolio.php code (it took me a while to work out that I have to copy the file and edit it through my FTP program, that was my problem!):

<?php

// =============================================================================
// VIEWS/GLOBAL/_PORTFOLIO.PHP
// —————————————————————————–
// Includes the portfolio output.
// =============================================================================

$stack = x_get_stack();
$entry_id = get_the_ID();
$paged = ( get_query_var( ‘paged’ ) ) ? get_query_var( ‘paged’ ) : 1;
$cols = get_post_meta( $entry_id, ‘_x_portfolio_columns’, true );
$count = get_post_meta( $entry_id, ‘_x_portfolio_posts_per_page’, true );
$filters = get_post_meta( $entry_id, ‘_x_portfolio_category_filters’, true );

switch ( $cols ) {
case ‘One’ : $cols = 1; break;
case ‘Two’ : $cols = 2; break;
case ‘Three’ : $cols = 3; break;
case ‘Four’ : $cols = 4; break;
}

?>

<?php x_get_view( ‘global’, ‘_script’, ‘isotope-portfolio’ ); ?>

<div id=”x-iso-container” class=”x-iso-container x-iso-container-portfolio cols-<?php echo $cols; ?>”>

<?php

if ( count( $filters ) == 1 && in_array( ‘All Categories’, $filters ) ) {

$args = array(
‘post_type’ => ‘x-portfolio’,
‘posts_per_page’ => $count,
‘paged’ => $paged,
‘orderby’ => ‘rand’,
);

} else {

$args = array(
‘post_type’ => ‘x-portfolio’,
‘posts_per_page’ => $count,
‘paged’ => $paged,
‘orderby’ => ‘rand’,
‘tax_query’ => array(
array(
‘taxonomy’ => ‘portfolio-category’,
‘field’ => ‘id’,
‘terms’ => $filters
)
)
);

}

$wp_query = new WP_Query( $args );

?>

<?php if ( $wp_query->have_posts() ) : ?>
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php if ( $stack != ‘ethos’ ) : ?>
<?php x_get_view( $stack, ‘content’, ‘portfolio’ ); ?>
<?php else : ?>
<?php x_ethos_entry_cover( ‘main-content’ ); ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

</div>

<?php pagenavi(); ?>
<?php wp_reset_query(); ?>

<div id=”x-iso-container” class=”x-iso-container x-iso-container-portfolio cols-<?php echo $cols; ?>”>
<p style=”text-align: center;”>
Click on a photo to see how it was made!
</p>

[Andrew SParticipant]

Thought I’d recap, before things get too confusing:

Original problem (photos’ width in the portfolio posts):

Landscape format photos work great now, but portrait-style photos are too big, because they are being forced to be stretched to full width:
http://www.howimadethisphoto.com/portfolio-item/cambodian-girl/

– I’m concerned that even the landscape-style photos are being stretched. I uploaded them as 620 pixels in height (definitely), but my Inspector says it’s 642 (I think, according to my inexperienced analysis).

– I’m not sure how best to approach this problem. Maybe it’s best to have a shortcode for each upload? One for landscape format ones, and one for portrait-format ones? Maybe it would be best to have a shortcode for each upload, forcing them to be displayed at the same dimensions they were uploaded at? But then would they scale DOWN when being viewed on smaller browser windows and mobile devices? (which is a pretty awesome feature at the moment).

1. SORTED THANKYOU
2. SORTED THANKYOU
3. SORTED THANKYOU
4. ‘Click on a photo to see how it was made!’ IS on the portfolio page, but it’s at the bottom.

– How do I make it sit at the top?
– How do I change the colour of that text?
– How do I change the size of that text?

http://www.howimadethisphoto.com/

The _portfolio.php code is shown above in my previous post for you to see.

5. Partially sorted! The sharing buttons are back, but it’s at the bottom of the page.

– Is it possible to make sit under the photo, aligned to the right, level with ‘by Andrew Stelmach…’ ?
http://www.howimadethisphoto.com/portfolio-item/machapuchre/

– Could I also have the sharing buttons appear on the Portfolio page, fixed at the top, aligned to the right, so it’s always there while you scroll down?
http://www.howimadethisphoto.com/

6. SORTED THANKYOU

7. Not a big issue at the moment actually – it’s looking pretty good.

[RadModerator]

Hi Andrew,

1. For smaller images.

Try adding this css at your customizer’s custom css.

@media (min-width: 768px) {
.size-small {
width: 40%;
}
.size-medium {
width: 70%;
}
}

Then edit your content at TEXT mode and find that image code and replace size-full with size-small or size-medium.

Eg. <img class="aligncenter size-small wp-image-95" src="http://i0.wp.com/www.howimadethisphoto.com/wp-content/uploads/2014/06/DSC_8248-Web1.jpg?resize=415%2C620" alt="Cambodian Girl" width="882" height="1317">

You have to do this to any image you wish to be small or not full width.

About “Click on a photo to see how it was made!”, add it after the code <?php x_get_view( 'global', '_script', 'isotope-portfolio' ); ?> . Then you may add class wrapper on it so you could easily control its font styling,

Eg.

<p style="click_caption">
Click on a photo to see how it was made!
</p>

Then at your custom css.

.click_caption {
text-align: center;
font-size: 25px;
color: #ffffff;
}

Your sharing buttons were on right, I think you figured it out :). And to add a duplicate of your social sharing on top, then follow these :

1. Get a copy of this file /x/framework/views/integrity/content-portfolio.php to your child theme.
2. Edit your new content-portfolio.php and find this code :

<div class="entry-info">
        <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </div>

And replace it with :

<div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </div>
<div class="entry-info">
        <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </div>

3. Save and upload.

Cheers!

[Andrew SParticipant]

I’m trying to make the images display at 100% optimum quality the whole time.

This means that whenever the images are displayed, on whatever device, the
PIXEL LENGTH OF EITHER SIDE CANNOT EXCEED ITS ORIGINAL VALUE.

If you could make a rule for that, it would be wonderful. It’s a bit of headache, I’ve tried all kinds of things with the CSS in the customizer, but there’s always something lacking in the functionality, or images get distorted in mobile.

[RadModerator]

Hi Andrew,

Do you mean, if picture is larger than its container is should be 100% width, and if it’s smaller than container is should use original width? For that, you don’t need to use size-full, size-medium, size-small. You will have to remove them as wordpres insert them automatically.

Then let the responsive layout decide. It will resize your image to fit in the container if it’s larger, or it will let your image as is if it’s smaller.

Let me know.

[Andrew SParticipant]

I think I’ve cracked it. I brainstormed it with my brother (who’s a web designer! Handy 🙂 ).

We looked up the most common size of monitor in use globally. Luckily, turns out it’s my size!

Firstly, adjusted the ‘site max width(px)’ in the x-customiser to be as wide as possible, BUT NO WIDER THAN THAT. This seemed to be 1073px. I subtracted 3 px and left it at that.

I then used the Inspector to see how wide an image is at full width when the site is set to be 1070px. This is 950px.

Therefore:

I now have two different workflows for the images, depending on whether they are Landscape format, or Portrait format.

Landscape format: the image is uploaded to WordPress at 950px wide and uploaded into the portfolio item as full-size. And that’s it – the image displays at precisely 950px wide in the browser, it’s impossible for the site and the image to be stretched wider on a wider screen, and it scales-down and rotates no problem on smaller screens/mobiles/tablets.

Portrait format: the image is uploaded to WordPress at 636px height and uploaded into the portfolio item as full-size. I then change its size in the TXT to ‘size-small’.

It then displays at precisely 636px height and everything works fine. I think the code MAY be a bit of a mess now, BUT it does work properly, which is the main thing, and I have control over the images.

Maybe the CSS customiser code needs tidying up a bit, maybe not. I’ve lost track of all the changes, so I don’t really want to tinker with it. However, I’ve pasted it below for you anyway. You’ll notice that I’ve changed this part of the code: @media (min-width: 768px) {
.size-small {
height: 100%;

(that last line used to read something different: “width: 70%” I think.) When I change this part of the code, or disable it completely, nothing seems to change, but I leave it at this just in case anyway.

Complete X Customiser CSS box:

.single-post .has-post-thumbnail .entry-featured {
display: none;
}

.single-x-portfolio .has-post-thumbnail .entry-featured {
display: none;
}

.single-x-portfolio .h-extra,
.single-x-portfolio .x-ul-icons {
display:none;
}

.single-x-portfolio .entry-info {
width: 100% !important;
float: none !important;
}

.size-full {
width: 100%;
}

.x-header-landmark {
display: none;
}

.x-iso-container-portfolio .entry-wrap {
padding: 2px 6.5% 10px;
/* Adjust the first value(14px the top space) and the last one(20px the bottom space) to your needs. */
display: none;
}

@media (min-width: 768px) {
.size-small {
height: 100%;
}
/.size-medium {
width: 70%;/
}

.entry-header {
text-align: center;
font-size: 100%;
}

.entry-header a {
text-align: center;
font-size: 80%;
}

/.x-sidebar {
width: 20%;
}/

[Andrew SParticipant]

When you say: “1. Get a copy of this file /x/framework/views/integrity/content-portfolio.php to your child theme.
2. Edit your new content-portfolio.php and find this code :”

What do you mean by ‘get a copy of this file… to your child theme?’. Where do I find this file and what do I do with a copy of it?

Also, I have a blog page now and the sharing buttons aren’t displaying in blog posts, nor on the blog page. Could you help me with this?

[Andrew SParticipant]

PS I’ve tried a few things, such as making sure the the sharing buttons are set to display both in the WP modules and in the theme’s customiser, but still nothing.

Strange, because I thought the previous changes only really affected the Portfolio.

[Author]

Posts