Create lightbox on Kirby CMS for blog post - lightbox

I have a blog settled up on Kirby CMS. I have images attached on blog posts, the style for img contains max-width: 100%, every image has a URL to itself... I'd like to open these links as a lightbox instead of a page. Problem is that I can't use PHP for these cases since it is not a static page, all I have is CSS, HTML and Java, I believe.

Lightbox utilizes CSS and JavaScript to display the image in a modal window. You only need to load Lightbox JavaScript and CSS files with jQuery in the template and just add the attribute rel="lightbox" to your images to make it work.
Why isn't that working for you?

Related

How to set HTML and CSS website on WordPress?

I have a Website that is designed on Html and Css. Now I want to make it same as on WordPress. Tell me the best possible options that help me to create same as its style. I also want to add that css on WordPress.
You have several options for that.
1- Create your custom theme. this will allow you to add your HTML and CSS codes.
2- you can use page builders like Elementor and use the HTML element. then by adding your HTML and CSS codes that will render on the page.
Using both above methods will not allow you to edit page as you normally do using page builders. it has to be using HTML and CSS.
3- Re-create your website using page builders on wordpress, it will be easy and fast and you can make future edits easier.
Navigate to your Admin Dashboard.
You can use the WordPress Visual Editor to quickly add HTML files to
your website.
Click Pages in the left sidebar. Next, look at the left-hand
sidebar.
Choose an existing page or create a new one.
Click Add Block.
Add a 'File' block.
Choose your HTML file.

How to create a link to a lightbox gallery popup?

I'm trying to have a normal hyperlink opening up a lightbox like gallery
The only thing I've found so far are workarounds which involve coding, but then it's not at all user friendly for my customer.
Isn't any plugin out there which provides a lightbox gallery popup as link?
If you are using wordpress theme then you can using plugin in wordpress theme.
You can follow the plugin link for Lightbox Gallery Popup
If you would be using fancybox, then it would be as easy as adding data-fancybox attribute to the trigger elements (e.g., links). Example: https://fancyapps.com/fancybox/3/#images-1

Make my html display full screen wordpress gutenberg

How can I make my page display full screen? Ideally, removing all WP headers and menus?
I've pasted this into my HTML box in Gutenberg
<figure><iframe src="https://cstangor.shinyapps.io/shiny_calendar/" width="100%" height="1000" allowfullscreen="allowfullscreen"></iframe></figure>
You are trying to make iframe fullscreen. You need to edit your theme templates or add proper css.

Change the theme of one page without changing menu, search bar... in WordPress

Is there any way to use a theme only for the contents of one page?
I have already tried Multiple Themes plugin but it changes the appeareance of the whole html document (menu, search bar,... also)
Yes, you can.
1.Change the Content Structure.
To change the content structure, you need to create a custom page template.
You can follow this article to know more about how to add a custom page template to your theme and assign it to your page.
http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/
2.Only Change the Style
If the theme do it right, there should be a specific css class for the page on the HTML body tag. For example, page-id-1234. So all you need is add the css with the class for the page.
.page-id-1234 #entry-content {
//some css for the page
}

Need to access an image from HTML Page Editor

I have an image called "image-a.gif" in my WP images directory.
My question is, I am inside a page in the WP dashboard, specifically within the HTML editor page and need to access this image-a.gif from within the editor.
I am placing inside a div using img src="image-a.gif" but unsure how to get to it from here.
While your in the WordPress page editor you can add images from the media library by clicking the add image icon.
Next choose add image from media library choose the image and click insert and WordPress will add the code to the page editor.

Resources