• Ok trying to get the link changed on one of the thumbnails appearing on the home page project section. Tried to add a link (url) to featured image itself but did not work. Is there css to do this? Check it out here The thumbnail labeled Pics need to link to the Media page and not its own single project page.

    For the single project pages how to remove sidebars, what is the css to change those pages to customize them? Like removing the ‘more projects’ area completely; making page full width; etc.

    Thank you!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Hi @izzyiz,

    The thumbnail labeled Pics need to link to the Media page and not its own single project page.

    It is possible to change the link but, to do, you need to make changes to your site’s underlying HTML.

    From past threads, I know you’ve completed the first step required, which is to set up a child theme. Great!

    The next step is to copy the parent’s content-portfoliofront.php file to your child theme’s directory and then open it in your favourite text/code editor.

    Locate the following code in that file:

    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php harmonic_post_thumbnail(); ?></a>

    The above code output the portfolio item’s thumbnail and surrounds it with a link to the portfolio item itself. To instead link to the thumbnail’s individual page, replace the_permalink(); with the_post_thumbnail_url();. Like so:

    <a href="<?php the_post_thumbnail_url(); ?>" title="<?php the_title_attribute(); ?>"><?php harmonic_post_thumbnail(); ?></a>

    For the single project pages how to remove sidebars, what is the css to change those pages to customize them?

    The specific CSS or steps you need to take depends on how exactly you’re looking to customise that page. For larger layout changes, you may wish to edit the content-portfolio-single.php file via your child theme.

    Like removing the ‘more projects’ area completely; making page full width; etc.

    You could hide the “more projects” area with the following custom CSS:

    .navigation.project-navigation {
        display: none;
    }

    There isn’t any sidebar, by default, on individual portfolio pages. If you’re referring to the meta information that appears to the left hand of the content on those pages, then that can be hidden with the following snippet, which will also bring the main content to 100% width:

    @media only screen and (min-width: 40.063em) {
        .single-jetpack-portfolio .entry-meta {
            display: none;
        }
    
        .entry-main {
            width: 100%;
        }
    }

    Hope that’s helpful!

    Thread Starter izzyiz

    (@izzyiz)

    Thanks Siobhan!

    Removing the “more projects” code and information worked perfectly. However, the information for linking did not do what I wanted. It did work for what you described! But here is what Im trying to get at…
    I want to link only ONE thumbnail(projects thumbnail) to my media/gallery page, not to its own thumbnails page. Changing the file linked each projects thumbnail to its own thumbnail page. Its left like that now so you can have a look. But, there is a thumbnail labeled “Pics”, I want only that one to link to the media/gallery page on the menu.
    Tried to link the entire page (pics project page)to the media/gallery page using Yoast SEO canonical link but that did not work either.

    Hope this explains it better…

    Iz

    Hi @izzyiz,

    Thank you for the clarification and apologies for my initial misunderstanding.

    To make sure I’m understanding correctly this time round: Are you trying to link the portfolio item that’s labelled “Pics” on your home page to https://vizionsus.com/media?

    Editing the link in content-portfoliofront.php will change the link for all three of the portfolio items on your home page. There isn’t a way to edit that file so that only one of the items links to another page.

    Instead of editing an existing portfolio item, you could add HTML for the “Pics” image alongside them. This HTML would need to be added (via your child theme) to content-front-portfolio.php.

    More specifically, it would be added just before the page content ends in that file:

    </div><!-- .page-content -->

    If you’ve never used HTML to create images/links before then the following guides are good starting points:

    Hope that helps guide you in the right direction!

    Thread Starter izzyiz

    (@izzyiz)

    Thank you Siobhan!

    Yes, you got it that’s what I want to do.
    Found the HTML code…easy enough but it did not work! Here is the code used:



    After looking at several resources the code seems to be on point, so maybe there is something in the theme that should come out?

    Any other suggestions?

    IZ

    Hi @izzyiz,

    Can you save the changes you made to your child theme so that I can view the HTML on your actual site? That will give me a better idea of what is/isn’t working.

    Thanks!

    Thread Starter izzyiz

    (@izzyiz)

    yeah, all saved…

    Thank you for sharing! Could you try moving the code for your images so that it appears just above the following in your child theme’s content-front-portfolio.php file?

    </div><!-- #archive-container .portfolio-projects .clear -->

    Let me know how that goes!

    Thread Starter izzyiz

    (@izzyiz)

    Not so good. Moved the code but it did not redirect. The only change seems to be a question mark
    placed on the home page at the “Pics” thumbnail. Left as is for your view.

    Hi @izzyiz,

    I can see that you’ve included the following URL in your HTML, which isn’t currently leading anywhere:

    /images/old-camera-1.png

    The above URL needs to be replaced with the correct URL for the image you wish to display.

    To get the correct URL: Navigate to Media > Library in your admin area and select the image you wish to use. You’ll find a URL field in the resulting window, which you can copy/paste.

    Thread Starter izzyiz

    (@izzyiz)

    Thanks for pointing that out! Changed the URL. No changes occurred – still getting the portfolio page when clicking the “Pics” thumbnail. Has not redirected to the media page.

    Hi @izzyiz,

    I’m being redirected to a “page not found error” when attempting to visit the updated URL:

    https://vizionsus.com/wp-content/uploads/2016/09/old-camera-1.png/

    Can you please double check that the URL is correct? You should be able to see the standalone image when visiting the URL in your browser.

    Thread Starter izzyiz

    (@izzyiz)

    Thanks Siobhan,

    Remember Im trying to get the “Pics”image on the home page, in the Portfolio section, to redirect to the Media/Gallery page not to an image and not to the portfolio project page. When I click on the “Pics” image on home page it still goes to the project Portfolio page and not the Media page. I do not get the “page not found error” as you do. The small question mark still shows on home page too

    In the HTML i placed the link code of media page and the url of the pics image where you instructed above.

    IZ

    Hi @izzyiz,

    I’m currently seeing the following code on my end:

    <a href="https://vizionsus.com/portfolio/pics/" title="">
    	<div class="post-thumbnail">
    		<img width="480" height="480" src="https://vizionsus.com/wp-content/uploads/2016/09/old-camera-1.png/">	
    	</div>
    </a>

    In the above, https://vizionsus.com/portfolio/pics should be replaced with the link to your Media/Gallery Page.

    The second link needs to be a valid URL that leads to the image you wish to display. The current URL is leading to an error: https://vizionsus.com/wp-content/uploads/2016/09/old-camera-1.png

    Thread Starter izzyiz

    (@izzyiz)

    Hi Siobhan,

    Thank you so much for staying with me on this!

    We are obviously looking at two different things. Please confirm what file you are in; I’m in the content-front-portfolio.php file and there is nothing in it like the above you’ve posted. Also the url is correct, it does lead to the image. Even clicking on the one in your last response above goes to the image.

    Ive checked both the primary & child files in my FTP and also the theme editor and I do not see what you are seeing at any location within. Of course I’m in the content-front-portfolio.php files. Did we change at any point?

    Hi @izzyiz,

    The code I included in my last reply is what’s output by your browser and will differ slightly to the code that you see “behind the scenes” in the theme’s files.

    Ah, I found the trouble here! The extra forward slash at the end of the image in your code is causing the error.

    You’ll see that the following doesn’t lead you to the image:

    https://vizionsus.com/wp-content/uploads/2016/09/old-camera-1.png/

    But this link does:

    https://vizionsus.com/wp-content/uploads/2016/09/old-camera-1.png

    Can you please remove that forward slash from the end of the URL in your code?

    You’ll also need to add a width and height to the image:

    <img src="https://vizionsus.com/wp-content/uploads/2016/09/old-camera-1.png" scale="0" width="480" height="480">

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Project section & Project single pages’ is closed to new replies.