Jump to content
Sign in to follow this  
dil_bert

WP: Assign featured images to pages that are included in "Sections"

Recommended Posts

Assign featured images to pages that are included in "Sections"

hello dear Experts good day dear Wordpress-fans for the great twentyseventeen-theme.

for a new Website I am making at the moment i am working out the design principles. 
i'm currently working on the Twenty-seventeen theme. I'm trying to make each "page" display as a section on my homepage. i guess that however I'm clearly missing a step. 

I've already gone into my settings (both from the dashboard and within the customizer)

There is a section called featured products with images showing: Features Images. Currently I have to update these images manually through my front-page.php file 
I need a custom section in the customiser called something like featureImages - There would have to be 4 upload sections like:

featureImage-a featureImage-b featureImage-c featureImage-d


Generally speaking: The page selection is set within the Customizer under the so called Theme Options, which will only show when front page is set to static.
So far so good: The output happens within the function twentyseventeen_front_page_section in the theme file template-tags.php, where each panel is queried individually with get_post, so it's not exactly a loop in the conventional sense.

We are able to change the number of sections from the default 4 with the twentyseventeen_front_page_sections filter, which should return the number of desired sections. to access the values via code, we can use get_theme_mod, each panel is stored under the key panel_$i, where $i is the section number, starting at 1.
The stored value is the ID of the page that were working on. 
That said - we subsequently can also update these values with set_theme_mod.

I've seen this on some themes but I just don't know how they do it.
I've tried searching for this but I don't really know how to put it into words for Google to give me a result. I apprentice any help or if you could point me in the right direction if this has been asked before :)

The question is: How to assign the so called featured images to pages that are included in "Sections"? i have heard that the wordpress-customizer of the theme twentyseventeen has got a special control for file uploads. 
Well assuming that this is correct then i guess that i need to know how the theme customizer works exactly, 

I guess that i need to organize it like so:
`

 

$wp_customize->add_control( 
    new WP_Customize_Upload_Control( 
    $wp_customize, 
    'wpse-all-the_images', 
    array(
        'label'       => __( 'First image', 'wpse-allimages_theme' ),
        'description' => __( 'More about first image', 'wpse-allimages_theme' ),
        'section'     => 'wpse-allimages__section_id',
        'settings'    => 'wpse-allimages__setting_id',
    ) ) 
);`

 

with that we would be able to retrieve the image in the template with get_theme_mod('wpse-allimages').


Any help would be appreciated. Thanks.


i love to hear from you. 

regards 


 

Share this post


Link to post
Share on other sites

 

just to share with you - some results... 

 

i have set the featured image - but this was obviously tooo big and it was way too huge on my home page; I have a feature image on each page. But on the home page, the logo is huge and while on the rest it is fine. i have had a closer look at different pages of the forums - to find out what my problem is?

first of all: The panel background images are set to “cover” the open area with any photo or graphic with the following default CSS code from the theme:

 

 


.panel-image {

background-position: center center;

background-repeat: no-repeat;

-webkit-background-size: cover;

background-size: cover;

position: relative;

}.panel-image {

background-position: center center;

background-repeat: no-repeat;

-webkit-background-size: cover;

background-size: cover;

position: relative;

}

 

and here what is very important: Basically any featured image we will apply to the page will be stretched to cover the area which is why the logo is oversized. If we are still wanting to use the logo in that spot, then we need to add some custom CSS to the Additional CSS tab in the customizer to target that specific post featured image.

 

Example: if the ID of our page there is 390, so it would have to be:

.post-390 .panel-image {

background-size: auto;

}


we may also adjust the open space as well by adding a height such as:

 

height: 40vh;

 

 

Then our custom CSS would be something like:

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

.post-390 .panel-image {height: 40vh;}

}

 

all together our CSS would be:

 

.post-390 .panel-image {

background-size: auto;

}

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

.post-390 .panel-image {height: 40vh;}

}


 

i did so - and it helped alot. At the moment i still struggle why i have one image (section) showing up two times.

 

Edited by dil_bert

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.