Jump to content
Sign in to follow this  
Marcel

Text area field with responsive images (bootstrap)

Recommended Posts

Hey, 

I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code

<img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image">

What can I do to make it possible to insert reponsive images in a text area?

Thank you in advance.

Marcel

Share this post


Link to post
Share on other sites

I believe you could achieve this by "Extra Allowed Content" under the input tab for the field itself. I have mine set up with :

img[*]

In your source code (after you have uploaded and image to the ckeditor field), you could then simply add in class="img-fluid" and it would then retain the class. Then in you actual code for the template, just use:

<?= $page->your_field_here; ?>

and the content/image will be output with the correct classes to make it responsive.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your help. But there is no "Extra Allowed Content" available or I cannot find it. Do I have to install "Front-End Editing" first?

Share this post


Link to post
Share on other sites

Thanks for your help. But there is no "Extra Allowed Content" available or I cannot find it. Do I have to install "Front-End Editing" first?

EDIT: Was in the wrong field! Sorry. I try it!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By Roberts R
      Hello.
      I never though about it before but when I insert image into CKeditor field I don't get ALT tag filled from image that has it. Do I have to do it manualy for inserted image or Im doing something wrong?
       
    • By Mithlesh
      Changing it to null
×
×
  • Create New...