Creating a custom slider in Drupal 8 - php

I am currently involved in a Drupal 8 Project but I am very new to Drupal. The aim of the project, in short, is to build a website based on a existing design and the client can update the website in Drupal (like a modifying some article, upload images to gallery, adding slides to the a slider, etc.)
I already have a static html page with me.
At this moment, I set my target to move the slider of the static page to Drupal such that the user can add, remove or update a slide. Each slide will contain a background image, a title and a description text.
After a day of research I am now able to create my own theme and create a "hard-code" front page which is exactly the same with my static html page. I am struggle to convert the slides to generic items that the users can modify in Drupal.
I am reading some articles about Modules and Views, but feeling very lost.
Can I have some directions as to what aspect of topics or what techniques I should go through to achieve the target I mentioned? Thanks!

I'm currently developing a Drupal 8 module that implements a block with a slider in it. It's really easy to edit the sliders. It uses Jssor slider.
What is your timeframe on getting this working? I am willing to help you.
Download Jssor slider (the non-jQuery / non-minimized / full-width version)
Code your own slider block, inside a new custom module. Put the Jssor HTML in the part of the slider block code, that outputs the HTML for the block
Create a Slider content type, via the Drupal control panel (the content type needs to consist of multiple images, and any other slide information you want to show) - this is where the end CMS user will add and remove images / text for the slider (they won't need to change the block).
The code for your slider block, should read the images chosen in the slider content type, and output the HTML for these within the Jssor HTML. Something like:
$slider_html = '';
foreach ($full_image_urls as $full_image_url)
{
$slide_html .= '<div><img data-u="image" src="'. $full_image_url .'" /></div>';
}
The reason I implemented it in a block, is because blocks are easy to add to any page you like, and you can drag the order they display in.
This is a very high-level answer. If you need more detailed support, or you feel this is not clear, then I'm happy to help further. There isn't space to detail EVERY single step of implementation in an answer here, however you asked for a guide.
When my slider module is complete (it will be far easier to use than the existing jssor module that people struggle with), I'll be happy to give you an early copy.

Related

Adapt code or Workaround for a WP Elementor slider widget to offer alternative caption presentation

The easiest way to explain this is I want to adapt the caption section of an elementor slider widget so it has it's own formatting functionality - i.e a separate text box to the side of the slider with (e.g) a static background image where the appropriate caption text (ideally) fades in as the images appear in sequence.
This seems like an simple task, and perhaps there's a widget out there with this functionality already.. I don't mind tackling the coding myself (although I'm new to php) but perhaps there's a simple workaround using (e.g) two slider widgets where the control (hover, click etc.) is synchronised.. or a better approach?
Any suggestions very welcome. I hope this is a decent explanation!

is there a way to make HTML, CSS , JS static page a wordpress dashboard so that the user can change the content images

I am working on a landing page using HTML, CSS , and JavaScript which are the tolls I am familiar with, but the client informed me that he want a dashboard to update the contents , images ...etc . I am not familiar with WordPress and have not done any project before. So is there any way to create the website then convert it into WP or any other way to solve the issue I am facing ?
hope I found a solution here
Yes you can create the HTML first. Then you can convert it to a WordPress Theme. But would require some PHP coding and knowledge in WordPress template structure, functions, etc.
Or else, you can hire a developer for this purpose.
Or the more easier way for you would be to use a drag and drop content creation plugin like Elementor (personally, I like it more) or WPBakery or something else.
EDIT:
To answer your question in comment, there's a starter theme called Hello. You can use it as your canvas and start adding your components and layouts in it. There are many third party Elementor addons available for use (some are premium). I mean certain elements for your layout would already be there as an addon widget created by someone else or it might be already shipped with the Elementor plugin!
If you have some time to spare (I mean it's not an urgent project), I would suggest some time playing with it.

wordpress. Is it possible to have dynamic content?

Is it possible to have dynamic content in wordpress? I know that navigation, footer, and sidebar is dynamic. But what about the content? What if my content is within a 3 col grid? How can I add a 3 col grid to wordpress if I am only provided with one paragraph box within editing page? If i add the html code in my php file, it will be static and not dynamic. I have studied resources and not found a solution. In result I am asking here to clarify. Therefore, how can I make the content within the body dynamic?
Some of the sources I studied
Nav Walker
Dynamic Template
It totally depends on your needs and the time you can spend on this. Here are some guidelines:
If you always going to follow a specific layout for a page then you can have meta boxes for the content and style is applied by default.
Examples:
Advance Custom Fields (ACF) is most popular and easy to use. Alternatively, you can create custom meta boxes.
If you wanted to give more control then you can create your own layout snippets and define as shortcodes.
Examples:
In one of my recent project, I create my own shortocodes and that can be used in any page and will be automatically formatted before displaying on frontpage like
[video_right]
[testimonial]some content[/testimonial]
[one_fifth]columns[/one_fifth]
BTW, you can also use any visual builder like Visual Composer etc.

Adding full-width content or re-structuring layout in Genesis Wordpress Child-Theme?

I want to add two pictures, both floated in opposing directions above the content of my word press theme,
I am going for this: old link
Here is a link to the site I am working on: test link
How could I create a wrap above the content, but below the header, and to take up 100% of the container?
I have tried creating a new wrap in the structure, but that does not work, it creates a container within site-inner. I've tried putting a text widget in the header area, but when I add a margin-top to it, the logo moves with it.
Edit:
I have since found out what I was doing wrong. I am using a genesis theme, and looked up the proper hooks. Ultimately I ended with this code,
add_action('genesis_after_header', 'add_featured_image');
function add_featured_image(){
echo get_the_post_thumbnail( );
}
I used this as a visual reference, genesis_after_header is the location,right after the header in the layout. The code I referenced to earlier allows the user to set a featured image on the page or post panel, and it'll be displayed. If you want to fit it within a column, you will want to add it before content entry.

Magento: adding content managed fields in the backend for a frontend CMS page?

This might be tricky to explain but I'll try my best!
I'm creating fairly basic CMS pages in Magento which are made from standard HTML markup. One of my pages contains a slideshow with different images.
The problem is, every time a designer changes the images, I have to go in and update the image src attributes. I've tried to teach the designers and administrators how to edit HTML but many times they have accidentally left out a closing tag, added an extra single quote, etc.
So what I want is the ability to write my markup as normal, but insert "content placeholders" instead of actual content such as image URLs, text snippets, etc.
Then, there would be some extra fields in Magento's backend for that CMS page -- one extra field for each content placeholder I inserted in the markup, above. The non-technical users would then simply write plain text or paste plain URLs in those boxes without having to worry about fiddling about with HTML markup.
So it's like a CMS within a CMS page!
Is this possible?
Thanks
You can try some free slider available at Magento Connect website.
http://www.magentocommerce.com/magento-connect/
Disclaimer: I am not the owner/staff/affiliate with any of these sliders.
I am told to try a widget. I didn't know widgets offered this functionality but I'll look into it.

Categories