Jump to content

image path as regular html

ryanC

By ryanC,
in Getting Started

 Share

Recommended Posts

ryanC Full Member

ryanC

Posted
Posted

Hi, I'm creating a very basic Processwire test site. My aim is to have the site be mainly HTML and CSS that I code on my desktop, then paste the HTML into certain fields of Processwire. I know very little PHP.

This main template page is for different kinds of fruit. I have my own navigation menu, a link to my own stylesheets, and one div called "fruit-content" that is the container for the "fruit_content" field I have created in Processwire, where all my content is going. So far, it's working fine:

 

Quote

 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>reset.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles.css" />
    
    <title><?php echo $page->title; ?></title>
</head>

<body>
    <div class="fruitNav">
        <a href="http://localhost:8888/fruit/apples/">Apples</a>
        <a href="http://localhost:8888/fruit/oranges/">Oranges</a>
        <a href="http://localhost:8888/fruit/strawberries/">Strawberries</a>
    </div>
    
    <div class="fruit-content">
    <!--I want to put all my page-specific HTML content into this field called fruit_content-->
    </div>
    
    <!-- search form -->
    <form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
        <input type='text' name='q' placeholder='Search' value='' />
        <button type='submit' name='submit'>Search</button>
    </form>    
    
</body>
</html>

 

 

The problem I am having is the images. I have created my own images folder. But when I type the path into the Processwire field I can't get them to show up. I've tried:

  <img src="<?php echo $config->urls->templates?>images/apples.jpg" alt="Photo of two apples." />

That works when I'm testing on my desktop, it's the same way I'm linking to my stylesheets. But Processwire field just gives me a broken link icon.

Is there a way to create my own folder of images, and just type out a path that will make that image show up?

Thanks!

 

 

 

 

Link to comment
Share on other sites
ryanC Full Member

ryanC

Posted
  • Author
Posted

I'm making progress on this. It's a lot simpler than I expected:

Quote

<img src="/fruit/site/templates/images/apples.jpg" alt="apples" />

But this only works when CKEDITOR is not active on the field. Ckeditor looks nice but it strips out empty tags, erases inline styles, rearranges the  code and wraps it in p tags :

Quote

<p><img alt="apple photo" src="/fruit/site/templates/images/apples-sepia.jpg" /></p>.

Is there another WYSIWYG editor I can use that will not modify my code like that? 

 

 

Link to comment
Share on other sites
SamC Hero Member

SamC

Posted
Posted

Hi @ryanC

I have an images folder which I keep stuff like logo, things that aren't inserted via the admin (as a image file upload or whatever). What I use to get these images is: 

<img src='<?php echo $config->urls->templates . "/site-assets/images/logo.png"; ?>

I don't know what you mean when you mention CKEditor stripping tags, or "Processwire field just gives me a broken link icon". The above is for images not uploaded via the system i.e. I haven't used a image upload field and the code in the template simply displays them.

If you have a field which is an image upload field, and you add that to a template (say basic-page.php), then you create a page using that basic-page.php template. If you then upload an image via that field and click save, the images will reside in a path like: 

yoursite.com/site/assets/files/27

...where the number at the end is the ID of the page where the image has been associated with (or uploaded to). You don't manually create these folders, the system does it for you.

Hope that helps a little.

  • Like 1
Link to comment
Share on other sites
ryanC Full Member

ryanC

Posted
  • Author
Posted

Thanks Sam, the first way is probably how I will be using images for now. Thanks for the tip on where the field uploaded images go to, haven't gotten that far yet but I'm sure I will have images entered that way as well.

I was able to fix the broken link by entering the path correctly, but the CKEditor itself rearranges the order of tags, deletes comments etc. For example if I had a comment like <!--note for later-->, the second I hit save that comment is deleted. Also had a "width=100px" to my image code, and it was deleted also. So I got rid of it, I don't really need it necessarily. 

  • Like 1
Link to comment
Share on other sites
SamC Hero Member

SamC

Posted
Posted

@ryanC this is a very helpful resource for image handling:

https://processwire.com/api/fieldtypes/images/

CKeditor is a different story, it will strip out tags unless you tell it otherwise. I found trying to manipulate CKEditor to be a pain in the butt and I try to not use any inline stuff in there at all (no added classes/ids or anything), I've always found you can target HTML tags using CSS wherever they might be. I simply use it for bigger blocks of text that need header/paragraph combos and maybe an image inserted.

You can search the forum for "ckeditor allowed styles" or "ckeditor stripping tags" (something along those lines) and there are a few posts about editing the config file to allow what you are asking for.

  • Like 2
Link to comment
Share on other sites
szabesz Hero Member

szabesz

Posted
Posted (edited)

SomeC is generally right, CKEditor is a beast you need to tame if you want to use it as a full fledged HMTL editor, I guess this is because it is not designed to be such a thing. A few resources though:

https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md

 

Edited by szabesz
typos
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...