Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 4, 2019 at 6:40 am #1144882
    guttogjente

    I would appreciate some recommendations on how to improve the display of featured images on our custom post type “q_a”.

    For our page we have 1000 questions and answers from youths. They all have the same two featured images. Therefore, the recommended article overview becomes strange like on this post, especially on mobile where there is no text on hover. In that case, the users will not know which article they are forwarded to. One option would be to find different featured images and replace for all posts.

    For my custom post type q_a I feel that the featured image takes up too much of the screen in the category achieve pages on cellphone. This makes it necessary for the user to scroll a lot on mobile to look through the archive headings. Can I make it the same shape on the archive page as when I enter the post (long and narrow, but fullwidth instead of 80% like it is in the post header now) on mobile?

    I would also like to remove the featured image from displaying inside the custom post type q_a on all devices. Particularly on desktop it does not make sense to blow up an image that is not that interesting (because the user have seen it many times already).

    Would you recommend me to change pictures or edit the way the existing pictures display? If I choose to keep the existing featured images, is it possible to change the recommended readings from thumbnails of the featured image to post titles with links?

    October 5, 2019 at 11:41 pm #1145404
    Mike

    Hey guttogjente,
    Thank you for the link, and the explanation, I believe you wish not to show the featured image at the top of your posts because it takes up too much room, this can be done this this option:
    2019-10-05-172614
    but unfortunately, this doesn’t look like an option in your custom post type, perhaps your developer can add the option back in?
    Another option is to hide the featured image with css, like this:

    #top.single-q_a .big-preview.single-big {
	display: none !important;
}

    this will work on all of your custom single post types “q_a”, it can also be modificationed to only work on mobile or desktop.
    I’m not sure what your question with the archive pages is, I see that they are a grid for desktop, and a full-width column for mobile, we can write similar css to hide the images for these pages too, if you wish.

    Best regards,
    Mike

    October 7, 2019 at 8:58 am #1145682
    guttogjente

    Thanks, it worked well! What I meant is that on mobile on the archive page for q_a posts the featured image takes up around 1/3 of the screen, which means that the user needs to scroll a lot. Could you share a code to replace the image with another one on mobile? Then I could upload an alternative image that is about 30 px high and will work better on cellphone. Is it possible to remove the link from the featured image? Or a code that takes the current featured image and only display the question mark in a circle (border-radius: 100%) that is 30px high? Here is the current layout:
    old
    Here is the design I aim for.
    new

    October 11, 2019 at 4:03 am #1146991
    Mike

    Hi,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px){
#top.archive .avia-content-slider .slide-image img {
    width: 30px !important; 
    height: 30px !important; 
    border-radius: 100% !important; 
}
#top.archive .avia-content-slider a.slide-image {
	pointer-events: none !important;
}
}

    This will only work on mobile archive pages and make the image a 30px round circle plus make it not clickable.

    Best regards,
    Mike

    October 12, 2019 at 4:52 am #1147299
    guttogjente

    Thanks a lot! It almost looks like I want now, but it seems to be a slightly different background color around the image compared to the background color on the page. Can it have to do with the code that we added previously to make the width 100%:

    .avia-content-slider .slide-image img {
    object-fit: cover;
    width: 100%;
}

    From the screenshot above you can also see that currently there is a problem with different size on the round images on mobile. To solve it, I was thinking about to remove that code and change the two versions of the featured image to round and transparent png versions:
    https://www.guttogjente.no/wp-content/uploads/2019/10/blueLG.png
    https://www.guttogjente.no/wp-content/uploads/2019/10/darkLG.png
    Do you think that will work if I bulk replace the featured images? I would also like to change the display on mobile on the blog sections on two other pages, https://www.guttogjente.no/ and https://www.guttogjente.no/spm-og-svar/

    October 12, 2019 at 1:23 pm #1147337
    Mike

    Hi,
    The reason there is a different background color around the blue ones is because it is a blue circle on a white background. If you switch to the new images with the transparent background this would be solved, and you would not need the border-radius: 100%; code because they are already round. Replacing the images should also make the other two pages look better.
    Please give this a try removing the css I gave you, and if it still needs adjusting we can help afterward.
    Bulk replacing the featured images may turn out to be a little tricky, but this plugin may make it easier: Quick Featured Images please read this article.

    Best regards,
    Mike

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