Changes to repeater ui, and completed MVP for custom image sizes

This commit is contained in:
Jeremy Rangel
2025-01-04 14:58:58 -08:00
parent 63e181109c
commit ceb37fc5af
8 changed files with 360 additions and 7 deletions

View File

@ -47,7 +47,16 @@ function lcp_custom_svgs_field() {
<?php
}
function custom_image_size_settings_page() {
add_options_page(
'Custom Image Sizes', // Page title
'Custom Image Sizes', // Menu title
'manage_options', // Capability
'custom-image-sizes', // Menu slug
'display_custom_image_size_form' // Callback function to display the form
);
}
add_action('admin_menu', 'custom_image_size_settings_page');
@ -247,6 +256,7 @@ function render_lcp_theme_settings_page() {
<li class="tab-link active" data-tab="custom-meta">Custom Meta</li>
<li class="tab-link" data-tab="icons">Icons</li>
<li class="tab-link" data-tab="custom-code">Custom Code</li>
<li class="tab-link" data-tab="images">Images</li>
<li class="tab-link" data-tab="misc">Miscellaneous</li>
</ul>
@ -302,6 +312,24 @@ function render_lcp_theme_settings_page() {
</form>
</div>
<div id="images" class="tab-pane">
<h3> Image Sizes </h3>
<div class="lcp-repeater">
<div class="lcp-repeater-row">
<input data-lcp-repeater-key="name" placeholder="Enter Name">
<input type="number" data-lcp-repeater-key="width" data-lcp-required="true" placeholder="Enter Width (pixels)">
<input type="number" data-lcp-repeater-key="height" data-lcp-required-for-new-row="true" placeholder="Enter Height (pixels)">
<label for="crop-toggle">Crop</label>
<input type="checkbox" data-lcp-repeater-key="crop">
</div>
<button class="lcp-button lcp-repeater-add-row" id="add-repeater-row">Add Row</button>
<button class="lcp-button lcp-repeater-submit" data-lcp-action="lcpUpdateImageSizes"id="submit-repeater">Submit Repeater</button>
</div>
</div>
<!-- Misc Settings Tab -->
<div id="misc" class="tab-pane">
<!-- Misc Settings -->
<h2>Miscellaneous Settings</h2>

View File

@ -55,6 +55,31 @@ function lcp_backend_enqueue() {
'ajax_url' => admin_url('admin-ajax.php'), // This is the URL that well send the AJAX request to
'nonce' => wp_create_nonce('lcp_import_demo_posts_nonce') // Security nonce for validation
));
/* --- Image Sizes --- */
// Enqueue the JavaScript file
wp_enqueue_script('custom-image-sizes', get_template_directory_uri() . '/assets/js/custom-image-sizes.js', array(), null, true);
// Localize script to pass the nonce and ajaxurl to JavaScript
wp_localize_script('custom-image-sizes', 'customImageSizeAjax', array(
'ajax_url' => admin_url('admin-ajax.php'), // The URL to send the request to
'nonce' => wp_create_nonce('custom_image_sizes_nonce') // Create the nonce and pass it
));
}
add_action('admin_enqueue_scripts', 'lcp_backend_enqueue');
add_action('admin_enqueue_scripts', 'lcp_backend_enqueue');
function lcp_send_headers_hooks(){
lcp_set_visited_posts_cookie();
}
add_action('send_headers','lcp_send_headers_hooks');
function lcp_after_setup_theme() {
lcp_register_custom_image_sizes();
}
add_action('after_setup_theme', 'lcp_after_setup_theme');