Replace image on several pages with PHP or CSS?

  • Resolved lukefive

    (@lukefive)


    8 years, 2 months ago

    My client’s site has the same background photo on every page. He wants several pages to show an alternate photo. These are displayed via a custom slider rather than conventional markup. I have tried both CSS and PHP, each using the page ID. No luck. With CSS and the !important workaround, the correct replacement image would show up in the right-hand panel of Chrome’s development tools, but for some reason not display on the page. Hard refresh did not work. Any tips?

    <div id="herowrap">
<div id="hero" class="cycle-slideshow hidden-phone" data-cycle-log="false" data-cycle-fx="fade" data-cycle-speed="800" data-cycle-timeout="8000" data-cycle-pause-on-hover="false" data-cycle-pager="#heronav" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-slides="> div" data-cycle-pager-template="<a
href=#> {{slideNum}} </a>" style="position: relative;">
	<div class="slide cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: hidden;">
	<img src="https://client-name.com/wp-content/uploads/2016/08/image_to_replace.jpg" class="img-responsive" style="visibility: hidden;"></div><div class="slide cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">
	<img src="https://client-name.com/wp-content/uploads/2016/08/image_to_replace.jpg" class="img-responsive">
</div>
</div>
</div>
Viewing 6 replies - 1 through 6 (of 6 total)
  • RossMitchell

    (@rossmitchell)

    8 years, 2 months ago

    It would help us help you if you posted a link to your website. And indicate which pages get which background.

    Thread Starter lukefive

    (@lukefive)

    8 years, 2 months ago

    @rossmitchell thanks for responding. Link below is an example of commercial section where the house picture needs to be swapped. As mentioned, the usual methods do not seem to work for me.

    page that needs photo swap

    Thread Starter lukefive

    (@lukefive)

    8 years, 2 months ago

    Here is the image I have been trying to put in place of the house photo in that section…

    https://holdersecurity.com/wp-content/uploads/2018/03/holders-slider-template-2.jpg

    RossMitchell

    (@rossmitchell)

    8 years, 2 months ago

    You could run a filter that recognizes when the “body” is for class “page-id-37” and in this case do a text replacement on the image name. But I don’t like this technique at all.

    A better way is to get rid of the slider, and instead set background images on the div with id of “herowrap”, so in your customizer > additional css, you would have
    for your regular pages, and a selector running off the body class for the specials:

    #herowrap {
background-image: url("https://holdersecurity.com/wp-content/uploads/2016/08/holders-slider-template-1.png");
}
.page-id-37 #herowrap {
background-image: url("https://holdersecurity.com/wp-content/uploads/2018/03/holders-slider-template-2.jpg");
}

    Your big block of html in your original post would become:

    <div id="herowrap">
</div>
    Thread Starter lukefive

    (@lukefive)

    8 years, 2 months ago

    @rossmitchell Much more of a root-level solution. I will tinker, then return here.

    Thread Starter lukefive

    (@lukefive)

    8 years, 1 month ago

    @rossmitchell I finally got a chance to implement this. It looks very good; thank you.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Replace image on several pages with PHP or CSS?’ is closed to new replies.