How to make a WP page with one big image?

  • rogersb

    (@rogersb)


    6 years ago

    I have a new WordPress installation, so anything at this point is open to be changed, new theme or new ?

    I just need to make 3 pages. The first page is going to show users the OLD page, so its about as simple as it gets. I took a screen shot of the old page and for 2 days have been trying to modify it so that a wordpress page can show just that image. wow, the hardest thing Ive ever tried.

    Been into software as a developer over 25 years, but wordpress is extremely hard to learn and use, buttons and features dont do what they say, like walking backward looking at a mirror left handed. The stress level is at Scotty saying Captain the ship cant take no more! and Im like lets keep trying…

    If I take an image and stretch it to 2000 x 1200 in media settings add alt text and all and do every possible thing; using the original theme with the ball shaped pot and cactus plant thats full screen? REPLACE IMAGE? Ha!! not a chance. if I pick the image thats what it wants 2000 x 1200, only button is Save & crop, click that and a black X and it says “crop requires mouse to interact” ???

    NOTHING I COULD DO IN 3 FULL DAYS of changing that image has worked. If I make a new page and add my full screen image? its 1/4th the size far to the right and off the screen. So the goal is to take the full size screen image from the old site, save it and use that on a page.

Viewing 7 replies - 1 through 7 (of 7 total)
  • SJW

    (@whitsey)

    6 years ago

    You’ll need to create a new page template for that page removing the header and footer.
    Call it Blank Page Template.
    If you’re lucky, the theme might already have a blank page template:
    https://optimizerwp.com/documentation/how-to-set-up-a-blank-page-template/

    If not, you can create one.

    https://developer.ww.wp.xz.cn/themes/template-files-section/page-template-files/

    Copy
    header.php to header-blank.php
    page.php to page-blank.php
    footer.php to footer-blank.php

    Remove all the HTML code from header.php and footer.php that you don’t want shown

    Add
    Template Name: Blank Page Template
    to head of page-blank.php

    Now you can select it: https://optimizerwp.com/documentation/how-to-set-up-a-blank-page-template/

    When inserting the image, check the image settings and make sure you select “Full Width”

    Thread Starter rogersb

    (@rogersb)

    6 years ago

    Thank you!! It looks very good now. But the image while set to “full screen” is not full, its spaced 20% down from the top, but thats with just using the blank template and image

    will try the other example with changing the php also. html/css I know. php no.

    Would like to have a carousel there with full width images. Hopefully once I get the pattern of how things are done it will help alot

    SJW

    (@whitsey)

    6 years ago

    Yes, it will be CSS causing that.
    The default stylesheet would have paddings and margins set that you can override

    For carousel, I just use a lightweight JS include (not a plugin):

    http://responsiveslides.com/

    <ul class="rslides">
	<li><img src="/slide1.jpg" alt="slide1"></li>
	<li><img src="/slide2.jpg" alt="slide2"></li>
</ul> <!--.rslides-->
<script>
jQuery(function($) {
	$(".rslides").responsiveSlides();
});
</script>
    Thread Starter rogersb

    (@rogersb)

    6 years ago

    Thank you so much! this is very helpful. But where is the HTML stored for any page? I looked at responsive slides there, they use the CDN for javascript and their product, where to put the <script> files?

    WP is such a different paradigm, it seems like after making a change and saving it and going back its a different place than where I went to modify something; but hopefully with time.

    with this one item the responsiveslides if that could work it would be done. so close, but dont find where to modify the code thanks again!

    Thread Starter rogersb

    (@rogersb)

    6 years ago

    Shannon,

    Now a new problem the slider works only in preview, and instead of a left arrow on the left and right arrow on the right? it has 2 left arrows on either side of the image?

    Then I add pictures into the media they show up, I can select and edit them but if i put into the slider? they show up as a tiny box with X, like bad image? i have 5 images, only one i downloaded works. The rest show the x. cant find anything wrong with them! they just dont work

    What could be done to make images work? why does wordpress admin page not flag them if theyre not good?

    SJW

    (@whitsey)

    6 years ago

    Thank you so much! this is very helpful. But where is the HTML stored for any page? I looked at responsive slides there, they use the CDN for javascript and their product, where to put the <script> files?

    If you’re editing a page then the files you need are in the current active theme directory:

    /wp-content/themes/[your_theme]

    The files you’ll want to edit:

    header.php
    page.php
    content-page.php (if used)
    footer.php

    For a slider – you will use header.php. You can paste the code straight into header.php and you will probably want to restrict it to the homepage?

    So: 

    if (is_front_page()) {
  //put slider code here
}

    https://developer.ww.wp.xz.cn/reference/functions/is_front_page/

    To include the script files, either put a line in the <head> section of header.php – you can use a direct file (save it inside /themes/your_theme/js) and reference directly or, you can use an hook in your functions.php file (inside /themes/your_theme)

    to enqueue the script, add this to functions.php:

    //= Enqueue script files
/****************************************************/
function my_theme_enqueue_styles() {

	wp_register_script( 'responsive-slides', trailingslashit( get_stylesheet_directory_uri() ) . 'js/responsive.js', array( 'jquery' ), '20200420', true );
	wp_enqueue_script( 'responsive-slides' ); 
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

    https://developer.ww.wp.xz.cn/reference/functions/wp_enqueue_script/

    The best part about WordPress is that everything is contained in the theme directory – You should never,ever change code outside the theme directory.

    NOTE: Not advisable to add this code into the Dashboard/Admin because WP will strip code (annoying) but it wont let you save script by default.

    • This reply was modified 6 years ago by SJW.
    Thread Starter rogersb

    (@rogersb)

    5 years, 11 months ago

    You’ll need to create a new page template for that page removing the header and footer.
    Call it Blank Page Template.
    If you’re lucky, the theme might already have a blank page template:
    https://optimizerwp.com/documentation/how-to-set-up-a-blank-page-template/

    Shannon

    the other time I figured it out fast. I had to re-install from scratch. this time? Ive been trying 5 hours now, the options the article suggests are simply not there.

    There is no way to make a blank template right now, and the alternative is cryptic and I dont get it.

    Ive done alot of coding for decades, but WP is very difficult for me to follow.

    It appears non deterministic, in that selecting menu items and commands wont work 9 times you click on them, the 10th will.

    Just want a blank page again, it worked but had a server issue. Now its back to making a blank template but I upgraded to the newest WP after it kept asking and asking to install the latest. Seems like the feature to make a blank template was taken away

    Need 2 pages that just have an image on them. Thanks for any help, the new version seems different.

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

The topic ‘How to make a WP page with one big image?’ is closed to new replies.

Tags