Sketch theme – Wrong font displaying on some pages
-
Hi all – doing some updates to my site after a long period of ‘otherwise engaged’ and noticed that the ‘paragraph’ font on one page is now different to the rest. I THINK it’s a new thing, but not sure if it happened while I was away or after I added some new content in the editor. Either way I can’t see any way to fix it…
The page is this one: https://2fsdesign.com/our-stuff/
which is based on the theme’s portfolio page and featured content. If you look at other pages body text is different (and consistent) throughout.
While at it, I notice there’s a media / sharing bar on this page and the blog (“News” page), but as neither shows up as a widget I don’t know how to access them, so any help there appreciated too.Thanks
David
The blog I need help with is: (visible only to logged in users)
-
Hi David, that page is using the Portfolio template, which is meant to look like this:
https://sketchdemo.wordpress.com/
as opposed to default pages on the site:
https://sketchdemo.wordpress.com/html-elements/Noting default pages can have featured images; this one just doesn’t.
So the text on the portfolio page is a bit smaller, and there’s no sidebar. Do you want to configure it that way, or would you rather show the portfolio in a more standard page?
If you need a standard page you can use something like this:
[portfolio display_types=true display_tags=false columns=3 showposts=6 orderby=title]Just note you’ll get different aspect ratios on your images, so you might want to crop them so they’re all the same if you’d prefer a grid like the portfolio template has.
-
Hi Supernovia – Thanks for reply. Yes, I did want the portfolio style page for “our stuff”, but with some text too, introducing the “stuff”! We’ve only just started so we haven’t really got enough content for a full portfolio yet. I’m pretty sure I could achieve the effect I want using CSS editor by changing the paragraph text on the portfolio page to match the rest (or by increasing the font size to 105% or something), but I don’t know the code that would apply it to the portfolio page rather than globally…
I’ve already noticed that portfolio images and featured images (in the slider above) have different ratios – is there any way I can tweak that? As it stands the best compromise I’ve thought of is to post judiciously cropped versions of portfolio pics as featured images in blogs (our “News” page), but that kind of defeats the object because the slider will then redirect to the blog rather than the featured range in the portfolio. What I would LIKE to do is have the square images below, as seen, and an edited version over which I have some control with cropping in the slider, with both linking to the same (portfolio) page. Is there any way I can do that, or set up a redirect on the blog page so it clicks straight through to the portfolio page from the slider image?I hope that all makes sense, and thanks for suggestions so far :D
-
Howdy –
but I don’t know the code that would apply it to the portfolio page rather than globally…
The Our Stuff page would use
page-id-73in the CSS if you want to limit things to that page.This is how I found that information:
1. Open the Our Stuff page in your browser
2. Right click
3. Selectinspectfrom the menu
4. A box will appear with the page CSS, look at the top of the list and you’ll see it listed in the<body class
= section.
I’ve already noticed that portfolio images and featured images (in the slider above) have different ratios – is there any way I can tweak that?
Use a photo editing software to make sure you are uploading the exact same dimensions for each image. This will regulate the sizes that you’re adding to the media library.
Is there any way I can do that, or set up a redirect on the blog page so it clicks straight through to the portfolio page from the slider image?
You’d like the images in the slider on the Home page to be linked directly to the portfolio page?
-
Hi lizkarkoski –
Thanks for reply.
1) I’ve been able to see the page-id-73 but I’ve still not been able to isolate the code for that section. If I increase the font size on ‘page content’ using CSS (which appears to refer to the ‘intro’ section with smaller font) it affects the whole page, increasing the size of the text above (menu, slider etc) too. I see other code (‘:: before <p>…<p/>’ etc) but adding this (various attempts) to CSS hasn’t had the desired effect… The only bit of text I want to resize – and the only bit that doesn’t match the rest of the pages – is the two paragraphs between “Our Stuff” (page header) and the sharing toolbar below the two paragraphs. This come up in inspector as ‘div class= page content’, but if I use that in CSS it affects all the other stuff too… (hope that makes sense)2) Yes, I have resized all my ‘featured images’ on portfolio pages to fit the square formatting that shows in the bottom section of the portfolio page. That’s fine, but what I was hoping to do was additionally feature ‘range’ images and links (our portfolio images link to individual card ranges) in the slider at the top. The problem is that featured images appearing in the slider are cropped accordingly, effectively ‘zoomed’ and cropped top and bottom, with no control over positioning of the cropped area. So what I’m asking is if there is a way to have a different – aspect ratio compatible – ‘featured image’ in the slider that directs to the relevant portfolio page (?) One way I thought of doing this is to have regular pages (hidden) containing featured images for the slider that redirect to the relevant portfolio page. Again, i hope that makes sense and I’d really appreciate any suggestions / CSS editor code :D
-
Regarding the first issue, can you go ahead and try tis?
.page-template-portfolio-page .page-content { font-size: 1.25em; }I’m reading up on the other issue now.
-
Regarding the other issue, can you let us know specifically which featured image looks wrong and what you’d like to use in the slider (or on the page) instead? We’ll take a look and see if we can make anything work.
-
Hi again Supernovia –
Thank you – ‘first issue’ fix worked perfectly :DThe second issue applies to ‘featured images’ which are tagged ‘featured’ in the project page settings to enable them to display in the portfolio page slider (rectangle). What you get is a zoomed version of the project featured image (square), which doesn’t look good.
I’ve (temporarily) tagged our ‘Fine Art’ range as ‘featured’ so you can see what I mean HERE: https://2fsdesign.com/our-stuff/ . It appears as the second item in our slider . What I would like to do is edit a manually cropped version of the image to match the slider specifications (the ‘shopfront’ image featured as the first item in our slider is 1092 x 400 and matches other header images). If I tag a different picture as ‘featured’ in the portfolio page tags area it then changes the portfolio image too. Adding ‘featured’ to ‘project tags’ area doesn’t add the newly created ‘featured’ image to the slider… I hope all that makes sense!
NB: It has just occurred to me that changing the tag for featured images to something like ‘slider’ might work (?) I’ll have a fiddle later and if it works will advise accordingly, but if you find a fix in the meantime that would be even better! Thanks again :D
-
Further to above: Have now tried and failed changing tag to ‘slider’ – the portfolio still only allows for one image, whatever I tag it as (duh! obvs when I think about it). Which brings me back to the ‘redirect’ option if you can help with that(?) :D
-
I see what you mean; fancy lady doesn’t look as nice with her head cut off.
Let’s do this. Go ahead and crop your image for the slider so it works right for that. Then, if you need other crops (for the square, for example) upload another image with that version. Send us the link, and we’ll show you how to replace the square version with CSS.
-
I like the cut of your jib! Yes, let’s do this indeed :D
I was going to link this one for the slider (from one of the other cards in that range) https://2fsdesign.files.wordpress.com/2018/12/fine-art-featured-image.jpg
(I may change that from time to time, but I’m sure I’ll be able to tweak the CSS code to work the magic with another image once I know it in theory, and will be applying it to the slider images for other ranges too)
And the square one for the ‘portfolio’ crop is the one that’s already there – i.e. this:
Thank you in advance
-
Well thanks!
(I may change that from time to time, but I’m sure I’ll be able to tweak the CSS code to work the magic with another image once I know it in theory, and will be applying it to the slider images for other ranges too)
Exactly. Here’s the code you’ll use and modify as needed.
Note, I intentionally picked the second item, since the first currently has the correct image. This way you can see how it works, if that makes sense, and be able to take a stab at changing the code so you can ask for more help if you need it. You’ll need to change the post ID so the correct ID is targeted, and (if needed) the image url so the correct one is used:
.projects .post-314 .entry-thumbnail img { visibility: hidden; } .projects .post-314 .entry-thumbnail { background-image: url(https://2fsdesign.files.wordpress.com/2018/12/featured-image-fine-art.jpg); background-size: contain; }Also, this will only work with square images, and only with this theme. If you use a non-square image, it’ll repeat and look kinda weird. Want to give that a shot?
One more note: if you aren’t that comfortable digging around in View Source / Inspect Element for the correct post ID, here’s an easy shortcut: just click Edit. The correct ID (number) will show up in the editor’s URL.
Cheers!
-
Sorry, one more note. I did not test this on mobile because I’m presumptuously assuming it’ll work just fine. Please do double check it just to be sure. Thanks!
-
Oooh… getting there but not quite yet. The first go, using your code copy and pasted, hid the wrong image and duplicated the square ‘fine art’ image where Professor Venn should be! So assuming you had got the wrong pic id I then found the URL for the ‘shooting’ image I wanted to use in the slider and posted that, but that gave me the opposite effect I wanted with the ‘zoomed’ pic above still in the slider and the ‘repeat’ image you mentioned in the square. BUT: In theory I’ve had two different pictures display on the page in the areas I want them (just the wrong pic in each area) so I’ll keep playing with code you sent and URLs and I may get there…
I’ll play again later (bloody life getting in the way of ‘stuff’) and let you know how I get on. Thanks again. :D
-
Update: Nope, failed miserably to guess what code I need to tweak! And I started out with such high hopes following the above “BUT”.
Ignoring the featured square images (as they’re fine any way) is there any way I can point (redirect) the slider to the url of the desired ‘banner’ image rather than the thumbnail image, as you have with the second example – for example:
projects. post 375. {[ featured slide image]* url ( https://2fsdesign.files.wordpress.com/2018/12/fine-art-featured-image.jpg); background-size: [contain];**
}
(the words in [brackets] denoting * whatever description / code denotes the image that appears in the slider and ** whatever description/code denotes the standard behaviour that resizes the slider for different screen sizes?I HOPE that made sense – as you can tell I know nothing about code / CSS etc!
Alternatively, is there a simple bit of HTML I can add to a regular post (be it blog, page, whatever) with the desired slider image as a featured image (using a standard ‘featured’ tag) that will redirect a click on the slider to the relevant portfolio page (I THINK this is called a 301 redirect)? I know this can be done with plug-ins, but at this stage I only have a premium plan and have no need to upgrade at this point, so html code in the post itself or CSS tweaks are the only tools I have to play with.
Thanks again, and sorry for being such a dullard!
-
Hi there,
What @supernovia’s code does is to replace the square image at the bottom, NOT the image in the slider.
So, set the correctly-scaled banner image as the featured image on the project, in other words, the image you want used in the slider. That will cause the banner image to also appear as the thumbnail at the bottom, as you observed earlier in this thread.
So next use the custom CSS code to replace the square image thumbnail with the original version.
-
Doh! I told you I was a dullard… Yes, that makes sense now so I will have another play and report back…
[later] Again, close but no cigar. :(
This does everything I want on a big screen (PC) but the ‘split image’ issue mentioned happens to the square image too when viewed on a phone / tablet. I end up with two tiled images (same image) side by side that are half the height of the rest of the square images. I’ve tried tweaking @supernovia’s code in various ways and achieved a couple of different results using a ‘padding-top: 100%’ value and/or other bits of code I found in the inspector instead of (e.g.) ‘background-size: contain’ as suggested, but haven’t been able to isolate the bit that refers to resizing the image for mobile.
NB: there are a couple of lines of code shown in the inspector that say something like: “{ image-height: auto; max-width 100%;}”
I tried adding but they just zoomed and cropped the full image down)The “padding-top” suggestion I found elsewhere online and it says that the value 100% should mean resized images keep the same aspect ratio, but in this case I think it resizes the margin or something, because I ended up with either a tall thin image or a wide fat one depending on combinations with other CSS
So, in a nutshell it’s all good EXCEPT when viewed on a mobile device. If I can add some code to get the square image to resize for phone and tablet I’ll be good to go!
Thanks again for all help so far :D
-
Further to above, I’ve just realised that the fix suggested also wipes out the square image’s link to the portfolio entry (for some reason only on the full size image – it still works on the incorrectly displayed mobile images!), because the ‘featured image’ for that page is now the one in the slider! *boggle*
So another question now (which brings me back full circle) : Can I replace the images in the SLIDER with correctly proportioned images that will link directly to the relevant portfolio page (the same page the square image would link to)? I could either add hidden pages with featured art for the slider or just link from the image URLs themselves if I can ’embed’ the redirect in some way…
I’m surprised this hasn’t come up before, because unless working with repeat patterns (as the portfolio page demo of the sketch theme does) the default image sizes and auto cropping are really at odds with one another.
Finally, it’s extremely frustrating that there’s not a simple redirect option available without making a massive monthly investment (over double between premium and business plan + the cost of a plugin) or external hosting to get at the htaccess code – which is something a novice doesn’t want to be contemplating anyway! A simple redirect from a hidden page hosting the slider’s featured image to the portfolio target would sort the problem out, and with today’s internet speeds the end user wouldn’t even notice.
Again, thanks for all the help so far @supernovia / @kokkieh .
-
So, in a nutshell it’s all good EXCEPT when viewed on a mobile device. If I can add some code to get the square image to resize for phone and tablet I’ll be good to go!
To the original code, immediately under the
background-size: contain;still inside the curly braces, add this:background-repeat: no-repeat;Then add this below all the other CSS:
@media screen and (max-width: 50em) { div.entry-thumbnail.sketch-square { height: 742px; } } @media screen and (max-width: 35em) { div.entry-thumbnail.sketch-square { max-height: 506px; } }This will ensure the images will resize on mobile and tablet views, BUT it will add some white space between the thumbnails on certain screen sizes. I can’t find a way to prevent that. You can make the image sizes smaller – change 742 to 634 and 506 to 266, and you should be okay for portrait orientation on most phones and tablets, but then the images will be a different size on landscape orientations.
You can also add the post-id to the two media queries, e.g.
.post-375 div.entry-thumbnail.sketch-square, which will then only add the whitespace to the one image you’re targeting.That’s the best I’m able to do, though.
So another question now (which brings me back full circle) : Can I replace the images in the SLIDER with correctly proportioned images that will link directly to the relevant portfolio page (the same page the square image would link to)?
No. Any method of replacing the image via CSS will also cause the link to be lost. By hiding the original image with CSS we’re actually hiding the entire HTML element containing the link. While we can use CSS to add in a new image afterwards, we cannot use it to add back the link.
So knowing that, do you still want to try and fix the thumbnail image on mobile, knowing that the image won’t link back to the project?
I’m surprised this hasn’t come up before, because unless working with repeat patterns (as the portfolio page demo of the sketch theme does) the default image sizes and auto cropping are really at odds with one another.
I’m not sure there is a default image size. On your site the thumbnail images for projects display square, as that’s the dimensions of the images you uploaded and set as featured. On the theme demo at https://sketchdemo.wordpress.com/ they show as rectangular, because that’s the dimensions of the images used there.
The theme has a recommended image size, to ensure we don’t need to stretch or repeat the image to fill the allocated space on the single-post view, but from what I can see the thumbnails use whatever dimensions are used for the actual image.
The slider doesn’t, as that would require the slider to constantly readjust as it cycles through images on a site where images of different orientations are used. So we can either center-crop the image, or show the full image with potentially whitespace showing at the sides. Standard practice here is to center-crop, so you’ll see most themes and sliders behave this way.
Finally, it’s extremely frustrating that there’s not a simple redirect option available
I understand this, but it’s a limitation inherent to how this type of redirect work. The only way to redirect from one page to another on a site is to add a rule directly to the server. WordPress.com is a shared hosting environment, and we don’t provide server access on any plan, as one person making a change to their settings there could potentially affect thousands of other sites as well.
-
Thanks, @Kokkieh –
Agggh! This came SO close to working… The ‘no repeat’ solved the problem with tiles (and didn’t need the extended code you suggested) but that still left the issue with the replacement image not linking to the portfolio page. I then had the idea of editing @Supernovia’s code and instead of using ‘hidden’ to hide the original link image I used ‘opacity: 0’ to make it transparent, hoping this would then leave the original link intact underneath the (overlayed) image. It worked on PC, but then the image shown in mobile views went back to being tiled! I will play around (when I get a chance) with combinations of the various codes, because all the elements are now in place and it may just be a case of joining them up correctly. To paraphrase Eric Morecambe (if you’re old enough to get the reference) I have all the right note, just not necessarily in the right order…In the meantime I’ve applied a temporary fix by duplicating my Portfolio entries as regular pages and tagging them to put them in the portfolio page’s slider. It’s not perfect, and I lose the nice orderly links to other portfolio gallery entries at the foot of the page, but at least people navigating from the slider see pretty-much the same thing as those navigating by the portfolio gallery entries, and the images in each element are correctly zoomed and proportioned.
For info, BTW, the sketch theme suggests three aspect ratios for portfolio gallery items and we preferred the square, but it’s something of a moot point because none of the three recommended aspects match the slider’s aspect ratio, so cropping would be an issue in any event. I’m editing all of my images (other than the products themselves, which have to be ‘best fit’ depending on how we showcase them) to match the templates recommended sizes, but in this case the two elements of the portfolio page (slider and gallery) are at odds with one another.
Thanks again for all the help and if and when I find a full solution I’ll share it, but for now anyone facing the same problem could try the duplicate page workaround I’ve suggested. I’ve got some more questions to post but as these are less theme-specific I’ll post them elsewhere! :D
- The topic ‘Sketch theme – Wrong font displaying on some pages’ is closed to new replies.
WordPress.com Forums 
