Home Forums Arnold WordPress Theme Different Images in Post and as Featured image

Viewing 48 posts - 1 through 48 (of 48 total)
  • Author
    Posts
  • #23094
    Anteronilo
    Participant
    Purchased
    Expired

    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/

    #23105
    SeaTheme
    Keymaster
    Purchased
    Expired

    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.netTwitterFacebook

    #23130
    Anteronilo
    Participant
    Purchased
    Expired

    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;
    }

    #23140
    SeaTheme
    Keymaster
    Purchased
    Expired

    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!

    #23171
    Anteronilo
    Participant
    Purchased
    Expired

    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…

    #23187
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23200
    Anteronilo
    Participant
    Purchased
    Expired

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

    Any ideas…!??

    #23208
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23211
    Anteronilo
    Participant
    Purchased
    Expired

    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…

    #23217
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23223
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23228
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi

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

    Regards

    #23231
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23240
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

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

    Regards

    #23252
    Anteronilo
    Participant
    Purchased
    Expired

    ok, thanks

    #23255
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23260
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23279
    Anteronilo
    Participant
    Purchased
    Expired

    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;}
    }

    #23282
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23284
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23317
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23332
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23345
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23354
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi

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

    Regards

    #23384
    Anteronilo
    Participant
    Purchased
    Expired
    This reply has been marked as private.
    #23387
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23392
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23397
    Anteronilo
    Participant
    Purchased
    Expired
    This reply has been marked as private.
    #23403
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23410
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23411
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

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

    Regards

    #23414
    Anteronilo
    Participant
    Purchased
    Expired
    This reply has been marked as private.
    #23415
    Anteronilo
    Participant
    Purchased
    Expired

    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…

    #23425
    SeaTheme
    Keymaster
    Purchased
    Expired

    Please don’t use position: absolute;

    Regards

    #23438
    Anteronilo
    Participant
    Purchased
    Expired
    This reply has been marked as private.
    #23448
    SeaTheme
    Keymaster
    Purchased
    Expired
    This reply has been marked as private.
    #23460
    Anteronilo
    Participant
    Purchased
    Expired

    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;
    }
    }

    #23473
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23499
    Anteronilo
    Participant
    Purchased
    Expired
    This reply has been marked as private.
    #23500
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23501
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23508
    SeaTheme
    Keymaster
    Purchased
    Expired

    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; }
    }
    #23509
    Anteronilo
    Participant
    Purchased
    Expired

    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;}
    }

    #23510
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23512
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23545
    Anteronilo
    Participant
    Purchased
    Expired

    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

    #23546
    Anteronilo
    Participant
    Purchased
    Expired
    This reply has been marked as private.
    #23547
    SeaTheme
    Keymaster
    Purchased
    Expired
    This reply has been marked as private.
Viewing 48 posts - 1 through 48 (of 48 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!