Different Images in Post and as Featured image

[Anteronilo]

Hi there

When i create a post i use an image which is set to Featured image. This image is then (via the POST Category) show up in the Frontpage as a Thumbnail.
In reality i would like to use;
a) one image as FEATURED IMAGE (Cropped in a specific way) to be visible in the front page
b) ANOTHER IMAGE when entering the post (And still use the feature where the image is laying still in the back and the header section and text section is moving with scroll

Please see this example
http://anteronilo.se/sengpostrubrik/

[SeaTheme]

Hi,

You could set a different image for the cover image in the single post:
like this post,
http://anteronilo.se/sengpostrubrik/

 .postid-1445 .post-cover .ux-background-img { background-image:url(enter-a-landscape-image-URL);
 

ps:
1.1445 is the post’s unique ID, how to find it: https://doc.seatheme.net/wordpress-faqs/custom/how-to-find-wordpress-post-page-id/
2.The image URL format likes: http://anteronilo.se/wp-content/uploads/2016/11/vardagsrum_01-scaled.jpg

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[Anteronilo]

Hello Again,
I have tried both of these inputs in “appearence/costomize/additional css”
Section of wordpress. I know it is the correct ID and i have double and trippel checked your code suggestion…
Cannot find out what is wrong… this path – http://anteronilo.se/air-sea/ still show the image 11.jpg
Any suggestions…??

postid-1539 post-cover ux-background-img {
background-image:url (http://anteronilo.se/wp-content/uploads/2020/11/11f.jpg;
}

.postid-1539 .post-cover .ux-background-img {
background-image:url (http://anteronilo.se/wp-content/uploads/2020/11/11f.jpg;
}

[SeaTheme]

Hi,

Please change as:

.postid-1539 .post-cover .ux-background-img {
    background-image: url(https://anteronilo.se/wp-content/uploads/2020/11/11f.jpg)!important;
}

Please don’t lose the dot, add !important

PS: The support license was expired. We will be thankful if you renew it.
We have just launched the Black Friday discount, and now the update is very cost-effective.
https://themeforest.net/item/arnold-lightweight-portfolio-photography-wp-theme/18935251

Regards!

[Anteronilo]

Hi there… Thank for your suggestions on the support. We might do that.
Need to get this sorted first via you to see

I have tried the bove as you suggested – but i still cannot get this image (https://anteronilo.se/wp-content/uploads/2020/11/11f.jpg) to be shown in the post page (id 1168)

I have tried add the code into the “appearence/costomize/additional css” as i wrote before – That did not work
I have tried add the code into the POST IT SELF – after loading a new custom css per page/post plugin. – That did not work

Can you please have a look. As soon as i know how to tackle what you say is possible, use a separate image in the post, i will open the discussion for a proper support
Thanks in advance…

[SeaTheme]

Hi,

I have tried the bove as you suggested – but i still cannot get this image (https://anteronilo.se/wp-content/uploads/2020/11/11f.jpg) to be shown in the post page (id 1168)

What is the post URL?

Regards

[Anteronilo]

Hello – I am sorry…i missed that…
http://anteronilo.se/one-two-tree-oclock-four-oclock-rock/

Any ideas…!??

[SeaTheme]

Hi,

Please change your custom CSS as:

.postid-1168 .post-cover .ux-background-img {
  background-image: url(https://www.anteronilo.se/wp-content/uploads/2020/11/11f.jpg)!important;
}

Regards

[Anteronilo]

Nope Still Does not work – have tried BOTH with the Additional WP plugin and also to use the “Additional CSS” section
All suggestions that have come from you have included https:// where as the site is currently set to http:// only for the time being.

Please advice further…

[SeaTheme]

Hi,

I checked it again.
The custom CSS works in fact. The cover image is http://www.anteronilo.se/wp-content/uploads/2020/11/11f.jpg now,
I notice the 2 images are similar,
http://www.anteronilo.se/wp-content/uploads/2020/11/11f.jpg
http://anteronilo.se/wp-content/uploads/2020/11/11.jpg

so you may think it doesn’t work?

You could change as a different image to prove it.

Regards

[Anteronilo]

This is what i did…
When entering anteronilo.se i scrolled down to the Air and Sea image (Lowest to the left when hoovering the images.)
By checking via google inspect i get the Post iD “1168” and i also get to see the SLUG which is “http://anteronilo.se/one-two-tree-oclock-four-oclock-rock/”
What i cannot see here is what image is used- but i know it is the Featured image from the post 1168 – (And i double checked that – and Yes it is “11.jpg”

Then i Clicked the image and come to the post 1168
Since i have added the suggested code in the additional CSS that this particual post should use image 11f.jpg instead, i would expect tat image to show up when doing an inspect via google again.
This is what i can get.. <div class=”ux-lazyload-bgimg ux-background-img lazy-loaded” style=”background-image: url("http://anteronilo.se/wp-content/uploads/2020/11/11.jpg&quot;);”></div>
As you can see system is using 11.jpg, which (i assume) the theme pick from the fact it is featured.

When trying different images; as suggested
NOW – The strange thing happens – i can see the correct images at it seems, BUT when doing an Google Inspect system is still showing image 11.jp (like above) what ever image i use

So… Yes the Code works avan though it was not obvious… However the Google Inspect is obviously showing the path/link to the featured image – Whilst the override “disappears in the code”
Do you have any ideas around that ?

Thanks
Stefan

[SeaTheme]

Hi

You should check the right column of the Chrome Inspect: https://www.dropbox.com/s/3y0rhwwb8basach/qq20201202-105405.jpg?dl=0

Regards

[Anteronilo]

Thank You – Yes you are right… It was a bit confusing with the Left Column not showing the correct thing though….

Missing one piece though – Now when everything is set and seems to work – it does not in the mobile view
When Scrolling the whole page scrolls – rather than – behave like on the post on a computer …
How can i change that to test it ?
Thanks

Stefan

[SeaTheme]

Hi,

The mobile browser doesn’t support the effect. So it has to be disabled.

Regards

[Anteronilo]

ok, thanks

[Anteronilo]

As you know already i got this to work – and i have a related question – I want to show a third image when coming from a mobile device….
and i have tried the following code;

.postid-48 .post-cover .ux-background-img {
background-image: url(http://anteronilo.se/wp-content/uploads/2020/12/05liggande.jpg)!important;
background-size: 100%;
background-color: #ffffff;

@media screen and (max-width: 768px) background-image: url(http://anteronilo.se/wp-content/uploads/2020/11/11.jpg)!important;
}

Can you tell me if the process is correct in your theme and if i made any errors in this one…
Thanks in advance,
Stefan

[SeaTheme]

HI,

THe @media CSS format should be:

@media screen and (max-width: 768px) {
 .postid-48 .post-cover .ux-background-img { background-image: url(https://anteronilo.se/wp-content/uploads/2020/11/11.jpg)!important; }
}

Regards

[Anteronilo]

Thank you alot – It worked out well…

Having said this i have the following question that cam up now…
If you are looking at a post from a desktop… https://anteronilo.se/voulez-vous/ this page show an image full screen from side to side.
i want to show the same image in a mobile or table – but since the mobile is “Prortait” mode i want the image to be Portrait mode and horizontal scrollable.
(to fill the area between the header and the sext section)

Preferable using the finger directly on the image (Rather than a scroll bar)
Is this possible – I did google and found this which i tried…

It seems like the image just disappear using this code – and checking in a mobile

@media screen and (max-width: 900px) {
.postid-198 .post-cover .ux-background-img { background-image: url(https://anteronilo.se/wp-content/uploads/2020/11/RelaxLiggande.jpg)!important;
overflow-x: visible;
flex-basis: 0;
flex-grow: 1;}
}

[SeaTheme]

Hi,

We rarely use this kind of CSS, This code is too new and compatibility is a problem. You can try using this code.

Please try to update the CSS as:

@media screen and (orientation: portrait) {
 .touchevents  .postid-198.post-cover .ux-background-img { 
 background-image: url(https://anteronilo.se/wp- content/uploads/2020/11/RelaxLiggande.jpg)!important;
 background-size: 200vw;
 width: 200vw;
 touch-action: pan-x;
 }
  .touchevents .postid-198 .post-cover {overflow-x: scroll;}
}

Regards

[Anteronilo]

Hello Again, Well the image is shown in full and on the site from the mobile.
I would anticipate that the code should enable the page width to be set as 200% or so and then the image should follow that…
Can you give it another try…?

Thanks
Stefan

[Anteronilo]

Did you have another look at this…?
It would be very much appreciated.

Alternately – how can i get rid of the white area above and below the image when looking from a mobile.
I have tried various alignments but without success…

Thanks

[SeaTheme]

Hi,

I would anticipate that the code should enable the page width to be set as 200% or so and then the image should follow that…

Sorry, I don’t have another solution if the CSS doesn’t work.

2. Please add the custom CSS:

@media (max-width: 768px) and (orientation: portrait){
.responsive-ux .fullscreen-wrap.post-cover  {
    height: 35vh;
 }
}

you could reduce the 35vh, the default is 50vh

Regards

[Anteronilo]

Thank you – Nope that did not work at all regardless…

Let me try a last question from a bit different angle.

Today when i click one of the Images of the first page – a POST opens with a background Image

Is it possible that when i do the same from a Mobile – open other feature (POST, PAGE or Whatever) that can make the image that is displayed covers the hight and can SCROLL horizontally
Maybe it is possible if “Background-Image” as such is used?

Any creative suggestions on this… ??
Thank you in advance – And Best regards
Stefan

[SeaTheme]

Hi

I don’t understand your question. Please give me more tips.
better paste a screenshot (like by dropbox)

Regards

[Anteronilo]

This reply has been marked as private.

[Anteronilo]

And PS – I have tried thousands of combination – but HOW can i Place the Heading 3 Text
Closer to the image for MOBILE only?
Using h3 does not work as it works for both mobile and Full Screen….
Please advice…
Thanks

[SeaTheme]

Hi,

Please paste the CSS:
it will affect https://anteronilo.se/voulez-vous/
I will check it, plz don’t remove it

@media screen and (orientation: portrait) {
 .touchevents .postid-198 .post-cover .ux-background-img { 
 background-image: url(https://anteronilo.se/wp- content/uploads/2020/11/RelaxLiggande.jpg)!important;
 background-size: 200vw;
 width: 200vw;
 touch-action: pan-x;
 }
  .touchevents .postid-198 .post-cover { overflow-x: scroll; }
}

Your custom CSS affect the h3, you need to remove the position: fixed;

h3 {
    margin-left: 20px;
    position: fixed;
    bottom: 150px;
}

Regards

[Anteronilo]

This reply has been marked as private.

[SeaTheme]

Hi,

The background-position will not affect it, it is scroll position, it should not be possible by CSS.

You could adjust the margin-top by negative value:

h3 { 
    margin-top: -10px;
}

Regards

[Anteronilo]

Perfect, This worked absolutely fine and everything is now in order

To finalise this coversation i have one question.

When i did. backup of the site i also installed wp 5.6 and i spend some time to roll back to 5.3 as the web hotel said the site is not compatible with 5.6
Can you confirm or reject that

Thanks,
Stefan

[SeaTheme]

Hi,

The new version Arnold theme and pagebuilder support WP5.6
https://seatheme.net/forums/topic/wordpress-5-6-update-issue/

Regards

[Anteronilo]

This reply has been marked as private.

[Anteronilo]

In addition to above:
I am still trying around a bit
Using this code:

h3 {
position: absolute;
top: -130px;
margin-left: 20px;
margin right: 20px;
z-index: 1;
}
}

…is giving a great (not perfect) result in Chrome and Safari – whilst it does not work with Firefox, DuckDuckGo or Brave.
The behaviour is really strange of the image.

Now, Brave and duckduckgo are probably small browsers – but firefox…
Any ideas…

[SeaTheme]

Please don’t use position: absolute;

Regards

[Anteronilo]

This reply has been marked as private.

[SeaTheme]

This reply has been marked as private.

[Anteronilo]

Hi again,
I am totrally satisfied with the behaviour on Lap Top, Stationary, Mobile Portrait and Tablet Portrait
The challenge i have is now “ONLY” the Mobilde and Tablet in Landscape mod.
It is extremely important that the as much as possible of the images are shown. Because the page is about
interial design.

So when turning the mobile or tablet into landscape position i would very much like…

a) The header and status bar to be minimised as much it is possible
b) Remove as much as possible of the white “fluff” below the image (small margin or “Air” can still exist – but with harmony of H3 header)
c) Show image width within Screen size
d) Show image height with “Overflow” allowed to scroll for visibility
e) Preferably also i want to be able to define a starting point for the image when it is fist shown in screen and without a scroll

The code used for this so far – which is not bad but far from perfect – is written below
and you can see this URL. https://anteronilo.se/voulez-vous/
Now, i DO a bit of coding – But to understand how theme is build with each elements heritage it is really difficult to understand….
Can you guide me it would be very much appreciated
PS – the below code is only valid for the “voulez-vous” post as per now. DS

best regards
Stefan

@media screen and (orientation: landscape) {
.touchevents .postid-198 .post-cover .ux-background-img {
background-image: url(https://anteronilo.se/wp- content/uploads/2020/11/RelaxLiggande.jpg)!important;
background-position: 0 -100px;
width: 100vw;
height: 100%;
background-size: 100%;

touch-action: pan-x;
}
.touchevents .postid-198 .post-cover { overflow-x: scroll;
}
}

[SeaTheme]

Hi,

Please remove your CSS about landscape, add this CSS:

@media (max-width:1000px) and (orientation: landscape) { 
 .navi-show-center .header-main { padding-top: 10px; padding-bottom: 0px; }
 .logo-h1 {  font-size: 40px; }
 .postid-198 .post-cover .ux-background-img { background-size: 100%; background-position: 0 0; }
 .postid-198 .post-cover {  height: 63vw; /*it is about the cover image ratio*/ } 
}
 .postid-198 .entry { display: none; }  /*It will affect the spacing below the cover image for all media*/

Regards

[Anteronilo]

This reply has been marked as private.

[SeaTheme]

HI,
Happy Holidays

Please add the custom CSS to adjust header height:

@media (max-width:768px) and (orientation: landscape) { 
 .responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-h1, .responsive-ux .header-main,body.responsive-ux #header-main > .container-fluid,.responsive-ux #header #logo .logo-h1,.responsive-ux .navi-logo .logo-wrap,.responsive-ux #header {
    height: 60px;
    line-height: 60px;
 }
}

The cover image will be masked by the header bar if you add the background-position: 0 -150px; , it will not be shown even with scrolling. It will be conflicted with your requirement. You should remove it.

Regards

[Anteronilo]

Excellent – Thank you…

Now to thr Header 3 (H3)
If you are looking at any Page in ANTERONILO.SE and in landscape mode from a mobile
you can clearly see that the H3 is a bit too big on this screen (Works perferct in others.

So – Whatever the size of the font is in H3 – I want to override that when in Landscape and ona Media Screen

I have tried to override this using the following in customize CSS

@media screen and (orientation: landscape) {
h3 {
font-size: 16px; }
}

But it seems not to work with such override…
Can you guide me here too please…
Thank you
Stefan

[SeaTheme]

Please try to update CSS as:

@media (max-width: 767px) and (orientation: landscape) {
.responsive-ux .entry h3, .responsive-ux .text_block h3 { font-size: 16px; }
}

[Anteronilo]

First of all
Thank you for your patience.

I have yet another question – When in landscape mode we still want to see the whole image that is loaded.
This means that we should need to activate the scroll functionality when in landscape mode as well…

I have tried with the below – However – The image is some how covered by the white area below the image and i can ONLY scroll horizontal;
Any ideas.

@media screen and (orientation: landscape) {
.touchevents .postid-61 .post-cover .ux-background-img {
background-image: url(background-image: url(“http://anteronilo.se/wp-content/uploads/2020/12/ArtyLiggande.jpg&#8221;)!important;
background-position: top center;
background-size: 170vw;
width: 170vw;
touch-action: pan-x;
}
.touchevents .postid-61 .post-cover {
overflow-x: scroll;}
}

[Anteronilo]

Addition to the last question

1. It seems like different phones in landscape mode treat the image differently –
Check the site now and before answering – i wont change anything right now…
All images works fine ncluding scroll vertical and horizontal – But only on iphone 8
An iphone 12 does not show the full image (bottom) even if scrolling to the bottom.

How come…

2. Secondly – Is the Fonts automaticalli build into the theme so that all viewers can see the same font regardless if they have the font since before or not?

Thanks

[SeaTheme]

Hi,

1. for iphone 12 the same as iphone 8, add the custom CSS:

@media (max-width: 926px) and (orientation: landscape) {
 .responsive-ux #navi-trigger,.navi-show:not(.ux-mobile) #navi-trigger {
    display: block!important;
 }
 .responsive-ux #navi-header {
    display: none!important;
 }
.navi-show-center .header-main {
    padding-top: 0;padding-bottom: 0;
}
.navi-logo {
    float: left!important;
}
.logo-h1 {
    font-size: 24px;
}
 .responsive-ux .logo-a, .responsive-ux #logo, .responsive-ux .logo-h1, .responsive-ux .header-main,body.responsive-ux #header-main > .container-fluid,.responsive-ux #header #logo .logo-h1,.responsive-ux .navi-logo .logo-wrap,.responsive-ux #header {
    height: 60px;
    line-height: 60px;
 }
}

If it cannot scroll still, please remove touch-action: pan-x; from https://www.dropbox.com/s/hug378wffhqtkor/qq20201231-105821.jpg?dl=0

2. Yes, because the fonts are web fonts. It is not from the locals.

Regards

[Anteronilo]

OK Since i havent heard from you i realize i might have copied to much text OR you might have bank holidays

So, to clarify. this is what I want to achieve….for the MOBILE TABLET units only

Regardless of what type of phone or screen size, or Portrait / Landscape size i want to have settings in the Custom CSS
which allows the following

HEADER SECTION: 10-15% of Screen (Using some settings)
Showing LOGO (ANTERO NILO text) and the MENU (The three lines representing the menue

MIDDLE SECTION
100% of image vertically available and visible (without scroll)
100% of image horizontally visible, using scroll to show potential overflow.
No Section (HEADER or FOOTER) should ever obscure the image (100% vertically and horizontally should always be possible to view)

FOOTER SECTION
Showing H3 TEXT and below that, the Copyright.
************

If you require to have the code used at present (Custom CSS) i can email you that – as it seems not possible to send it here.

Please advice

[Anteronilo]

This reply has been marked as private.

[SeaTheme]

This reply has been marked as private.

[Author]

Posts