how to add the featured image to a page – with screenshot !?

hello again,

see the image here;

and here a description that fits most: https://www.ads-software.com/support/topic/post-page-not-showing-featured-image/

question: I have installed the theme but on post page, none of the post showing the featured images, just showing on the home page…
Can anyone help to resolve this problem so post page can also show the related featured image?

answer: I managed to bodge it by adding this to (my child theme’s) single.php

<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail( 'full' );
}
?>
(Insert after <?php while ( have_posts() ) : the_post(); ?>)
<img src="wherever" />

and a link: https://www.wpbeginner.com/beginners-guide/how-to-add-featured-image-or-post-thumbnails-in-wordpress/

note: i did not have applied the code to a child-theme yet.

but i deactivated all the plugins – step by step. – without any success.
note: i have upgreaded the server from PHP-Version 5.6 to Version 7.2xy

at the moment i struggle with some issues on the page:

Warning: ini_set(): open_basedir restriction in effect. File(/tmp/wp-errors.log) is not within the allowed path(s): (/sites) in /sites/www.my-site.com/wp-includes/load.php on line 345

condluding question: is it possible that this can cause the issues?!? with the featured image!?

look forward to hear from you

regards

hi there at all

just want to share this with you all: after doing som minor configurations with the setting of the upgrade php (note: we pulled from version 5xy to 7xy) and run into some errors with open_base_dir in restriction an the vanished featured image – now all came back

in other words – after setting the configuration right – the
– openbase_dir-restrictions dissapeared and
– the featured image button came back in the post-page.

glad to see it back

thread solve -can i mark this somewhere!?

have a great day

hello dear all

just want to inform you about what has happened so far. The errors that were reportet in the above messages are gone – due to some more setups on the server. Now we do not have any errors related to openbase_dir configuration-issues.

Again: what is aimed – what i am going to achieve: i am currently working on a page – ( which is beta-beta ) see https://www.job-starter.com For front-end images, we have to add them in WordPress Admin > Appearance > Edit CSS.

i have three postings on the site: eg. post-ids:
.post-256 …
.post-258 …
.post-260 …

Let us have a closer look at the Posting 256 – it has the post-id (see more here .post-256 …)we have the following – in the code we can see this: https://prntscr.com/r50bhr – cf

Note: the image was added not as image but as background. The height of this element is determined by .panel-image-prop – padding value.
By the way: However possible is, that the image will not have valid quality when we change this in CSS. We could / should do this in php file using thumbnail image size. However if we want to do individual CSS for each post, there an advice here could be like been seen here: https://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/

What is aimed: i need a CSS-rule that can be applied only to only post number eg to the postid-256 only.

regarding the customization: Here we have the wanted opposite behaviour: https://www.karavadra.net/reduce-height-single-post-page-featured-images-twenty-seventeen-theme/
See that the images on this page and at this example all have differnt heights: the great and very well written tutorial – here at Bharat Kardavara has managed it to apply different heights to the different images. Thats just great.

again, what is aimed: i need a CSS-rule that can be applied only to only post number eg to the postid 256 only.

But this is not the case – my problem is that i cannot achieve the change of the height of only one featured image in other words – every time i do some changes _ then all the images are changing Here we have the opposite behaviour: https://www.karavadra.net/reduce-height-single-post-page-featured-images-twenty-seventeen-theme/

But to be frank – we have to inspect the regarding elements in the browser and subsequently we have to find the correct applicable class-name for those images in question. In the tutorial it is .”single-featured-image-header img”. In my theme (it is the twentyseventeen) it might be different.

question: can we even use CSS :first-of-type or :last-of-type pseudo-classes, Do we even be able to use greater than ( > ) CSS selector. Well i need to check the uses and apply then.

WordPress by default adds an unique class to each single post in the body tag. So we can take advantage of it. I guess that we have to Inspect the classes in the body tag
and there we will find postid-NUMBER. So for given posts, the classes there will be postid-256, postid-258, postid-260 respectively.

Example: Now i think that we can adjust CSS rule something similar to:

.postid-256 .single-featured-image-header img {
/* display: block; */
/* margin: auto; */
height: 33vh;
object-fit: cover;
}

Assumtion: Then the rule will apply only to postid-number 256 only.
But wait:it looks like that if we change with postid -256 then we apply the changes for all and every image.

Then the rule will apply only to post number 256 only.
But this is not the case – my problem is: i cannot achieve the change of the height of only one featured image – every time i do some changes, then all the images are changing. Here we have the opposite behaviour: https://www.karavadra.net/reduce-height-single-post-page-featured-images-twenty-seventeen-theme/

see below the full css code – i guess that i have mixed it up with some mess…

can we even use CSS :first-of-type or :last-of-type pseudo-classes: Do we even be able to use greater than ( > ) CSS selector.

Well i need to check the uses and apply then.

Now you can adjust CSS rule something similar to:

.postid-256 .single-featured-image-header img {

/* display: block; */

/* margin: auto; */

height: 33vh;

object-fit: cover;

}

Then the rule will apply only to post number 256 only. But this is not the case – my problem is, that i cannot achieve the change of the height of only one featured image – every time i do some changes _ then all the images are changing

However possible is, that image will not have valid quality when we change this in css. We should do this in php file using thumbnail image size.

more links and ressources:

If we want to do individual CSS for each post, there is advice here: https://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/
Here we have the opposite behaviour: https://www.karavadra.net/reduce-height-single-post-page-featured-images-twenty-seventeen-theme/
we have the following – in the code we can see this: https://prntscr.com/r50bhr – cf

see the full CSS-Code:

.wrap { max-width: 1366px; }
.wrap { max-width: 1366px; }
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 60%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 30%
}

/*Responsive*/
@media(max-width:768px) {
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 100%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 100%
}
}

/* STRUCTURE */

.wrap {
max-width: 80% !important;
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
max-width: 100% !important;
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 80% !important;
}
}

@media screen and (min-width: 30em) {

.page-one-column .panel-content .wrap {
max-width: 80% !important;
}
}
@media screen and (max-width: 650px) {
.wrap {
max-width: 95% !important;
}
}
@media screen and (min-width: 48em) {
.background-fixed .panel-image {
background-attachment: initial;
}
}
.custom-header-media {
    height: 6vh;
}
@media screen and (min-width: 48em) {
.panel-image {
height: 200px;
}}

.postid-256 .single-featured-image-header img {
/* display: block; */
/* margin: auto; */
height: 42vh;
object-fit: cover;
}

.postid-258 .single-featured-image-header img {
}
@media screen and (min-width: 48em) {
.postid-258 .panel-image-prop {
padding: 12px; height:33px;
object-fit: cover;
}}

love to hear from you

hello again,

update: this topic is a great topic for any and all learning-tasks: I reviewed the CSS-Code (see above): What we have to say additionally, is that if we want to target a specific post with a given number, we have already identified it. We can target .post-256 with our CSS and it will style only that post.

Things to keep in mind with this however is that…:

1) The styles should come after any other styles that have been defined by the theme or wordpress itself: This means, we have to make sure that the CSS-changes come last in the chain.

2) Media Queries CSS are always written in the end, not among other CSS rules. Otherwise, it may make the media-specific rule ineffective.

3) In our lengthy CSS code, the “.postid-256 .single-featured-image-header img” selector has no rule defined.

4) If there are any more powerful styles using something like !important or using an actual ID style aka. #post-256 { then we will have to get more specific or use !important too (again being further down in the styles list means we will override) we might also want to look at hooks that activate prior to template being chosen. At that point, in PHP, we can look at the ID and if it matches a given number, we can introduce some additional tagging into the template for which we can then target the styles. One such hook that comes to mind can be found here https://codex.www.ads-software.com/Plugin_API/Action_Reference/template_redirect
which should have the post Id available and can be evaluated. If it is “256” then we need to add some additional markup to the template and have our CSS style that tag we add.

cf: https://codex.www.ads-software.com/Plugin_API/Action_Reference/template_redirect

Examples: Performing a redirect

Following example will redirect all non-authenticated users to a custom ‘signup’ page when trying to visit the ‘goodies’ page.

function my_page_template_redirect() {
    if ( is_page( 'goodies' ) && ! is_user_logged_in() ) {
        wp_redirect( home_url( '/signup/' ) );
        die;
    }
}
add_action( 'template_redirect', 'my_page_template_redirect' );

Don’t forget to exit (or die) after a wp_redirect().

Loading a different template

Loading a different template is not a good use of this action hook. If you include another template and then use exit() (or die()), no subsequent template_redirect hooks will be run, which could break the site’s functionality. Instead, use the template_include filter hook to return the path to the new template you want to use. This will allow an alternative template to be used without interfering with the WordPress loading process.

above all: this topic is a great topic for any and all learning-tasks: after having reviewed the CSS-Code (see above) i think that
we can gather more and more insights. i think that we can rewrite the whole additional CSS – to hit the above mentioned needs & aims.

some links and ressources regarding the customization:

– see the investigation – here a image: https://prnt.sc/r50bhr

– Here we have a great example of what is the wanted (opposite) behaviour: https://www.karavadra.net/reduce-height-single-post-page-featured-images-twenty-seventeen-theme/ Bharat have created a great example!! It is exacly what is wanted.

– The hints for doing individual CSS for each post, here a great ressource: https://www.wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently/

if you have any hint or tipp i look forward to hear from you.

regards say